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(),
    );
  }
}

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