【Flutter】今年触れた技術について〜go_router〜

今回はFlutterで画面遷移する際に使用できるgo_routerを紹介します

環境

Mac OS:Sonoma14.1.2
Android:33
Android Studio:Android Studio Giraffe | 2022.3.1 Patch 4

go_router

公式はこちら↓

Flutterで用意されている純粋な画面遷移方法は少し複雑なところがあります。
それを本ライブラリを使用することで、簡単に実現することができます。
また、pub.defでも現在(2023/12/12) Likeが3726ととても人気なライブラリであることがわかります。

以下に一例として画面遷移のコードを紹介します。

/// The route configuration.
final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

// ボタンを押された際に詳細(details)画面に遷移する例
child: ElevatedButton(
    onPressed: () => context.go('/details'),
    child: const Text('Go to the Details screen'),
),

とても簡単ですね！
これに類似したauto_routerというのもあります。こちらに関してはまた触ってみた時に紹介したいと思います！

では、また明日〜〜