AppBar back button animation clashes with title when navigating between screens

53 views Asked by At

I'm having issues with Flutter's AppBar backwards navigation button clashing with my centred title when navigating between screens.

Example of problem

As you can see the arrow moves through the title when going forward/back within the navigation.

How can I only show the back button gracefully for the last moments such that it doesn't clash with the title? This would have to be for both forwards/backwards navigation.

Here is my code for the AppBar:

AppBar(
  centerTitle: true,
  title: const Hero(
    tag: 'logo',
    child: Material(
      color: Colors.transparent,
      child: SizedBox(
        height: 27,
        child: Text(
          'Some App',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ),
);

Note my use of Material in the Hero widget is a fix for this issue.

Things I've tried:

  • Using an expanded widget within the title with a solid background such that the arrow cannot be seen while passing the title. The problem here is that the title then becomes off-centre when the widget shows the back button. Also the arrow still appears briefly on the right.
  • Removing the back button with automaticallyImplyLeading: false. This is not an option as we want a visual cue for navigation.
  • Setting the duration (in Go Router) of the animation to zero. Again, this is a less than elegant user experience.
0

There are 0 answers