Open1

go router builder

JboyHashimotoJboyHashimoto

環境構築をする

まずはページを作る

🍎最初のページ

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