pubspec.yml
を見るFlutter Handson Osaka 8 ではバージョン 1.26.0-17.6.pre
を利用したが、バージョン 2.0.1
でも動作に問題が無いことを確認した。
その上で今回は以下パッケージを利用した。
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.15.0
hooks_riverpod: ^0.12.4
state_notifier: ^0.6.0
プレイヤー入力画面と配役決め画面の製作を通して Riverpod への理解を深める。
以下に示すはプレイヤー入力画面です。
ProviderScope
を使えば Provider にアクセス可能な階層をコントロールできる。React hooks と違いクラス HookWidget
を継承することで、該当クラス内で Flutter hooks が使えるようになる。
ProviderScope(
child: MyApp(),
),
class MyApp extends HookWidget {
//
}
役割をシャッフルして決める shufflePositions()
を予め定義する。
final gameProvider = StateNotifierProvider((_) => Game());
class Game extends StateNotifier {
List _positions = ['村人', '村人', '人狼', '人狼', '占い師', 'てるてる'];
List get positions => _positions;
void shufflePositions() {
_positions.shuffle();
}
}
useProvider
が使えるここでも同様にクラス HookWidget
を継承して Provider インスタンスを作成することで、該当クラス内で Flutter hooks が使えるようになる。
class GameApp extends HookWidget {
@override
Widget build(BuildContext context) {
final provider = useProvider(gameProvider);
}
}
先に定義した shufflePositions()
を呼び出すことで役割をシャッフルして決められる。
class StartApp extends HookWidget {
void start(BuildContext context, Game provider) {
provider.shufflePositions();
}
}
React hooks と同様の使い勝手 (クラスを継承して書くのではなく関数レベルで書けるようになるなど) が良くなれば。
作成済リポジトリは公開中です。
ロジック強化版と称し凝った「人狼」アプリは下記リポジトリです。
過去に私自身が勤怠管理アプリを製作するに当たって、昨年のアドベントカレンダーで書かせていただいた。
Riverpod が主流になると同時に ChangeNotifer を使う機会が減ることを感じながら、こちらも良ければ確認してみてください。