Search code examples
flutterflutter-appbar

What is the exact position of the BackButton in an AppBar? Is kToolbarHeight 4px off?

Description

How do you position a custom back button on the exact location where the back button usually would be in an app bar? Is kToolbarHeight 4px off?

Goal

I fade in the original app bar as the bottom sheet is pushed to the top. Currently I'm using a Stack widget that positions the back button with kToolbarHeight from the top, but apparently that doesn't really match (It's rather kToolbarHeight - 4px). I use a custom implementation of a back button, but this problem persists with the original backButton widget too.

Stack(
  children: [
    Map(...),
    const Positioned(
      top: kToolbarHeight,
      left: 4.0,
      child: CustomBackButton(), 
    ),
  ],
);

Custom back button

Default back button in app bar

Groundwork

I've looked it up in the dev tools and the original source code but couldn't find a reliable constant nor anything helpful.

Solution

  • Try like this: Give your CustomBackButton() widget the dimensions of a square of kToolbarHeight side. Inside your Stack, add a SafeArea child, into which you position the CustomBackButton() in the top left corner. That should place it in the right position.