今天要來為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上，有興趣的人可以參考一下～