[Flutter] go_router + hooks_riverpod で公式サンプル動かすチュートリアル

概要
1. hooks_riverpod
チュートリアル
まとめ
参考

概要

前回 go_router の公式サンプルを動かすチュートリアルを行った。

今回は Flutter + go_router + hooks_riverpod で、公式サンプルを機能ごとにファイル分割する。

以下の環境で行う。

Flutter 2.8.1
go_router 3.0.1
riverpod 1.0.3
hooks_riverpod : 0.18.3

hooks_riverpod

Riverpod は Flutter の状態管理ライブラリの一つ。

グローバルで Provider を宣言できるため、全ての Widget から変数を取得することができるのが利点。

下記の動画で Riverpod の概要を知ることができる。途中までしか見れないけど。

チュートリアル

事前準備

go_router 公式サンプルを動かせること。

hooks_riverpod インストール

hooks_riverpod を追加する。

flutter pub add hooks_riverpod

ルーティング機能分割

前回から router.dart が増えて 5 つに分割する。

main.dart
app.dart
router.dart ( new! )
page1.dart
page2.dart

page1.dart と page2.dart は変更していないので省略。

main.dart

Riverpod の Provider をアプリ内で利用可能にするためにスコープを指定する。

アプリのルート child: App() を ProviderScope で囲む。

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'app.dart';

void main() {
  runApp(
    ProviderScope(
      child: App(),
    ),
  );
}

app.dart

app.dart はアプリの基幹部分。 build メソッドだけにしたかった。

router の実態は後述する router.dart に分離することにした。

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'router.dart';

class App extends ConsumerWidget {
  const App({Key? key}) : super(key: key);

  static const title = 'GoRouter Example: Declarative Routes';

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final router = ref.watch(routerProvider);
    
    return MaterialApp.router(
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      title: title,
    );
  }
}

router.dart

ルーティングの詳細はこのファイルで行う。

import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'page1.dart';
import 'page2.dart';

final routerProvider = Provider(
  (ref) => GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const Page1Screen(),
      ),
      GoRoute(
        path: '/page2',
        builder: (context, state) => const Page2Screen(),
      ),
    ],
  )
);