Navigation Drawer adalah panel yang menampilkan pilihan navigasi utama aplikasi dari tepi kiri layar. Tersembunyi sebagian, tetapi menu akan muncul ketika pengguna gesekan jari dari tepi kiri layar atau pengguna menyentuh ikon aplikasi di bar untuk menampilkannya.

Contoh show menu navigation drawer :

Untuk membuat navigation drawer ada beberapa file baru yang dibutuhkan. Buatlah file berikut pada direktory lib.

main.dart :

import 'package:flutter/material.dart';
import 'home.dart';
import 'contact.dart';
import 'about.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Navigation Drawer',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ), debugShowCheckedModeBanner: false,
      home:  new MyHomePage(),
        routes : <String, WidgetBuilder>{
          '/home': (BuildContext)=> new MyHomePage(),
          '/about': (BuildContext)=> new AboutPage(),
          '/contact':(BuildContext)=>new ContactPage(),
        },
      );
  }
}

home.dart :

import 'package:flutter/material.dart';

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

class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: new Text("Navigation Drawer"),
        backgroundColor: Colors.green,
      ),

      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[new ListTile(
            title: Text("Welcome"),
          ),
          new Divider(),
            new ListTile(
              title: new Text("About"),
              trailing: new Icon(Icons.info),
              onTap: (){
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed('/about');
              }),

            new ListTile(
              title: new Text("Contact"),
              trailing: new Icon(Icons.phone),
              onTap: (){
                Navigator.of(context).pop();
                Navigator.of(context).pushNamed('/contact');
              }),
          ],
        ),
      ),

      body: new Center(
        child: new Text("Home Page", style: new TextStyle(fontSize: 35.0)),

      ),
    );
  }
}

about.dart :

import 'package:flutter/material.dart';

class AboutPage extends StatefulWidget{
  @override
  _AboutPageState createState()=> new _AboutPageState();
}

class _AboutPageState extends State<AboutPage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: new Text('About'),
        backgroundColor: Colors.green,
      ),
      body: new Center(
        child: new Text("This Is Page ABout !", style: new TextStyle(fontSize: 35.0)),
      ),
    );
  }
}

contact.dart :

import 'package:flutter/material.dart';

class ContactPage extends StatefulWidget{
  _ContactPageState createState ()=> new _ContactPageState();
}

class _ContactPageState extends State<ContactPage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: new Text('Contact'),
        backgroundColor: Colors.green,
      ),
      body: new Center(
        child: new Text("Page Contact", style: new TextStyle(fontSize: 35.0)),
      ),
    );
  }
}

Hasil :