How can i implement navigation drawer under appbar in flutter

Question

I want to implement navigation drawer in flutter like this screenshot. But don't know how. Please give me some code hint. Thank you.

This is the image I like to archive

Answer 1

An easy to archive this is using another Scaffold on body and using drawer there. And to control the drawer use ScaffoldState GlobalKey.

Result

Widget

class _MyApp extends StatefulWidget {
  @override
  State<_MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<_MyApp> {
  static final GlobalKey<ScaffoldState> _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () {
              if (_key.currentState != null) {
                if (_key.currentState!.isDrawerOpen) {
                  Navigator.pop(_key.currentContext!);
                } else {
                  _key.currentState!.openDrawer();
                }
              }
            },
            icon: const Icon(
              Icons.more,
            ),
          ),
        ),
        body: Scaffold(
          key: _key,
          drawer: Drawer(
            child: Container(
              color: Colors.red,
            ),
          ),
          body: Column(
            children: const [
              Text("Child"),
            ],
          ),
        ));
  }
}

Answer 2

use the Drawer Widget in scaffold this is an example from the official documentation

Scaffold(
  appBar: AppBar(
    title: const Text('Drawer Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text(
            'Drawer Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.message),
          title: Text('Messages'),
        ),
        ListTile(
          leading: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
        ),
      ],
    ),
  ),
);

this is the result =>

Answer 3

You have to use the Drawer widget.

Scaffold(
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        ListTile(
          title: const Text('Item 1'),
          onTap: (){
            // do something
          },
        ),
        ListTile(
          title: const Text('Item 2'),
          onTap: (){
            // do something
          },
        ),
      ],
    ),
  ),
...

And that's pretty much it! Learn more about Drawer, here.