iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
1
Mobile Development

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

【前端的 Flutter 新手村】Day9-在AppBar中添加換頁功能 ft. Material Icons

今天要來為AppBar加入換頁功能

在AppBar加入login icon,點擊之後切換到login頁面。

我們拿之前做好的列表頁來改,首頁就設為列表

Step1.

把原本home裡面的內容拆出來做成一個MyHomePage的Widget Class

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: AppBar(...),
      body: Center(  
        child: Column(...),
      )
    );
  }
}

Step2.

首先在AppBar加上login icon,為icon加上行為actions

IconButton(
  icon: const Icon(Icons.account_circle), //換login icon
  tooltip: 'Login page',
  onPressed: () {  //點擊執行換頁
    openPage(context);
  },
)

Flutter的Icon Library是用Google Material Design Icons,只要在裡面找到你要的icon,複製名字貼到Icon(Icons.[icon名])就可以用了。

Step3.

做一個openPage()來控制要開啟的Login Page

void openPage(BuildContext context) { 
  Navigator.push(context, MaterialPageRoute(
    builder: (BuildContext context) {
      return Scaffold(
        appBar: AppBar(...),
        body: Center(...),
        ),
      );
    },
  ));
}

要切換App頁面,我們使用Navigator.push() method,切換的路徑route使用MaterialPageRoute(),更多資訊可參考Navigate to a new screen and back

小提醒:Hot Reload另外open的頁面,要先回前一頁再點擊一次觸發按鈕,讓App重新執行一次,才能看到更新結果。

Step4.

最後將App渲染出來就完成了~

class MyApp extends StatelessWidget {  //App渲染
  @override
  Widget build(BuildContext context){
    return MaterialApp(  //return material
      title: 'My App',
      home: MyHomePage()  //導入Step1的home page widget
    );
  }
}

圖片

我把完整Code放在GitHub上,有興趣的人可以參考一下~


上一篇
【前端的 Flutter 新手村】Day8-查字典也有技巧,教你如何看懂Flutter官方API
下一篇
【前端的 Flutter 新手村】Day10-為你的App建立Menu選單-Drawer & Routes
系列文
前端工程師的 Flutter 新手村挑戰30

尚未有邦友留言

立即登入留言