🪂
【Flutter/Dart】Navigationについて(画面遷移)
導入
画面遷移について全然まとめていなかったのでまとめてみた。
画面遷移の種類について
主に二種類です。
Navigator.push
とNavigator.pushNamed
がある。
- Navigator.push
これは直でrouteWidgetを指定して画面遷移を行います。 - Navigator.pushNamed
CupertinoAppまたはMaterialApp内に用意されたonGenerateRoute
または、routes
で指定したルート名で画面遷移を行います。
Navigator.push
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return MainPage(); // 遷移先の画面widgetを指定
},
),
);
Navigator.pushNamed
- 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