路由導覽v1

Flutter 的路由是透過 Navigator 以棧的方式管理畫面上的呈現。

Navigator 1.0

• Navigator：它是一個用來管理路由的組件，提供一個 Overlay 處理棧的內容。
• Route：這是一個抽象類別，用來定義路由的設定，例如 MaterialPageRoute。

使用方式

• push

將畫面新加到 Navigator 的 stack 上

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return SomeScreen();
  }),
);

• pushNamed

使用命名路由的方式創建路由設定，就可以使用名稱的方式進行切換。

Navigator.pushNamed(context, '/time'),

• pop

將 stack 最後的路由設定從 Navigator 上移除

Navigator.pop(context);

命名路由

使用命名路由的方式在程式架構的維護上會比較清楚

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/time': (context) => TimeScreen(),
        '/text': (context) => TextScreen(),
        '/image': (context) => ImageScreen(),
        '/icon': (context) => IconScreen(),
        '/button': (context) => ButtonScreen(),
        '/form': (context) => FormScreen(),
        '/layout': (context) => LayoutScreen(),
        '/container': (context) => ContainerScreen(),
        '/listview': (context) => ListViewScreen(),
        '/gridview': (context) => GridViewScreen(),
        '/datetimepicker': (context) => DateTimePickerScreen(),
        '/sliver': (context) => SliverScreen(),
      },
    );
  }
}

傳遞參數

push

 Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return SomeScreen(title: "Navigator");
  }),
);

pushNamed

pushNamed 的第三個參數可以接收 Object 型別的 arguments

  static Future<T?> pushNamed<T extends Object?>(
    BuildContext context,
    String routeName, {
    Object? arguments,
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }

使用方式

Navigator.pushNamed(context, '/time', DateTime.now())

@override
Widget build(BuildContext context) {
  var args = ModalRoute.of(context)!.settings.arguments;
  ...
}

pop

使用第二參數回傳結果

  @optionalTypeArgs
  static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
    Navigator.of(context).pop<T>(result);
  }

回傳結果

Navigator.pop(context, false);

使用 await 接收 pop 回來的參數資料

var result = await Navigator.pushNamed(context, '/next')

小結

Navigator 1.0 的使用上很直覺，如果你想要切換路由時使用 push 和 pop 即可，如果使用命名式的路由在維護的管理上會更加統一，也可以使用onGenerateRoute的 hook 進行建構路由設定前的權限檢查。