14. Flutter Drawer——側邊欄

1. Flutter Drawer 側邊欄

• 在 Scaffold 元件裡面傳入 drawer 參數可以定義左側邊欄，傳入 endDrawer 可以定義右側邊欄。側邊欄預設是隐藏的，我們可以通過手指滑動顯示側邊欄，也可以通過點選按鈕顯示側邊欄。

return Scaffold(
	appBar: AppBar(
		title: Text("Flutter App"), 
	),

	drawer: Drawer(
		child: Text('左側邊欄'), 
	),
	endDrawer: Drawer(
		child: Text('右側側邊欄'), 
	), 
);
           

2. Flutter DrawerHeader

• 屬性：

屬性名稱	描述
decoration	設定頂部背景顔色
child	配置子元素
padding	内邊距
margin	外邊距

• 代碼：

drawer: Drawer(
	child: Column(
		children: <Widget>[
			DrawerHeader(
				decoration: BoxDecoration(
					color: Colors.yellow,
					image:DecorationImage(
						image: NetworkImage("url"), 
						fit:BoxFit.cover
						)
					),
					child: ListView(
						children: <Widget>[
							Text('我是一個頭部')
						], 
					), 
				),
				ListTile(
					title: Text("個人中心"),
					leading: CircleAvatar(
						child: Icon(Icons.people)
					), 
				),
				Divider(), 
				ListTile(
					title: Text("系統設定"),
					leading: CircleAvatar(
						child: Icon(Icons.settings)
				),
			 )
			], 
		)
	)
           

3. Flutter UserAccountsDrawerHeader

• 屬性：

屬性名稱	描述
decoration	設定頂部背景顔色
accountName	賬戶名稱
accountEmail	賬戶郵箱
currentAccountPicture	使用者頭像
otherAccountsPictures	用來設定目前賬戶其他賬戶頭像
margin

• 代碼：

drawer: Drawer(
	child: Column(
		children: <Widget>[
		
		UserAccountsDrawerHeader(
				accountName:Text("are you ok") , 			
				accountEmail:Text("fine thank you") , 
				currentAccountPicture: CircleAvatar(
		backgroundImage:
			NetworkImage("url"), ),
			decoration: BoxDecoration(
			color: Colors.yellow,
			image:DecorationImage(
				image:
					NetworkImage("url"), 
					fit:BoxFit.cover
			)
		),
		otherAccountsPictures: <Widget>[
			Image.network("url"),
			Image.network("url")
			], 
		),
		ListTile(
			title: Text("個人中心"),
			leading: CircleAvatar(
			child: Icon(Icons.people)
			), 
		),
		Divider(), 
		ListTile(
			title: Text("系統設定"),
			leading: CircleAvatar(
				child: Icon(Icons.settings)
			), 
		   )
		], 
	)
)