Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How are the Drawer and the Back navigation button in the AppBar related?

How are the Drawer and the Back navigation button in the AppBar related?

There is a page

return Scaffold(
    key: _scaffoldKey,
    drawer: const AppDrawer(),
    appBar: PaginationAppBar(),
    body: SomeWidget(),
);

then in PaginationAppBar (which is actually AppBar) I use a button to open drawer

IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () => Scaffold.of(context).openDrawer(),
),

BUT I had to use the following in AppBar to not show drawer Icon instead of back navigation button

automaticallyImplyLeading: false,

(otherwise there will be two drawer buttons in my appbar)

Can I use the approach shown above and show the Back navigation button in the AppBar at the same time?

Tags:

2

Answers


  1. 0

    Flutter’s widget implementations largely follow Material Design guidelines. The documentation states that AppBar should have only one leading navigation icon, alternating between the BackButton, Menu, or none. This design principle is detailed here

    If you’re considering having two buttons in the leading section of the AppBar, remember that it goes against Material Design standards. This could potentially confuse users accustomed to the navigation style of Google’s products.

    Nevertheless, if you deem it necessary, you can design a custom AppBar to accommodate multiple leading icons. Here’s how you can do it:

    class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final Widget child;
final double height;

CustomAppBar({
  required this.child,
  this.height = kToolbarHeight,
});

@override
Size get preferredSize => Size.fromHeight(height);

@override
Widget build(BuildContext context) {
    // Place your widgets here
  }
}

    Also, when using a Drawer() in a Scaffold, it’s not essential to manually add a button to the AppBar or change automaticallyImplyLeading. Flutter automatically includes the menu button, adhering to the Material Design guidelines and ensuring user familiarity.

    Login or Signup to reply.
  2. 0

    If I understood correctly you want to show the menu and back icon at the same time.

    Replace

    IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () => Scaffold.of(context).openDrawer(),
),

    With

    IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () => Navigator.pop(context),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search