APP 跟網頁一樣會有首頁以及其他頁面，因此今天想來介紹一下如何設定路由（跳轉頁面）。

在 Flutter 中有 Navigator 可以用來做頁面的管理，如果你有其他語言的基礎，可以把跳轉頁面想成是一種堆疊或陣列排序的感覺，使用 Navigator push和 pop 的方法來實現上一頁 / 下一頁。

假設現在進入 APP 的首頁菜單可以看到菜單有 pasta 的選項，這時候頁面紀錄只有 [home] ，接著當我們點擊了 pasta 進入內容頁面，此時頁面紀錄就會 push 新的點擊頁變成 [home, pasta]，而接著如果我們回到上一頁，就會 pop 回到首頁，頁面紀錄就會變成 [home]。

用上面例子來做個簡單的跳轉頁面範例吧～

首先首頁我們做一個 button 點擊後可以進入到內容頁，程式碼如下：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('menu'),
          backgroundColor: Colors.blueGrey[700],
        ),
        body: HomePage(),
      ),
    );
  }
}
// 首頁（菜單頁）
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: OutlinedButton(
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.black,
            primary: Colors.orangeAccent[400],
            elevation: 20,
            shadowColor: Colors.orangeAccent[200],
          ),
          onPressed: () {
						// 重點在這，透過 push 方法進入 pasta 頁面
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => PastaPage()));
          },
          child: Text('pasta')),
    );
  }
}

接著新增 PastaPage，而進入 pasta 內容頁後，另外我們又想讓他點擊 back icon ( < ) 回到首頁

// pasta 內容頁
class PastaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('pasta'),
        backgroundColor: Colors.blueGrey[700],
      ),
      body: _PastaPage(),
    );
  }
}

class _PastaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'images/pasta.jpg',
              fit: BoxFit.cover,
              width: 250,
              height: 250,
            ),
            IconButton(
              onPressed: () {
                // 重點在這，透過 pop 方法回到上一頁
                Navigator.pop(context,
                    MaterialPageRoute(builder: (context) => HomePage()));
              },
              icon: Icon(
                Icons.chevron_left_outlined,
                color: Colors.orangeAccent[400],
              ),
            )
          ],
        ),
      ),
    );
  }
}

來看看是不是我們想要的結果吧～

大功告成！

OK！我們明天見～