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("8888@master.com",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"),
),
));
}
}
相關文章
- Flutter側邊欄控制元件-SideBarFlutter控制元件IDE
- flutter實戰1:完成一個有側邊欄的主介面Flutter
- Vue Element Admin 新增側邊欄Vue
- jQuery固定側邊欄外掛ssMenujQuerySSM
- OctoberCMS 外掛學習 側邊欄
- 又一個 iOS 側邊欄元件: SideMenuiOS元件IDE
- 更改 Sublime text 3 側邊欄字型大小
- TornadoFx實現側邊欄選單效果
- Typora 隱藏側邊欄圖片資料夾
- Vue後臺管理開發之側邊欄(初稿)Vue
- Qt介面設計--側邊欄隱藏和滑出QT
- sublime設定預設開啟側邊欄(失敗)
- SideNotes:螢幕側邊欄的高效筆記應用IDE筆記
- 微軟推出全新Win10 App Project Newsbar:桌面右側新聞側邊欄微軟Win10APPProject
- 影片直播原始碼,預設展開側邊欄選單原始碼
- vue-element-admin之修改側邊欄的icon圖示Vue
- Win10 隱藏左側邊側欄(導航視窗)中的資料夾Win10
- Flutter 側滑欄及城市選擇UI的實現FlutterUI
- Flutter 系列文章:Flutter Drawer 控制元件介紹Flutter控制元件
- ElementUI側邊欄導航選單隱藏顯示問題UI
- 直播軟體搭建,通過Android DrawerLayout實現側邊欄功能Android
- jQuery點選彈出側邊欄提示資訊皮膚特效jQuery特效
- flutter - 自定義 Drawer 元件(不依賴 Scaffold)Flutter元件
- CSS3實現側邊欄快速定位的隱藏和消失CSSS3
- jQuery簡單實用的響應式固定側邊欄外掛jQuery
- 一種離譜到極致的頁面側邊欄效果探究
- vue-element-admin配置側邊欄以及主要模組背景色等Vue
- 如何用 CocosCreator 對接抖音小遊戲的側邊欄復訪遊戲
- jQuery和css3側邊欄滑出式圖片介紹外掛jQueryCSSS3
- win10選單欄跑到右邊去了如何解決 win10電腦開始欄跑到側邊怎麼辦Win10
- 適合移動手機的jQuery多級側邊欄選單外掛jQuery
- 線上直播原始碼,JS動態效果之,側邊欄滾動固定效果原始碼JS
- 微軟 Edge 瀏覽器 107 正式版釋出:新增側邊欄功能微軟瀏覽器
- Flutter - Drawer 抽屜檢視與自定義headerFlutterHeader
- Flutter基礎(六)Material元件之BottomNavigationBar、TabBar、DrawerFlutter元件NavigationtabBar
- Flutter 基礎(六)Material 元件之 BottomNavigationBar、TabBar、DrawerFlutter元件NavigationtabBar
- JavaScript 側欄選項卡JavaScript
- Flutter之drawer詳細分析(你要的操作都有)Flutter