Issue

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(), 
    ),
  ],
);

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.

Answered By – Louis Deveseleer

Answer Checked By – Jay B. (FlutterFixes Admin)