Zenn
⚖️

Flutter ルーティング比較

2023/05/16に公開
Flutter
tech

MaterialApp With Home

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}
/* ... */

ページ遷移

// 次の画面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const NextPage(),
  ),
);
// 前の画面
Navigator.pop(context);

MaterialApp With routes

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
	'/next': (context) => const NextPage(),
      },
    );
  }
}
/* ... */

ページ遷移

// 次の画面
Navigator.pushNamed(context, '/next');
// 前の画面
Navigator.pop(context);

MaterialApp With onGenerateRoute

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(
              builder: (context) => const HomePage(),
            );
	  case '/next':
            return MaterialPageRoute(
              builder: (context) => const NextPage(),
            );
          default:
            return MaterialPageRoute(
              builder: (context) => const NotFoundPage(),
            );
        }
      },
    );
  }
}
/* ... */

ページ遷移

// 次の画面
Navigator.pushNamed(context, '/next');
// 前の画面
Navigator.pop(context);

MaterialApp With Navigator(onGenerateRoute)

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      home: Navigator(
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/':
              return MaterialPageRoute(
                builder: (context) => const HomePage(),
              );
	    case '/next':
              return MaterialPageRoute(
                builder: (context) => const NextPage(),
              );
            default:
              return MaterialPageRoute(
                builder: (context) => const NotFoundPage(),
              );
          }
        },
      ),
    );
  }
}
/* ... */

ページ遷移

// 次の画面
Navigator.pushNamed(context, '/next');
// 前の画面
Navigator.pop(context);

MaterialApp With Navigator(pages)

GetX

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => HomePage(),
        ),
	GetPage(
          name: '/next',
          page: () => NextPage(),
        ),
      ],
    );
  }
}
/* ... */

ページ遷移

// 次の画面
Get.toNamed('/next');
// 前の画面
Get.back();

GoRouter

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: GoRouter(
        initialLocation: '/',
	routes: [
	  GoRoute(
	    path: '/',
	    builder: (context, state) => const HomePage(),
	    routes: [
	      GoRoute(
	        path: 'next',
		builder: (context, state) => const NextPage(),
	      ),
	    ],
	  ),
	],
      ),
    );
  }
}
/* ... */

ページ遷移

// 次の画面
context.go('/next');
// 前の画面
context.pop();

RouteMaster

ルート定義

/* ... */
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(
        routesBuilder: (context) => RouteMap(routes: {
          '/': (routeData) => const MaterialPage(child: HomePage()),
          '/next': (routeData) => const MaterialPage(child: NextPage()),
        }),
      ),
      routeInformationParser: const RoutemasterParser(),
    );
  }
}
/* ... */

ページ遷移

// 次の画面
Routemaster.of(context).push('/next');
// 前の画面
Routemaster.of(context).pop();

Discussion