riverpodのhooksってなにか?
ReackHooksを真似て作ったらしい?
開発環境
- flutter2.8.0
- hooks_riverpod: ^1.0.3
hooks_riverpod と flutter_riverpod の書き方の違い
どちらのRiverpodパッケージをインストールするかによって、Widgetからの利用時に書き方の違いがあります。
グローバル変数としてのProvider定義の書き方は共通です。
flutter_riverpodと同じだよ!
final appNameProvider = Provider((ref) => 'Special App!');
hooks_riverpodの書き方の例
pub.devのリンク
https://pub.dev/packages/hooks_riverpod
main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
void main() {
runApp(
/// [MyApp] is wrapped in a [ProviderScope].
/// This widget is where the state of most of our providers will be stored.
/// This replaces `MultiProvider` if you've used `provider` before.
const ProviderScope(
child: MyApp(),
),
);
}
/// A provider that creates and listen to a [StateNotifier].
///
/// Providers are declared as global variables.
/// This does not hinder testability, as the state of a provider is instead
/// stored inside a [ProviderScope].
final counterProvider = StateNotifierProvider<Counter, int>((_) => Counter());
/// A simple [StateNotifier] that implements a counter.
///
/// It doesn't have to be a [StateNotifier], and could be anything else such as:
/// - [ChangeNotifier], with [ChangeNotifierProvider]
/// - [Stream], with [StreamProvider]
/// ...
class Counter extends StateNotifier<int> {
Counter() : super(0);
void increment() => state++;
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
// StatelessWidgetが、HookConsumerWidgetに変更されている。
class MyHomePage extends HookConsumerWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Scaffold(
appBar: AppBar(
title: const Text('Riverpod counter example'),
),
body: Center(
child: Text(
'$count',
style: Theme.of(context).textTheme.headline4,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).increment(),
child: const Icon(Icons.add),
),
);
}
}
flutter_riverpodの書き方の例
pub.devのリンク
https://pub.dev/packages/flutter_riverpod
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// A Counter example implemented with riverpod
void main() {
runApp(
// Adding ProviderScope enables Riverpod for the entire project
const ProviderScope(child: MyApp()),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
/// Providers are declared globally and specifies how to create a state
final counterProvider = StateProvider((ref) => 0);
// StatelessWidgetが、ConsumerWidgetに変更されている。
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: const Text('Counter example')),
body: Center(
// Consumer is a widget that allows you reading providers.
// You could also use the hook "ref.watch(" if you uses flutter_hooks
child: Consumer(builder: (context, ref, _) {
final count = ref.watch(counterProvider.state).state;
return Text('$count');
}),
),
floatingActionButton: FloatingActionButton(
// The read method is an utility to read a provider without listening to it
onPressed: () => ref.read(counterProvider.state).state++,
child: const Icon(Icons.add),
),
);
}
}
今回作ってみた学習サンプル
ディレクトリ構造
lib
├── components
│ └── importer.dart
├── main.dart
├── models
│ └── counter_view_model.dart
└── views
└── home_page.dart
今回は、exportという面白いDartの機能を使ってみた。import文を使って各ページで、同じpackageを毎回読み込むのが面倒臭い!!!
で、１つのファイルにexport文を使ってまとめる方法を思い出したので使ってみた。
components/import.dart
export 'package:flutter/material.dart';
export 'package:hooks_riverpod/hooks_riverpod.dart';
export 'package:hook_sample_app/models/counter_view_model.dart';
export 'package:hook_sample_app/views/home_page.dart';
models/counter_view_model.dart
import 'package:hook_sample_app/components/importer.dart';
//①Riverpodのみ設定
final countViewModel = ChangeNotifierProvider((_) => CountViewModel());
//CountViewModelの中身は一緒
class CountViewModel extends ChangeNotifier {
final String title = 'hooks_riverpod';
int _counter = 0;
get counter => _counter;
void incrementCounter() {
_counter++;
notifyListeners();
}
}
views/home_page.dart
import 'package:hook_sample_app/components/importer.dart';
// StatelessWidgetをHookConsumerWidgetに変更
class MyHomePage extends HookConsumerWidget {
MyHomePage({Key? key}) : super(key: key);
@override
// 第2引数にWidgetRef refを追加
Widget build(BuildContext context, WidgetRef ref) {
//④countViewModelを参照することを定義、viewModelでViewModelを参照する
final viewModel = ref.watch(countViewModel);
return Scaffold(
appBar: AppBar(
title: Text('${viewModel.title}'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'${viewModel.counter}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: viewModel.incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
main.dart
import 'components/importer.dart';
void main() {
runApp(
// MyAppをProviderScopeで囲む
const ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hooks riverpod!',
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: MyHomePage(),
);
}
}
ご覧いただくと各ページで、import文が今のところ１つしかない!
今まで作ってきたアプリより見た目がスッキリして、補修もしやすくなった気がした...
もっと速く使うべきだった!!!
おまけ
カウンターばっかりだと面白くないから、ボタンを押したら文字が変わる機能を追加してみた!
models/counter_view_model.dart
import 'package:hook_sample_app/components/importer.dart';
// 定数の中にクラスを格納する
final countViewModel = ChangeNotifierProvider((_) => CountViewModel());
//CountViewModelの中身は一緒
class CountViewModel extends ChangeNotifier {
final String title = 'hooks_riverpod!';
int _counter = 0;
get counter => _counter;
String _privateText1 = 'これは多分ゲッターだよ???';
get privateText => _privateText1;
String _privateText2 = 'これはプライベートなプロパティだよ!';
get privateText2 => _privateText2;
String _greeting = 'あいさつ?';
get greeting => _greeting;
void incrementCounter() {
_counter++;
notifyListeners();
}
void sayMethod() {
// ボタンを押すと変数に文字を代入する
_greeting = 'Hello Riverpos!!!';
notifyListeners();
}
}
views/home_page.dart
import 'package:hook_sample_app/components/importer.dart';
// StatelessWidgetをHookConsumerWidgetに変更
class MyHomePage extends HookConsumerWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
// 第2引数にWidgetRef refを追加
Widget build(BuildContext context, WidgetRef ref) {
//④countViewModelを参照することを定義、viewModelでViewModelを参照する
final viewModel = ref.watch(countViewModel);
return Scaffold(
appBar: AppBar(
title: Text('${viewModel.title}'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('${viewModel.privateText}'),
const SizedBox(height: 10),
Text('${viewModel.privateText2}'),
const SizedBox(height: 10),
Text('${viewModel.greeting}'),
const SizedBox(height: 10),
Text(
'${viewModel.counter}',
style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.blueGrey),
),
ElevatedButton(
onPressed: viewModel.sayMethod,
child: const Text('あいさつをする')),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: viewModel.incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
