画面遷移をする際には、以下のように記述することが多いかと思います。
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SamplePage(),
),
);
},
今回は、こちらを少し簡略化するのに自分が行っている方法を2つ紹介したいと思います!
【extensionを使用する】
遷移元 extensionの追加
//追加
+ extension BuildContextE on BuildContext {
+ Future<void> to(Widget view) async {
+ await Navigator.of(this).push(
+ MaterialPageRoute(
+ builder: (context) {
+ return view;
+ },
+ ),
+ );
+ }
+ }
//変更前
onPressed: () {
- Navigator.of(context).push(
- MaterialPageRoute(
- builder: (context) => const SamplePage(),
- ),
);
},
//変更後
onPressed: () {
+ context.to(
+ const SamplePage(),
);
},
【遷移先のページにstaticメソッドを記述する方法】
遷移先
class SamplePage extends StatelessWidget {
const SamplePage({super.key});
//追加
+ static Route<void> route() {
+ return MaterialPageRoute(
+ builder: (context) => const SamplePage(),
+ );
+ }
遷移元
//変更前
onPressed: () {
Navigator.of(context).push(
- MaterialPageRoute(
- builder: (context) => const SamplePage(),
- ),
);
},
//変更後
onPressed: () {
Navigator.of(context).push(
+ SamplePage.route(),
);
},
チーム開発などでは、プロジェクトごとのルールがあると思うので、個人開発などで試してみていただけるといいのかなと思っていたりします。