LoginSignup
1

More than 1 year has passed since last update.

画面遷移の際の長い記述をシンプルにする方法 2つ

Last updated at Posted at 2022-12-17

画面遷移をする際には、以下のように記述することが多いかと思います。

      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(),
        );
      },

チーム開発などでは、プロジェクトごとのルールがあると思うので、個人開発などで試してみていただけるといいのかなと思っていたりします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1