I'm having issues with Flutter's AppBar backwards navigation button clashing with my centred title when navigating between screens.
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.