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

Question

前提・実現したいこと

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

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

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

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

該当のソースコード

// providers/counter.dart
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:state_notifier/state_notifier.dart';


final counterProvider = StateNotifierProvider((_) => Counter());

class Counter extends StateNotifier<int> {
  Counter() : super(0);
  void increment() {
    state += 1;
  }
}

// providers/multiCounter.dart
import 'dart:math' as math;
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:state_notifier/state_notifier.dart';

final multiCounterProvider = StateNotifierProvider((_) => MultiCounter());

class MultiCount {
  int left;
  int right;

  MultiCount(this.left, this.right);
}

class MultiCounter extends StateNotifier<MultiCount> {
  MultiCounter(): super(MultiCount(1, 2));
  void increment() {
    final r = math.Random();
    final v = r.nextInt(10);
    if (v > 5) {
      state.left += 1;
    } else {
      state.right += 2;
    }
    print("${state.right}, ${state.left}");
  }
}

// main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:riverpod_flutterhooks_example/providers/multiCounter.dart';
import 'providers/counter.dart';

void main() => runApp(
  HomePage()
);

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('CounterApp')),
      body: Center(
        child: ProviderScope(
          child: Column(
            children: [
              CounterApp(),
              MultiCounterApp()
            ],
          ),
        )
      ),
    )
  );
}

class CounterApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final state = useProvider(counterProvider.state);
    final counter = useProvider(counterProvider);

    return Container(
      child: Row(
        children: [
          Text(state.toString()),
          ElevatedButton(onPressed: () => counter.increment(), child: const Text('+'))
        ],
      ),
    );
  }
}

class MultiCounterApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // final counterState = useProvider(counterProvider.state);
    final multiCounterState = useProvider(multiCounterProvider.state);
    final counter = useProvider(counterProvider);
    final multiCounter = useProvider(multiCounterProvider);

    return Container(
      child: Row(
        children: [
          // Text(counterState.toString()),
          Text(multiCounterState.left.toString()),
          Text(multiCounterState.right.toString()),
          ElevatedButton(child: const Text("+"), onPressed: () { multiCounter.increment(); counter.increment(); }),
        ],
      ),
    );
  }
}

試したこと

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

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

pubspec.ymlはこちらです

name: riverpod_flutterhooks_example
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"
  flutter: ">= 1.17.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.11.0
  hooks_riverpod: ^0.5.1
  state_notifier: ^0.5.0
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Answer 1

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

 class MultiCounter extends StateNotifier<MultiCount> {
   MultiCounter() : super(MultiCount(1, 2));
   void increment() {
     final r = math.Random();
     final v = r.nextInt(10);
     if (v > 5) {
-      state.left += 1;
+      state = state..left += 1;
     } else {
-      state.right += 2;
+      state = state..right += 2;
     }
     print("${state.left}, ${state.right}");
   }
 }

Comments

[teraterakoya]

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

[satokei]

カスケード表記ですね。
https://www.meganii.com/blog/2020/02/20/dart-cascade-notation/
https://dart.dev/guides/language/language-tour#cascade-notation

[teraterakoya]

ありがとうございます！