Zenn
🪂

【Flutter/Dart】Navigationについて（画面遷移）

2022/05/09に公開
Flutter
Dart
#
study
tech

導入

画面遷移について全然まとめていなかったのでまとめてみた。

画面遷移の種類について

主に二種類です。

Navigator.pushとNavigator.pushNamedがある。

  • Navigator.push
    これは直でrouteWidgetを指定して画面遷移を行います。
  • Navigator.pushNamed
    CupertinoAppまたはMaterialApp内に用意されたonGenerateRouteまたは、routesで指定したルート名で画面遷移を行います。
Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          return MainPage(); // 遷移先の画面widgetを指定
        },
      ),
    );
  • main.dartなどでルートを設定
main.dart
MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: <String, WidgetBuilder>{
          '/home': (BuildContext context) => HomePage(),
          '/place': (BuildContext context) => PlacePage(),
          '/settings': (BuildContext context) => SettingsPage(),
        },
        initialRoute: '/',
      )
・・・
// または、
MaterialApp(
        debugShowCheckedModeBanner: false,
        onGenerateRoute: (settings) {
        　　if (settings.name == '/') {
	  　　return homeRoute(settings.arguments as HomeModel);
	　　}

	　　throw Exception('Route not found');
      　　　　},
        initialRoute: '/',
      )
・・・
  • home.dartなどでのトップでルートで使う、MaterialPageRouteのファンクションを指定。
home.dart
class HomePage extends StatefulWidget {
  static route(HomeModel model) {
    return MaterialPageRoute(
      builder: (_) => HomePage(model: model),
    );
  }
・・・

- main.dartで指定したルート名を使って、画面遷移を行う。

Navigator.pushNamed(context, '/', homeModel as HomeModel);

push以外について

push以外には、popがある。popとは一つ前の画面に戻ることができる。

B.dart
・・・
Navigator.pop(context, arguments);
・・・
A.dart
Navigator.pushNamed(context, '/b', bModel as bModel).then(
 (arguments) {
  // argumentsが前の画面からの値を持っている。
  print(arguments.name);
 }
);

やってみて

画面数がそんなに多くないアプリケーションではNavigator.pushで十分だが、画面数の多いものに関してはNavigator.pushNamedの方が一元管理できていいな思った。
Navigator.pushNamedのルートが増えた場合もDartファイルを分けるなどしてやればいいと思うので基本はpushNamedでアプリを設計した方が良さそうだ。

Discussion