Flutter學習-Drawer

 drawer（抽屜）是Flutter中Scraffold的一個UI組件，用於創建一個從屏幕邊緣滑出的側邊欄菜單。這個側邊欄通常用於放置應用程序的導航鏈接、設置選項或其他相關內容，以提供更好的用戶體驗和導航方式。

教學影片：https://www.youtube.com/watch?v=WRj86iHihgY

以下是Drawer類的各項屬性說明：

const Drawer({
  super.key,
  this.backgroundColor, //背景顏色
  this.elevation, //陰影高度
  this.shadowColor, //陰影顏色
  this.surfaceTintColor,
  this.shape, //邊線設定
  this.width, //側欄寬度
  this.child, //主要內容，多半是於listview中，DrawerHeader和ListTile相互配合
  this.semanticLabel, //語義標籤，用於更好的適別
}) : assert(elevation == null || elevation >= 0.0);

範例：

drawer: Drawer(
  //背景顏色
  backgroundColor: Colors.blueGrey,
  elevation: 8.0, //陰影高度
  semanticLabel: 'Custom Drawer', //語義標籤
  width: 300, //側欄寬度
  //邊線設定
  shape: Border(
    top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
    left: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
    right: BorderSide(width: 3.0, color: Color(0xFFFF7F7F7F)),
    bottom: BorderSide(width: 4.0, color: Color(0xFFFF7F7F7F)),
  ),
  shadowColor: Colors.cyan, //陰影顏色
  //側欄內容 ，一般配合listview使用
  child: ListView(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text(
          '側欄標題',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
        onTap: () {
          // Handle tap on Home
        },
      ),
      ListTile(
        leading: Icon(Icons.settings),
        title: Text('設定一'),
        onTap: () {
          // Handle tap on Settings
        },
      ),
    ],
  ),
),

如果要在側欄上，點選後，關閉側欄，要使用：Navigator.pop(context);

ListTile(
  leading: Icon(Icons.keyboard_backspace_outlined),
  title: Text('設定一'),
  onTap: () {
    Navigator.pop(context); //關閉側欄方法
  },
),

要在特定的按鈕點選後讓側欄打開，需先用Builder包起來，才能使用

floatingActionButton: Builder(
  builder: (BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        Scaffold.of(context).openDrawer();
      },
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  },
)

在每個頁面都用相同的appbar 、drawer方法參考：

https://stackoverflow.com/questions/51659805/persisting-appbar-drawer-across-all-pages-flutter