質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1309閲覧

flutter_hooksで複数のProviderで状態管理がしたい

teraterakoya

総合スコア8

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2021/03/07 02:43

前提・実現したいこと

Flutterに習熟したく、色々試しています。
今はこちらの記事を参考にしながら、flutter_hooksを理解したいと思っています。

サンプルではシンプルなカウンターが実装されています。
ここにもう一つカウンターを追加して別々の状態を持てることを確認したかったのですが、うまくいきませんでした。

発生している問題・エラーメッセージ

うまくいかなかったとは具体的に言うと、StateNotifierの方では状態が変化していることはprintデバッグして確認されたが、Viewが書き換わらない状態です。
状態の変化がViewに反映されない課題を解決したいです。

該当のソースコード

dart

1// providers/counter.dart 2import 'package:hooks_riverpod/hooks_riverpod.dart'; 3import 'package:state_notifier/state_notifier.dart'; 4 5 6final counterProvider = StateNotifierProvider((_) => Counter()); 7 8class Counter extends StateNotifier<int> { 9 Counter() : super(0); 10 void increment() { 11 state += 1; 12 } 13}

dart

1// providers/multiCounter.dart 2import 'dart:math' as math; 3import 'package:hooks_riverpod/hooks_riverpod.dart'; 4import 'package:state_notifier/state_notifier.dart'; 5 6final multiCounterProvider = StateNotifierProvider((_) => MultiCounter()); 7 8class MultiCount { 9 int left; 10 int right; 11 12 MultiCount(this.left, this.right); 13} 14 15class MultiCounter extends StateNotifier<MultiCount> { 16 MultiCounter(): super(MultiCount(1, 2)); 17 void increment() { 18 final r = math.Random(); 19 final v = r.nextInt(10); 20 if (v > 5) { 21 state.left += 1; 22 } else { 23 state.right += 2; 24 } 25 print("${state.right}, ${state.left}"); 26 } 27}

dart

1// main.dart 2import 'package:flutter/material.dart'; 3import 'package:hooks_riverpod/hooks_riverpod.dart'; 4import 'package:flutter_hooks/flutter_hooks.dart'; 5import 'package:riverpod_flutterhooks_example/providers/multiCounter.dart'; 6import 'providers/counter.dart'; 7 8void main() => runApp( 9 HomePage() 10); 11 12class HomePage extends StatelessWidget { 13 14 Widget build(BuildContext context) => MaterialApp( 15 home: Scaffold( 16 appBar: AppBar(title: Text('CounterApp')), 17 body: Center( 18 child: ProviderScope( 19 child: Column( 20 children: [ 21 CounterApp(), 22 MultiCounterApp() 23 ], 24 ), 25 ) 26 ), 27 ) 28 ); 29} 30 31class CounterApp extends HookWidget { 32 33 Widget build(BuildContext context) { 34 final state = useProvider(counterProvider.state); 35 final counter = useProvider(counterProvider); 36 37 return Container( 38 child: Row( 39 children: [ 40 Text(state.toString()), 41 ElevatedButton(onPressed: () => counter.increment(), child: const Text('+')) 42 ], 43 ), 44 ); 45 } 46} 47 48class MultiCounterApp extends HookWidget { 49 50 Widget build(BuildContext context) { 51 // final counterState = useProvider(counterProvider.state); 52 final multiCounterState = useProvider(multiCounterProvider.state); 53 final counter = useProvider(counterProvider); 54 final multiCounter = useProvider(multiCounterProvider); 55 56 return Container( 57 child: Row( 58 children: [ 59 // Text(counterState.toString()), 60 Text(multiCounterState.left.toString()), 61 Text(multiCounterState.right.toString()), 62 ElevatedButton(child: const Text("+"), onPressed: () { multiCounter.increment(); counter.increment(); }), 63 ], 64 ), 65 ); 66 } 67} 68

試したこと

  • ProviderScopeの切り分け
    • counterのほうは状態変化→画面変化するものの、追加したmultiCounterは状態変化→画面変化とならない
  • MultiCounterAppの中にcounterProvider.stateを追加する
    • こちらに貼付したもので、MultiCounterApp内のコメントアウト箇所を戻すと、期待した動作(状態変化→画面変化)をする

補足情報(FW/ツールのバージョンなど)

pubspec.ymlはこちらです

yaml

1name: riverpod_flutterhooks_example 2description: A new Flutter project. 3 4publish_to: 'none' # Remove this line if you wish to publish to pub.dev 5 6version: 1.0.0+1 7 8environment: 9 sdk: ">=2.7.0 <3.0.0" 10 flutter: ">= 1.17.0" 11 12dependencies: 13 flutter: 14 sdk: flutter 15 flutter_hooks: ^0.11.0 16 hooks_riverpod: ^0.5.1 17 state_notifier: ^0.5.0 18 cupertino_icons: ^0.1.3 19 20dev_dependencies: 21 flutter_test: 22 sdk: flutter 23 24flutter: 25 uses-material-design: true

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下のようにするとできます。

diff

1 class MultiCounter extends StateNotifier<MultiCount> { 2 MultiCounter() : super(MultiCount(1, 2)); 3 void increment() { 4 final r = math.Random(); 5 final v = r.nextInt(10); 6 if (v > 5) { 7- state.left += 1; 8+ state = state..left += 1; 9 } else { 10- state.right += 2; 11+ state = state..right += 2; 12 } 13 print("${state.left}, ${state.right}"); 14 } 15 }

投稿2021/04/09 15:36

satokei

総合スコア1168

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teraterakoya

2021/05/02 08:46

見落としていました!ありがとうございます! ところで state..left の .. の記法に名前はありますか? もし良ければご教示ください
teraterakoya

2021/06/05 07:20

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問