Flutter drawer侧边栏

今天我们做一个侧边栏,点击顶部的图标(这是侧边栏组件直接生成的),就可以实现以下的效果啦

复制到main.dart文件里就可以运行出根博主一样的效果哦
(一)效果图
在这里插入图片描述
在这里插入图片描述

(二)实现方法
drawer组件以及它自带的组件实现
column和row组件
背景图image
头像clipavatar
(三)代码实现

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: Text('侧边栏'),
       // centerTitle: true,
      ),
      body:Container(),
       drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: [
                Expanded(
                    child: UserAccountsDrawerHeader(
                  accountName: Text("masetr",style: TextStyle(color: Colors.blue,fontSize: 15),),
                  accountEmail: Text("[email protected]",style: TextStyle(color: Colors.blue,fontSize: 15)),
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: AssetImage("images/mouse1.jpg"),
                  ),
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage("images/mouse2.jpg"),
                          fit: BoxFit.cover)),
                )),
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home,color: Colors.orange,),
              ),
              title: Text("我的空间"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people,color: Colors.orange),
              ),
              title: Text("用户中心"),
            ),
            Divider(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings,color: Colors.orange),
              ),
              title: Text("设置中心"),
            )
          ],
        ),
      ),
      endDrawer: Drawer(//右边侧边栏
        child: Text("right"),
      ),
    ));
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_45425105/article/details/111883969