Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter HooksとRiverpodの解説

Yohei Iino
June 16, 2024
35

Flutter HooksとRiverpodの解説

Yohei Iino

June 16, 2024
Tweet

Transcript

  1. 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'), ); } }
  2. 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'), ); } }
  3. 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(); }
  4. 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'), ); } }
  5. 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'), ); } }
  6. 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++; }), }, ); } }
  7. 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}'), ); } }
  8. 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}'), ); } }
  9. 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}'), ); } }
  10. 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++, ); } }
  11. useEffectの例 final id = useState<int>(0); useEffect(() { // ①. id

    が変更されたら実行 getItems(id.value); }, [id.value]); useEffect(() { // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []); useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]);
  12. useEffectの例 useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]);

    final id = useState<int>(0); useEffect(() { // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []); useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]);
  13. useEffectの例 // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []); final

    id = useState<int>(0); useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]); useEffect(() { useEffect(() { // ③. 破棄時に実行 return () => { debugPrint(' 破棄時に実行'); }; }, [id.value]);
  14. useEffectの例 useEffect(() { // ③. 破棄時に実行 return () => {

    debugPrint(' 破棄時に実行'); }; }, [id.value]); final id = useState<int>(0); useEffect(() { // ①. id が変更されたら実行 getItems(id.value); }, [id.value]); useEffect(() { // ②. 初回のみ実行 debugPrint(' 初回のみ実行'); }, const []);
  15. 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), ), ], ), ); } }
  16. 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), ), ], ), ); } }
  17. 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), ), ], ), ); } }
  18. 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), ), ], ), ); } }