[Flutter] go_router + 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(),
      ),
    ],
  )
);

まとめ

router.dart まで分けてしまうのは若干細かすぎる気もするが、責務は分けられた。

コードは Github にアップしてある。

GitHub - runble1/flutter_go_router_riverpod_sample
Contribute to runble1/flutter_go_router_riverpod_sample development by creating an account on GitHub.

参考

go_router 公式ドキュメント日本語版の目次
RiverpodとFlutter Hooksを使う、はじめの一歩 - Qiita
はじめに この記事では、RiverpodとFlutter Hooksを使う、はじめの一歩として、 カウンターアプリを作ってみようと思います。 今回作成したコードはこちらのリポジトリに公開しています。
Riverpodの使い方|Flutter x Riverpod でアプリ開発!実践入門
Flutter はじめの一歩
はじめに自動的に作られるカウンターアプリを丁寧に解説

コメント

タイトルとURLをコピーしました