Flutter HooksとRiverpodの解説

Transcript

1. Flutter HooksとRiverpodの解説 Press Space for next page
2. 自己紹介 📝 飯野陽平（wheatandcat) 🏢 会社: 合同会社UNICORN 代表社員 📚 Blog: https://www.wheatandcat.me/ 🛠 今までに作ったもの memoir OOMAKA MarkyLinky
3. Flutterとは Google開発のオープンソースのマルチプラットフォームの開発フレームワーク 一つのコードベースから、iOS、Android、Web、Windows、Mac、Linuxアプリなど複数のプラットフォ ームの作成が可能 言語はDartを使用 Google独自のUI Widgetを使用（Material Designベース）
4. Flutter Hooksとは React HooksのFlutter版 flutter_hooks コンポーネントの状態を管理するためのライブラリ Flutter標準のStateful Widgetのコードを簡潔に書くことができる
5. StatefulWidgetの例 ①. StatefulWidget継承したクラスを宣言 ②. Stateクラスを宣言 ③. Stateの初期化 ④. Stateの更新 ⑤. Stateの参照 class Count extends StatefulWidget { @override State<Count> createState() => _CountState(); } class _CountState extends State<Count> { int _counter = 0; @override Widget build(BuildContext context) { return TextButton( onPressed: () => { setState(() { _counter++; }), }, child: Text('Increment: $_counter'), ); } }
6. StatefulWidgetの例 ①. StatefulWidget継承したクラスを宣言 ②. Stateクラスを宣言 ③. Stateの初期化 ④. Stateの更新 ⑤. Stateの参照 class Count extends StatefulWidget { @override State<Count> createState() => _CountState(); } class _CountState extends State<Count> { int _counter = 0; @override Widget build(BuildContext context) { return TextButton( onPressed: () => { setState(() { _counter++; }), }, child: Text('Increment: $_counter'), ); } }
7. StatefulWidgetの例 ①. StatefulWidget継承したクラスを宣言 ②. Stateクラスを宣言 ③. Stateの初期化 ④. Stateの更新 ⑤. Stateの参照 class _CountState extends State<Count> { int _counter = 0; @override Widget build(BuildContext context) { return TextButton( onPressed: () => { setState(() { _counter++; }), }, child: Text('Increment: $_counter'), ); } } class Count extends StatefulWidget { @override State<Count> createState() => _CountState(); }
8. StatefulWidgetの例 ①. StatefulWidget継承したクラスを宣言 ②. Stateクラスを宣言 ③. Stateの初期化 ④. Stateの更新 ⑤. Stateの参照 int _counter = 0; class Count extends StatefulWidget { @override State<Count> createState() => _CountState(); } class _CountState extends State<Count> { @override Widget build(BuildContext context) { return TextButton( onPressed: () => { setState(() { _counter++; }), }, child: Text('Increment: $_counter'), ); } }
9. StatefulWidgetの例 ①. StatefulWidget継承したクラスを宣言 ②. Stateクラスを宣言 ③. Stateの初期化 ④. Stateの更新 ⑤. Stateの参照 onPressed: () => { setState(() { _counter++; }), }, class Count extends StatefulWidget { @override State<Count> createState() => _CountState(); } class _CountState extends State<Count> { int _counter = 0; @override Widget build(BuildContext context) { return TextButton( child: Text('Increment: $_counter'), ); } }
10. StatefulWidgetの例 ①. StatefulWidget継承したクラスを宣言 ②. Stateクラスを宣言 ③. Stateの初期化 ④. Stateの更新 ⑤. Stateの参照 child: Text('Increment: $_counter'), class Count extends StatefulWidget { @override State<Count> createState() => _CountState(); } class _CountState extends State<Count> { int _counter = 0; @override Widget build(BuildContext context) { return TextButton( onPressed: () => { setState(() { _counter++; }), }, ); } }
11. Flutter Hooksの例 ①. HookWidgetを継承したクラスを宣言 ②. Stateの初期化 ③. Stateの更新 ④. Stateの参照 class Count extends HookWidget { @override Widget build(BuildContext context) { final count = useState(0); return TextButton( onPressed: () => count.value++, child: Text('Increment: ${count.value}'), ); } }
12. Flutter Hooksの例 ①. HookWidgetを継承したクラスを宣言 ②. Stateの初期化 ③. Stateの更新 ④. Stateの参照 final count = useState(0); class Count extends HookWidget { @override Widget build(BuildContext context) { return TextButton( onPressed: () => count.value++, child: Text('Increment: ${count.value}'), ); } }
13. Flutter Hooksの例 ①. HookWidgetを継承したクラスを宣言 ②. Stateの初期化 ③. Stateの更新 ④. Stateの参照 onPressed: () => count.value++, class Count extends HookWidget { @override Widget build(BuildContext context) { final count = useState(0); return TextButton( child: Text('Increment: ${count.value}'), ); } }
14. Flutter Hooksの例 ①. HookWidgetを継承したクラスを宣言 ②. Stateの初期化 ③. Stateの更新 ④. Stateの参照 child: Text('Increment: ${count.value}'), class Count extends HookWidget { @override Widget build(BuildContext context) { final count = useState(0); return TextButton( onPressed: () => count.value++, ); } }
15. useEffectの解説 Widgetのライフサイクルで処理をさせたい時にuseEffectを使ってみる 生成時、破棄時、更新時 概念的にはReactのuseEffectと同じ
16. useEffectの例 final id = useState<int>(0); useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]); useEffect(() { // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []); useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]);
17. useEffectの例 useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]); final id = useState<int>(0); useEffect(() { // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []); useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]);
18. useEffectの例 // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []); final id = useState<int>(0); useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]); useEffect(() { useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]);
19. useEffectの例 useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]); final id = useState<int>(0); useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]); useEffect(() { // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []);
20. Custom Hookの例 コード量が多くなってくると状態管理とViewのコードを分割したくなる その時にCustom Hookを使うと便利 コードの例は以下を参照 コードのURL 差分は以下の通り 差分のURL
21. Riverpodとは Riverpod グローバルな状態管理をしたい時に使うライブラリ ReactでいうところのContext APIのようなもの
22. Riverpodの例 ①. Providerを宣言 ②. Providerを取得 ③. Providerの値を参照 ④. Providerの値を更新 Demo用のURL ▪ lib/providers/counter.dart ▪ lib/main.dart final countProvider = StateProvider((ref) => 0); class HomePage extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final count = ref.watch(countProvider); return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('$count'), FloatingActionButton( onPressed: () => ref.read(countProvider.notif child: Icon(Icons.add), ), ], ), ); } }
23. Riverpodの例 ①. Providerを宣言 ②. Providerを取得 ③. Providerの値を参照 ④. Providerの値を更新 Demo用のURL ▪ lib/providers/counter.dart ▪ lib/main.dart final countProvider = StateProvider((ref) => 0); final count = ref.watch(countProvider); class HomePage extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('$count'), FloatingActionButton( onPressed: () => ref.read(countProvider.notif child: Icon(Icons.add), ), ], ), ); } }
24. Riverpodの例 ①. Providerを宣言 ②. Providerを取得 ③. Providerの値を参照 ④. Providerの値を更新 Demo用のURL ▪ lib/providers/counter.dart ▪ lib/main.dart final countProvider = StateProvider((ref) => 0); Text('$count'), class HomePage extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final count = ref.watch(countProvider); return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FloatingActionButton( onPressed: () => ref.read(countProvider.notif child: Icon(Icons.add), ), ], ), ); } }
25. Riverpodの例 ①. Providerを宣言 ②. Providerを取得 ③. Providerの値を参照 ④. Providerの値を更新 Demo用のURL ▪ lib/providers/counter.dart ▪ lib/main.dart final countProvider = StateProvider((ref) => 0); onPressed: () => ref.read(countProvider.notif class HomePage extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final count = ref.watch(countProvider); return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('$count'), FloatingActionButton( child: Icon(Icons.add), ), ], ), ); } }
26. まとめ Flutterの状態管理でFlutter HooksとRiverpodを触ってみたが、思っていた以上にReactと同じ方式だったので、Reactの知 識があればすぐに使える Flutterがクラスベースで作成されている言語なのに、Hooksが関数ベースで作成されているのが、若干ちぐはぐな感じはして いる ただ、riverpod_generatorのようなRiverpodの宣言自体を自動生成できる部分はReactよりも進んでいるかも Providerの宣言の種類が多すぎるのでコード生成すると楽 各Providerの役割と使い分け｜Flutter x Riverpod でアプリ開発！実践入門
27. ご清聴ありがとうございました 🎉