Flutter Drawer实现抽屉菜单效果

本文实例为大家分享了Flutter Drawer实现抽屉菜单的具体代码，供大家参考，具体内容如下

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: const Text("Drawer Demo"),
        ),
        //内容区域
        body: HomeContent(),
        drawer: Drawer(
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                      //给Drawer加上头布局
                      child: UserAccountsDrawerHeader(
                    //头像
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://profile.csdnimg.cn/B/3/3/1_m0_38013946"),
                    ),
                    accountName: Text("GalenWu"),
                    accountEmail: Text("*******@qq.com"),
                    otherAccountsPictures: <Widget>[
                      //其他账号头像
                      CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg'),
                      )
                    ],
                    decoration: BoxDecoration(
                        image: DecorationImage(
                      image: NetworkImage(
                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F04%2F67%2F81%2F66587f16ae593e0.jpg%21%2Ffwfh%2F804x482%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fwatermark%2Ftext%2FOTDorr7orqE%3D%2Ffont%2Fsimkai%2Falign%2Fsoutheast%2Fopacity%2F20%2Fsize%2F50&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639730040&t=d437e738a695ad0c62bfa947eeacdebb'),
                      fit: BoxFit.cover,
                    )),
                  ))
                ],
              ),
              const ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home, color: Colors.red),
                ),
                title: Text("我的空间"),
                trailing: Icon(Icons.chevron_right),
              ),
              //分割线
              const Divider(),
              const ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.people, color: Colors.blue),
                ),
                title: Text("用户中心"),
                trailing: Icon(Icons.chevron_right),
              ),
              const Divider(),
              const ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.settings, color: Colors.yellow),
                ),
                title: Text("设置中心"),
                trailing: Icon(Icons.chevron_right),
              ),
              const Divider(),
            ],
          ),
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

class HomeContent extends StatelessWidget {
  //自定义方法
  List<Widget> getData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是第$i个列表"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this.getData(),
    );
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。