引路帶你進入Flutter世界

恭喜呀恭喜

到這裡你已經能使用Dart語言
嘗試去完成bmi計算機這類型練習

Route

利用Navigate route方式去導覽Flutter練習.
有經驗的玩家,就會想到各種路由管理相關套件,但目前練習都比較輕量,
還不急著引入,就像殺雞焉用牛刀 , 我們先著重基礎.

注意

此處開始已不是單獨一個dart檔案
而是整個Flutter專案,其中datr檔案會是功能或畫面的分類

實作範例

Main.dart

設置Route 和 初始Route
初始化路由 等同於這個APP一執行要顯示的畫面

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const IMAGEPICKER = '/imagePicker';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',  
      routes: {
        '/': (context) => const MainView(),  //initialRoute設定的斜線 就是在這去比對
        IMAGEPICKER: (context) => ImagePickerPage(), //此為/imagePicker導到選取照片的練習
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

MainView.dart

Route切換 pushNamed(明確目的地)

GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 5,
            crossAxisSpacing: 5,
          ),
          itemCount: 100,
          itemBuilder: ((context, index) {
            late String _title;
            //switch case 用在往後每個小練習 都有各自名稱
            switch (index) { 
              case 0: //index是0的時候,方格的文字變成Route名稱 ImagePicker
                _title = MyApp.IMAGEPICKER.replaceFirst('/', '');
                break;
              default:
                _title = index.toString();
            }
            return GestureDetector(
              onTap: () {
              //在點下方格時,也要辨識點哪個index方格,檢查為0就Route導向 ImagePicker
                if (index == 0) { 
                  Navigator.pushNamed(context, MyApp.IMAGEPICKER);
                }
              },
              child: Card(
                color: Colors.blue[100],
                child: Center(
                //顯示_title 在剛剛switch case設定好的標題文字
                  child: index == 0 ? Text(_title) : Text('$index'),
                ),
              ),
            );
          }),
        ),

ImagePicker Route導向的目的地

在ImagePicker中,我設置一個BackButton,用於返回MainView畫面

Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  BackButton(
                    color: Colors.red,
                    onPressed: () => Navigator.pop(context), //此處返回功能
                  ),
                  const Text('ImagePicker FakeTitle'),
                ],
              ),

左上角紅色返回按鈕 也就是上方程式碼註解處
在Navigator 進入 imagePicker畫面同時,也預設產生左上角白色返回按鈕
主要就是使用者對於畫面想怎麼安排都能做到