Flutter - Navigation Drawer Left or Right

main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      drawer: new AppDrawer(), // left side
      //endDrawer: new AppDrawer(), // right side
      appBar: new AppBar(
        title: new Text("Title"),
      ),
      body: new ListView(
        children: <Widget>[
          new ListTile(
            title: new Text("Body"),
          ),
          new ListTile(
            title: new RaisedButton(
              child: new Text("Open Drawer"),
              onPressed: () {
                _scaffoldKey.currentState.openDrawer(); // left side
                //_scaffoldKey.currentState.openEndDrawer(); // right side
              },
            ),
          ),
        ],
      ),
    );
  }
}


class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => new _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
    return new Drawer(
      child: new ListView(
        children: <Widget>[
          new DrawerHeader(
              child: new Text("Header"),
          ),
          new ListTile(
            title: new Text("Item 1"),
          ),
        ],
      ),
    );
  }
}

This source is covered int this video: https://www.youtube.com/watch?v=BIfufmDiTN0&list=PLBbgqtDgdc_RUWUCInIqxpY--C94C6Xjh&index=37&t=0s

Hello Brandon,
I have created end drawer. But my drawer has lots of items and whenever i decreased the size of item. List View shows blank white space at the bottom with Bottom Overflowed and Top overflowed.

code is here:

`class DrawerItem {
String title;
IconData leadingIcon, trailingIcon;

DrawerItem(this.title, this.leadingIcon, this.trailingIcon);
}

class HomePage extends StatefulWidget {

final drawerItems = [
new DrawerItem("Home", Icons.home, Icons.close),
new DrawerItem("Fragment 1", null, null),
new DrawerItem("Fragment 2", null, null),
new DrawerItem("Fragment 3", null, null),
new DrawerItem("Fragment 4", null, null),
new DrawerItem("Fragment 5", null, null),
new DrawerItem("Fragment 6", null, null),
new DrawerItem("Fragment 7", null, null),
new DrawerItem("Fragment 8", null, null),
new DrawerItem("Fragment 9", null, null),
new DrawerItem("Fragment 10", null, null),
new DrawerItem("Fragment 11", null, null),
new DrawerItem("Fragment 12", null, null),
new DrawerItem("Fragment 13", null, null)
];

@OverRide
State createState() {
return new HomePageState();
}

}

class HomePageState extends State {

@OverRide
Widget build(BuildContext context) {
var drawerOptions = [];
var listSize = widget.drawerItems.length * 2;
var index = 0;
for (var i = 0; i < listSize; i++) {
if (i % 2 == 0) {
var drawerItem = widget.drawerItems[index];
if (index == 0) {
drawerOptions.add(
new Container(
margin: EdgeInsets.only(top: 20.0),
height: 40.0,
child: new ListTile(
title: new Text(drawerItem.title, style: new TextStyle(
color: Colors.white,
fontSize: 18.0)),
trailing: new Icon(drawerItem.trailingIcon,
color: new Color(0xFFF05030),
size: 40.0),
leading: new Icon(drawerItem.leadingIcon,
color: new Color(0xFFF05030))
)
)
);
} else {
drawerOptions.add(
new Container(
height: 35.0,
child: new ListTile(
title: new Text(drawerItem.title, style: new TextStyle(
color: Colors.white,
fontSize: 16.0)),
trailing: new Icon(drawerItem.trailingIcon,
color: new Color(0xFFF05030),
size: 40.0),
leading: new Icon(drawerItem.leadingIcon,
color: new Color(0xFFF05030))
)
)
);
}
index++;
} else {
drawerOptions.add(
new Divider(
height: 1.0,
color: new Color(0xFF403C54),
)
);
}
}

return new Scaffold(
  appBar: new AppBar(
      title: new Text("Title", style: new TextStyle(
          color: new Color(0xFFF05030))
      )
  ),

  endDrawer: new Drawer(
    child: new ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        new Container(
          color: new Color(0xFF2E2B3D),
          child: new Column(children: drawerOptions),
        )
      ],
    ),
  ),
  body: new Container(
    child: new Center(
        child: new Text("Home Page")
    ),
  ),
);

}

onItemSelected(var i) {
Navigator.of(context).pop();

switch (i) {
  case 0:
    Navigator.of(context).push(new MaterialPageRoute(
        builder: (BuildContext context) => new FirstFragment())
    );
    break;
/*case 1:
    Navigator.of(context).push(new MaterialPageRoute(
        builder: (BuildContext context) => new SecondFragment())
    );
    break;
  case 2:
    Navigator.of(context).push(new MaterialPageRoute(
        builder: (BuildContext context) => new ThirdFragment())
    );
    break;*/
}

}

}`

Great gist. Thanks!