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



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?


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.

  children: [
    const Positioned(
      top: kToolbarHeight,
      left: 4.0,
      child: CustomBackButton(), 

Custom back button

Default back button in app bar


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


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.

Answered By – Louis Deveseleer

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *