Flutter drawer側邊欄

甜寵軟妹發表於2020-12-29

今天我們做一個側邊欄,點選頂部的圖示(這是側邊欄元件直接生成的),就可以實現以下的效果啦

複製到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"),
      ),
    ));
  }
}

相關文章