Open1
go router builder

環境構築をする
まずはページを作る
🍎最初のページ
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../const/router/router.dart';
class HomePage extends HookConsumerWidget {
const HomePage({super.key});
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
title: const Text('Go Router Builder'),
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
const NextRoute().push<NextRoute>(context);
},
child: const Text('Nest')),
],
),
),
);
}
}
🍏次のページ
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../const/router/router.dart';
class NextPage extends HookConsumerWidget {
const NextPage({super.key});
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Next Page'),
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
const HomeRoute().go(context);
},
child: const Text('back'),
),
],
),
),
);
}
}
⚙️設定ファイルを書く
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import '../../view/home_page.dart';
import '../../view/next_page.dart';
part 'router.g.dart';
// fvm使ってる人はこっち
// fvm flutter pub run build_runner build --delete-conflicting-outputs
GoRouter router(RouterRef ref) {
return GoRouter(
debugLogDiagnostics: true,
routes: $appRoutes,// 自動生成されたファイルからパスを読み込む
// 404ページを指定
errorPageBuilder: (context, state) {
return const MaterialPage(
child: Scaffold(
body: Center(
child: Text('Page not found'),
),
));
});
}
/// [この位置にルートを定義する]
/* buildメソッドの設定が変わっていた:
https://pub.dev/documentation/go_router_builder/latest/
*/
<HomeRoute>(
path: '/',
routes: <TypedGoRoute<GoRouteData>>[
TypedGoRoute(
path: 'next',
name: 'next',
),
]
)
class HomeRoute extends GoRouteData {
const HomeRoute();
Widget build(BuildContext context, GoRouterState state) {
return const HomePage();
}
}
<NextRoute>(
path: 'next',
)
class NextRoute extends GoRouteData {
const NextRoute();
Widget build(BuildContext context, GoRouterState state) {
return const NextPage();
}
}
🔫自動生成のコマンドを打つ
flutter pub run build_runner build --delete-conflicting-outputs
UIに表示するファイル
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'const/router/router.dart';
class MyApp extends HookConsumerWidget {
const MyApp({super.key});
Widget build(BuildContext context, WidgetRef ref) {
return MaterialApp.router(
debugShowCheckedModeBanner: false,
routerConfig: ref.watch(routerProvider),
title: 'Flutter Demo',
theme: ThemeData(
// colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
// useMaterial3: true,
),
);
}
}
main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'firebase_options_dev.dart';
import 'myapp/myapp.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// await Firebase.initializeApp(
// options: DefaultFirebaseOptions.currentPlatform,
// );
runApp(const ProviderScope(child: MyApp()));
}