今天我们做一个侧边栏,点击顶部的图标(这是侧边栏组件直接生成的),就可以实现以下的效果啦
复制到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"),
),
));
}
}