概要
前回 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.
参考
![](https://runble1.com/wp-content/uploads/cocoon-resources/blog-card-cache/2f9dbbba2b21f5e21e0cc7397eb006c2.jpeg)
go_router 公式ドキュメント日本語版の目次
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Uml2ZXJwb2QlRTMlODElQThGbHV0dGVyJTIwSG9va3MlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlRTMlODAlODElRTMlODElQUYlRTMlODElOTglRTMlODIlODElRTMlODElQUUlRTQlQjglODAlRTYlQUQlQTkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM4NTVlYzRjNTgwNGU1ODkyYmM3YzZjZjA1NDMxOGY0&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2FyYW1hZ2UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyNTg0MWM3YzM2YzBmNDUzYjJhYjJiMjdmNGZmZTkw&blend-x=142&blend-y=491&blend-mode=normal&s=d3557d08f02fec7374c9a3d92ad76193)
RiverpodとFlutter Hooksを使う、はじめの一歩 - Qiita
はじめにこの記事では、RiverpodとFlutter Hooksを使う、はじめの一歩として、カウンターアプリを作ってみようと思います。今回作成したコードはこちらのリポジトリに公開しています。…
![](https://runble1.com/wp-content/uploads/cocoon-resources/blog-card-cache/e6adfaa0525baf114c4d7eb0f0f81615.png)
見つかりませんでした
![](https://runble1.com/wp-content/uploads/cocoon-resources/blog-card-cache/e4183b1a302bc584578b9f15e5c2b6f2.png)
Flutter はじめの一歩
はじめに自動的に作られるカウンターアプリを丁寧に解説
コメント