app左上角的抽屜

不是哆啦A夢那種抽屜
抽屜可以收著你切換畫面的按鈕
像Instagram就使用來放著(設定/你的動態/典藏....)

• p1: Drawer 底下放著ListView , 我們要放多欗可點擊列表
• p2: DrawerHeader: 符合Drawer風格的標頭
• p3: ListTile: 官方包裝好的widget,方便你快速上手,只管放入想要顯示的資料
• p4 ListTile的onTap事件,Navigator.pop(context)會返回上一個route,就像網頁的上一頁.

class _ShopViewState extends State<ShopView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(MyApp.SHOP.replaceAll('/', '')),
      ),
      //p1 
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            //p2
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.black45,
              ),
              child: Text('Drawer Header'),
            ),
            //p3
            ListTile(
              title: const Text('個人頁面'),
              //p4
              onTap: (() => Navigator.pop(context)),
            ),
            ListTile(
              title: const Text('離開'),
              onTap: (() => Navigator.pop(context)),
            ),
          ],
        ),
      ),
    );
  }
}

成果展示