iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
0
Mobile Development

前端工程師的 Flutter 新手村挑戰系列 第 10

【前端的 Flutter 新手村】Day10-為你的App建立Menu選單-Drawer & Routes

不管是網頁或是App都需要Menu做導覽,今天我們就要來為App添加選單Menu,會使用Drawer Widget

Step1.

建立一個帶有drawerScaffold

Scaffold(
  drawer: Drawer(...)
);

Scaffold 屬於 Widget 的一種,它遵循Material Design設計守則。提供一套符合 Material Design的App視覺元件,例如: Drawer、AppBar、bottomNavigationBar、SnackBar 等

Step2.

Drawer()裡面添加內容,我們用ListView來添加像列表一樣的選單內容。

drawer: Drawer(
    child: ListView(
      children: <Widget>[
        DrawerHeader(
          child: Text('Menu'),
          decoration: BoxDecoration(...), //menu設計
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            //點擊後做什麼事
            //切換頁面
            //收合drawer
          },
        ),
      ],
    ),
),

ListView 是可以滾動的Widget,當內容超過視窗大小時,使用者可以往上滑看到更多內容。

Step3.

添加點擊選單選項會收合Drawer,直接加到onTap

Navigator.pop(context);

不知道大家還有沒有印象,昨天做的換頁方式是用Navigator.push(),是用推入的效果切換畫面。今天的pop則是直接換沒有進場動畫。

Step4.

但是這樣跟我們想像的Menu功能不一樣,點了並不會換另一頁,所以要添加Route

initialRoute: '/', //設定初始頁面為首頁
routes: {
  '/': (context) => MyHomePage(), //斜線代表首頁,設首頁為某自訂Widget
  '/sign': (context) => SignInPage(),  //設定Sign in page
},

設好之後將Step3pop()換成可以指定路徑的PushNamed()popAndPushNamed()

Navigator.PushNamed(context, '/Sign'); //無效果直接pop換頁
Navigator.popAndPushNamed(context, '/Sign'); //換頁推入效果

成果

drawer

這樣就完成了~~
因為三個頁面都有共用選單,所以最後我把Drawer抽出來,完整code可以到GitHub上看~


上一篇
【前端的 Flutter 新手村】Day9-在AppBar中添加換頁功能 ft. Material Icons
下一篇
【前端的 Flutter 新手村】Day11-對拇指友善的BottomNavigationBar
系列文
前端工程師的 Flutter 新手村挑戰30

1 則留言

0
imakou
iT邦新手 5 級 ‧ 2019-11-04 02:24:06

請問_buildGrid 為什麼不像是 Friends 使用class來定義呢?
是另一種方法是嗎?謝謝?

Hi~imakou
我會把Friends定義為Class的原因,主要是想練習看看這種做法,一樣的樣式寫一次就好,如果有資料內容不一樣,但是樣式一樣的話,就可以這麼做。
_buildGrid當然也可以定義成Class~只是我沒有做而已
要不要定義Class可以視個人需求調整~

我要留言

立即登入留言