在使用Material Design的应用程序中，导航有两个主要选项：制表符和抽屉。当没有足够的空间来支撑标签时，抽屉提供了一个方便的替代方案。

在Flutter中，我们可以将Drawer Widget与Scaffold结合使用，以使用Material Design Drawer创建布局！

导读

1.创建 Scaffold。
2.添加抽屉。
3.用物品填充抽屉。
4.以编程方式关闭抽屉。

1.创建 Scaffold

为了在我们的应用程序中添加抽屉，我们需要将其包装在Scaffold Widget中。 Scaffold Widget为遵循Material Design Guidelines的应用程序提供一致的可视化结构。它还支持特殊的Material Design组件，例如Drawers，AppBars和SnackBars。

在这种情况下，我们想要创建一个带抽屉的Scaffold：

Scaffold(
    drawer:
);

2.添加抽屉

我们现在可以在我们的脚手架上添加一个抽屉。抽屉可以是任何Widget，但通常最好使用材料库中的Drawer widget，它遵循Material Design规范。

Scaffold(
    drawer: Drawer(
        child:
    ),
);

3.用物品填充抽屉。

现在我们有一个抽屉，我们可以添加内容！在这个例子中，我们将使用ListView。虽然我们可以使用Column Widget，但ListView在这种情况下很方便，因为如果内容占用的空间比屏幕支持的更多，它将允许用户滚动抽屉。

我们将使用DrawerHeader和两个ListTile Widgets填充ListView。有关使用列表的更多信息，请参阅列表配方。

Drawer(
    child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
            DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                    color: Colors.blue,
                ),
            ),
            ListTile(
                title: Text('Item 1'),
                onTap: (){
                },
            ),
            ListTile(
                title: Text('Item 2'),
                onTap: (){
                },
            ),
        ],
    ),
);

4.以编程方式关闭抽屉

用户点击某个项后，我们经常要关闭抽屉。我们怎样才能做到这一点？使用导航器！

当用户打开抽屉时，Flutter会将抽屉添加到引擎盖下的导航堆栈中。因此，要关闭抽屉，我们可以调用Navigator.pop（context）。

ListTile(
    title: Text('Item 1'),
    onTap: (){
        Navigator.pop(context);
    },
),

完整例子

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    final appTitle = 'Drawer Demo';
    
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: appTitle,
            home: MyHomePage(
                title: appTitle
            ),
        );
    }
}

class MyHomePage extends StatelessWidget {
    final String title;
    
    MyHomePage({Key key, this.title}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text(title)),
            body: Center(child: Text('My page!')),
            drawer: Drawer(
                child: ListView(
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                        DrawerHeader(
                            child: Text('Drawer Header'),
                            decoration: BoxDecoration(
                                color: Colors.blue,
                            ),
                        ),
                        ListTile(
                            title: Text('Item 1'),
                            onTap: (){
                                Navigator.pop(context);
                            },
                        ),
                        ListTile(
                            title: Text('Item 2'),
                            onTap: (){
                                Navigator.pop(context);
                            },
                        ),
                    ],
                ),
            ),
        );
    }
}