Flutterにおける、ルーティングを定義する方法を備忘録として残しておこうと思います。
また、Flutterにてルーティングを定義・管理するのは、比較的に明示的でわかりやすいと思っております。
MaterialApp
の引数であるroutes
にルーティングを定義する
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => MyApp(),
},
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
...
)
)
}
}
上記コードでは、'/'
にコード下側に記述しているWidgetのMyAppクラス
を指定しております。
ちなみに、MaterialApp
の引数であるinitialRoute
で指定した値は、
アプリを開いた際に初期表示する画面を設定できます。
新たにページを作成し、ルーティングを定義する場合
下記では、pages/about_page.dart
ファイルを新規作成して、
ルーティングには、'/about'
を指定してAboutPageクラス
を登録しております。
pages/about_page.dart
import 'package:flutter/material.dart';
class AboutPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
...
)
)
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:sample/pages/about_page.dart';
void main() {
runApp(
MaterialApp(
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => MyApp(),
'/about': (BuildContext context) => AboutPage(),
},
),
);
}
...
新規でページを作成してルーティングを定義したい場合は、
main.dart
ファイルにて、新規作成したファイルをインポートし、
ルーティングを定義している箇所に、同じように追記していくだけになります。