我們今天要來在 Flutter 裡中用有點像是迭代的方式產生多個資料並呈現在畫面中，因為現在只有一個品項看起來有點可憐...。

在品項數目少的時候，還可以一個一個 widget 寫死，但萬一今天是購物車有上百上千個品項的話，可能會寫到哭出來，因此我們就可以利用 Dart 與 Flutter 提供的方法來顯示元件。

前置資料

（之後會分享如何串接來自後端或公開 API 的資料）

假設菜單目前的品項有 ['Pasta', 'Dessert', 'Seafood', 'Beef'] ，先進行宣告一個 List

List <String> categories = ['Pasta', 'Dessert', 'Seafood', 'Beef'];

而 Flutter 提供了一個 ListView 的 Widget，可以很方便的呈現列表，而剛剛提到如果有超多種品項的話就會建議使用 ListView.builder ，這個方法的差異是畫面可以邊 scroll 邊建立出列表，loading 會比較少。

上方的 categories List 我們可以利用 Dart library 提供的 List generate 來產生列表

方法範例

下方的範例會產生 1 - 10 的數字

List<int>.generate(10, (index) => index + 1)

// 10 產生的長度
// index 指的是索引（從 0 開始)

實際應用到我們的 categories List 如下

return Center(
	child: ListView(
	  padding: const EdgeInsets.all(8),
	  children: List.generate(categories.length, (index) {
	    var itemName = categories[index];
	    return Center(
	      child: Card(
	        child: SizedBox(
	          width: 300,
	          height: 100,
	          child: TextButton(
	            onPressed: (() => Navigator.pushNamed(context, "/$itemName")),
	            child: Center(child: Text(itemName)),
	          ),
	        ),
	      ),
	    );
	  }),
	),
);

因為我們不只需要顯示出列表，每個列表還要能點擊到對應的路由，所以這邊我選用 TextButton 讓使用者點擊每個項目後可以點擊到相對應的路由，不過做到這應該會發現只有 pasta 可以順利跳轉至內容頁，這是因為我們原本只做了 pasta 的路由，所以如果點擊了其他項目可能會導致程式 crashed，莫急莫慌！

解決辦法

Flutter 提供了一個 onUnknownRoute 遇到不知名路由的統一跳轉或顯示，在我們原本的 routes 下方新增

// MyApp

routes: <String, WidgetBuilder>{
        "/pasta": (BuildContext context) => PastaPage(),
      },
// 簡單製作 404 告知 user 頁面失效
onUnknownRoute: (RouteSettings settings) {
  return MaterialPageRoute<void>(
    settings: settings,
    builder: (BuildContext context) =>
        const Scaffold(body: Center(child: Text('404 Not Found'))),
  );
},

完成後，來看一下畫面吧（雖然陽春到炸，但後面可以再慢慢優化）

順利產生出菜單列表了！

點擊 pasta 一樣可以順利進入到頁面，而點擊其他品項則會跳到陽春的 404 頁面~

OK！我們明天見～