Flutter(九)——Drawer侧滑菜单与包管理

包管理

一个完整的应用或多或少会使用一些第三方包来开发，这样可以避免重复造轮子，就像Java开发Android引入的Xutils，Glide以及奶油刀等。其中，我们都知道Android中对包的管理是gradle，IOS用Cocoapods对包进行管理。（侧滑菜单实现效果图）

而在Flutter中，则通过pubspec.yaml配置文件对包进行管理，就像博主前面讲解Image组件时候引入自己的图片，就需要在里面声明。
如上图所示，我们可以在dependencies和dev_dependencies中加入所需要的依赖包，这些包都是官方或第三方开发者上传的。我们可以在Pub官方网站（https://pub.dartlang.org/）上搜索一些Flutter的第三方包，输入版本号后，在项目的根目录里输入命令“flutter packages get”，把包下载下来即可使用，或者在IDE里同步所需要的依赖包。

同样，我们也可以自行开发一些插件上传到pub上托管。pubspec.yaml配置文件的配置项参数如下表：

参数	取值
name	表示应用或包的名称，项目里import的包名和这里设定的值一致
description	应用或包的描述信息
version	应用或包的当前版本号
dependencies	应用或包依赖的插件或其他第三方包
dev_dependencies	开发环境下依赖的包
flutter	一些配置项，例如fonts和assets

实现侧滑效果

如何使用各个组件的章节到这里全部就讲解完成，既然学了这么多，实践一下也是有必要的，所以这里小编将实现侧滑菜单效果，来巩固前面章节学习的所有知识。

首先，我们分析一下Android App侧滑菜单有那些特性，肯定有左侧滑动菜单，右侧显示区域对不对？而左侧滑动菜单上面还有一个背景图片，一个头像以及一个设置图片按钮。

所以这里我们先来实现右侧显示效果，也就是right_page.dart页面，代码如下：

import 'package:flutter/material.dart';

class RightPage extends StatelessWidget {
  final String pageText;//确定右侧的文字

  RightPage(this.pageText);//构造函数传入设置页面的文字

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: new Text(pageText),//该页面标题栏与文字相同
      ),
      body: Center(
        child: new Text(pageText),//该页面标题栏与文字相同
      ),
    );
  }
}

右侧不是重要的，我们这里只确定是否跳转到该页面用文字确定一下，文字通过构造页面的时候传入。接着就是非常重要的，也是最主要的左侧滑动页面left_page.dart，代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_app/page/right_page.dart';

class LeftPage extends StatefulWidget{
  @override
  _LeftPageState createState() => new _LeftPageState();
}

class _LeftPageState extends State<LeftPage> {
  //头像与设置按钮图片
  String headImageUrl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580303478532&di=1478f90ea84d8431546853ee4b9b02d6&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F04%2F20151104140542_tBusS.jpeg";
  String profileImageUrl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580303491035&di=1abfac6069e86a510b8deec36e4be614&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F26%2F20160726185736_yPmrE.thumb.224_0.jpeg";
  //交换头像与设置图片的方法
  void exchangeImage() {
    String backupString = headImageUrl;
    this.setState((){
      headImageUrl = profileImageUrl;
      profileImageUrl = backupString;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: new Text("侧滑效果"),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new UserAccountsDrawerHeader(//左侧菜单上面的显示区域
                accountName: new Text("liyuanjinglyj"),//姓名或者昵称
                accountEmail: new Text("[email protected]"),//邮箱地址
                currentAccountPicture: new GestureDetector(//大头像点击事件
                  onTap: ()=>print("点击事件"),
                  child: new CircleAvatar(
                    backgroundImage: new NetworkImage(this.headImageUrl),
                  ),
                ),
              otherAccountsPictures: <Widget>[//设置图像的点击事件
                new GestureDetector(
                  onTap: ()=>this.exchangeImage(),//点击交换图片
                  child: new CircleAvatar(
                    backgroundImage: new NetworkImage(this.profileImageUrl),
                  ),
                )
              ],
              decoration: new BoxDecoration(//左侧菜单上面的显示区域背景，设置图片以及填充方式
                image: new DecorationImage(image: new NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3138597732,1722388446&fm=26&gp=0.jpg"),fit: BoxFit.fill)
              ),
            ),
            new ListTile(//一个固定高度的行，通常包含一些文本，以及一个行前或行尾图标。
              title: new Text("第一个菜单"),
              trailing: new Icon(Icons.accessibility),
              onTap: (){
                Navigator.of(context).pop();//出栈
                Navigator.of(context).push(//进栈
                    new MaterialPageRoute(
                        builder: (BuildContext context)=>new RightPage("第一个菜单"),
                    ));
              },
            ),
            new ListTile(
              title: new Text("第二个菜单"),
              trailing: new Icon(Icons.search),
              onTap: (){
                Navigator.of(context).pop();//出栈
                Navigator.of(context).push(//进栈
                    new MaterialPageRoute(
                        builder: (BuildContext context)=>new RightPage("第二个菜单页面")
                    ));
              },
            ),
            new Divider(),//分割线
            new ListTile(
              title: new Text("第三个菜单"),
              trailing: new Icon(Icons.playlist_add_check),
              onTap: ()=>Navigator.of(context).pop(),
            )
          ],
        ),
      ),
      body: new Center(
        child: new Text("主页面",style: new TextStyle(fontSize: 35.0),),
      ),
    );
  }
}

注释已经够详细了，这里还是注意一下，Flutter是通过堆栈的方式存储页面路径。所以，常规操作进栈（push）和出栈（pop）是必不可少的，其他的代码中都有注释，看一下就很好理解，最后就是我们的main.dart代码：

import 'package:flutter/material.dart';
import 'package:flutter_app/page/left_page.dart';

void main(){
  runApp(
    new MaterialApp(
      home: LeftPage(),
    ),
  );
}

这样侧滑效果的Flutter项目就完成了，实现的效果如该博文首图一摸一样，下一篇博文依旧讲解应用组件的实践：登录界面与轮播图效果实现。