Flutter 侧滑菜单 Drawer抽屉组件示例

Flutter 侧滑菜单 Drawer抽屉组件示例_第1张图片

 

图片资源:

1 创建 images目录,把图片放在目录中

Flutter 侧滑菜单 Drawer抽屉组件示例_第2张图片

2 在 pubspec.yaml 文件中  把assets 注释解开,并添加图片路径,注意不要在assets有多余的空格,否则报错。

Flutter 侧滑菜单 Drawer抽屉组件示例_第3张图片

import 'package:flutter/material.dart';
void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "Darwer 示例",
      home: new Scaffold(
        appBar: new AppBar(title:
          new Text("Darwer 示例"),
        ),
    drawer: new Drawer(
      child: ListView(
        children: [
//设置 用户信息 用户名 头像
          UserAccountsDrawerHeader(
            accountName: new Text("尼古拉斯"),
            accountEmail: new Text("[email protected]"),
//当前头像
            currentAccountPicture: new CircleAvatar(
            backgroundImage: new  AssetImage("images/1.jpeg"),
            ),
            onDetailsPressed: (){},
//其他账号头像
            otherAccountsPictures: [
              new Container(
                child: Image.asset("images/like.jpg"),
              )
            ],
          ),
          ListTile(
            leading: new CircleAvatar(
              child: new Icon(Icons.color_lens),
            ),
            title: Text("个性装扮"),
          ),
          ListTile(
            leading: new CircleAvatar(
              child: new Icon(Icons.photo),
            ),
            title: Text("我的相册"),
          ),
          ListTile(
            leading: new CircleAvatar(
              child: new Icon(Icons.wifi),
            ),
            title: new Text("wifi"),
          )
        ],
      ),
    ),
      ),
    );
  }

}

参考:Flutter入门与实战

你可能感兴趣的:(flutter)