CupertinoNavigationBar leading is too high

For some reason the leading in CupertinoNavigationBar is too high. Any ideas?

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: CupertinoPageScaffold(
        navigationBar: new CupertinoNavigationBar(
      leading: Text("lead"),
      middle: Text("Title"),
      trailing: Text("Trailing")
    ),
        child: Center(child: Text("Test!")),

      )
    );
  }
}

@xster

(cc @xster)
While it looks okay with the iOS style back button it is a little weird that with text it aligns so strangely. Comparison:

Yes I can confirm that with the back arrow it looks fine, but with text it is too high.

Somewhat unrelated, where can I find tools that show information on widgets such as bounding boxes, hitbox, etc. I did find profiler for framerate which is really nice.

This seems consistent with the Material AppBar API as well where the leading widget is forced to take the full height of the leading position slot.

The easiest workaround is to wrap your leading widget with

leading: Align(
  widthFactor: 1.0,
  alignment: Alignment.center,
  child: Text('lead'),
),

I'll see if we can make it more convenient

THIS. IS. ~~SPARTA.~~ Cupertino!

This seems consistent with the Material AppBar API as well where the leading widget is forced to take the full height of the leading position slot.

The easiest workaround is to wrap your leading widget with ... Align

I interpreted it as working as intended.

I'll see if we can make it more convenient

Ok, I missed that. I'll reopen.

What is interesting to me here is that trailing does not have the same behavior as leading. Looking at leading and trailing together definitely looks like a bug. AppBar does not have trailing to compare to (like leading discussed above), but maybe we should check AppBar.actions, which is sort of the same as CupertinoNavigationBar.trailing?

What is interesting to me here is that trailing does not have the same behavior as leading. Looking at leading and trailing together definitely looks like a bug. AppBar does not have trailing to compare to (like leading discussed above), but maybe we should check AppBar.actions, which is sort of the same as CupertinoNavigationBar.trailing?

AppBar.actions behaves like CupertinoNavigationBar.trailing, only that it allows for multiple trailings.

Part of #91715

flutter/packages/flutter/lib/src/widgets/navigation_toolbar.dart

Line 107 in 1af0c06

minHeight: size.height, // The height should be exactly the height of the bar.

Align persistent nav bar leading widget (#170095)

Squashed commit of the following:

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

CupertinoNavigationBar leading is too high #18536

27 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CupertinoNavigationBar leading is too high #18536

Description

Activity

jonahwilliams commented on Jun 17, 2018

lukepighetti commented on Jun 18, 2018

xster commented on Jul 7, 2018

lukepighetti commented on Jul 7, 2018

zoechi commented on Jan 28, 2019

lukepighetti commented on Jan 28, 2019

zoechi commented on Jan 28, 2019

27 remaining items

Piinks commented on Aug 14, 2024

victorsanni commented on Aug 14, 2024

victorsanni commented on May 15, 2025

victorsanni commented on Jun 5, 2025

github-actions commented on Jun 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions