CODEWITHSUNDEEP
flutterdrawerappbarflutter-layout
Ale
Ale

Reputation: 2344

Flutter Drawer below AppBar

I've implemented a Drawer in my Flutter app.

Closed Drawer:

enter image description here

Opened Drawer:

enter image description here

As you can see, the Drawer is on top of the Appbar. Before I started the app on Flutter, we had a native Android app with a Drawer that used to look like this:

Closed Drawer:

enter image description here

Opened Drawer:

enter image description here

Here is my code:

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildDrawer(context);
  }
}

Widget _buildDrawer(BuildContext context) {
  return new Drawer(
    child: new ListView(
      children: <Widget>[
        _buildDrawerItem(context, EnumDrawerItem.PROJECT_SELECTION, Icons.home, Colors.transparent),
        new Divider(height: 20.0),
        _buildDrawerItem(context, EnumDrawerItem.TASK_LIST, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.GUIDED_TASKS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.PHOTOS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.DOCUMENTS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.LOG_OUT, Icons.home, const Color(0x85bf0202)),
        new Divider(),
      ],
    ),
  );
}

Widget _buildDrawerItem(BuildContext context, EnumDrawerItem drawerItem, IconData iconData, Color color) {
  return  Container(
    color: color,
    child: new Padding(
      padding: new EdgeInsets.all(7.0),
      child: new Row(
        children: <Widget>[
          new Icon(iconData),
          new Container(
            margin: new EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
            child: new Text(
              drawerItem.toString(),
              style: styleDrawerItem,
            ),
          ),
        ],
      ),
    ),
  );
}

I know this is the standard Material Design style, but the client wants it as it was before.

Would it be possible to implemented it as in the 2 last screenshots? Do you have any idea?

Upvotes: 5

Views: 16431

Answers (5)

OmarFarouk
OmarFarouk

Reputation: 1

You can wrap the Drawer widget in a Container and give it a margin with toolbar height value. EXAMPLE

 drawer: Container(
      margin: EdgeInsets.only(top: kToolbarHeight), child: Drawer()),

Upvotes: 0

Ali Punjabi
Ali Punjabi

Reputation: 540

Simple and to the point:

drawer: Padding(
    padding: const EdgeInsets.fromLTRB(0, 80, 0, 0),
    child: Drawer(),

Upvotes: 6

Aman Berkinbaev
Aman Berkinbaev

Reputation: 61

Try this one:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var statusBarHeight = MediaQuery.of(context).padding.top;
    var appBarHeight = kToolbarHeight;  //this value comes from constants.dart and equals to 56.0
    return Scaffold(
      drawerScrimColor: Colors.transparent,
      appBar: AppBar(),
      drawer: Container(
        padding: EdgeInsets.only(top: statusBarHeight+ appBarHeight + 1),//adding one pixel for appbar shadow
        width: MediaQuery.of(context).size.width,
        child: Drawer(),//write your drawer code
      ),
      body: AnyBody(), //add your body
      bottomNavigationBar: AnyNavigationBar(), //add your navigation bar
    );
  }
}

Upvotes: 6

Jaime
Jaime

Reputation: 191

I use the key in scaffold and references in leading in scaffold principal how in the example

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

return Scaffold(
  appBar: AppBar(
      title: Text('Draw'),
      leading: IconButton(
          icon: Icon(Icons.dehaze),
          onPressed: () {
            if (_scaffoldKey.currentState.isDrawerOpen == false) {
              _scaffoldKey.currentState.openDrawer();
            } else {
              _scaffoldKey.currentState.openEndDrawer();
            }
          })),
  body: Scaffold(
    key: _scaffoldKey,
    drawer: Drawer(),
    body: Center(
      child: Text('Drawer'),
    ),
  ),
);

Upvotes: 12

Raouf Rahiche
Raouf Rahiche

Reputation: 31356

Wrap your main Scaffold in another Scaffold and use the drawer of child Scaffold also make sure to set automaticallyImplyLeading to false so you don't get back icon in the AppBar

UPDATE : i don't recommend this way because of this issue

return Scaffold(
      primary: true,
      appBar: AppBar(
        title: Text("Parent Scaffold"),
        automaticallyImplyLeading: false,
      ),
      body: Scaffold(
        drawer: Drawer(),
      ),
    );

Final Result :

enter image description here

Upvotes: 20

Related Questions