【Flutter】statefulWidgetクラスのコンストラクタで初期化されたメンバ変数をstateとして動的に管理したい

Question

前提・実現したいこと

親クラスのメンバ変数で定義したリストデータをもとに、独自定義のクラス（StatefulWidget)をリスト表示したいです。
リンクにサンプルコードを記載しています。（下記に同じコード記載しています）
そもそも、この実装が不適切である場合や、推奨される実装があればご教授いただけますと幸いです。

 List<CounterItem> _counterItems =
      List<CounterItem>.generate(30, (index) => CounterItem(0));

〜〜〜〜〜〜〜〜〜〜
省略
〜〜〜〜〜〜〜〜〜〜

itemBuilder: (context, index) {
          // １要素ずつ、レンダリングしていく
          return _counterItems[index];
        },

上記　Listデータの各要素を、ListViewの項目にしたいと考えております。

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

サンプルコードでは、CouterItemのコンストラクタで初期化した値をstateクラスでinitState()することで動的に値を変更しています。ですが、この実装だとコンストラクタで渡された値とは実体が異なるため、_MyHomePageStateのListView.builderが実行される（スクロールする）ごとに値が消えてしまいます。
当初は、CounterItemのメンバ変数(score)をfinal修飾子を付けずに、widget.scoreで値にアクセスするように実装していました。この実装の場合は、値をもとのリストが保持するため再描画されても値を保持できてました。しかし、statefulWidgetは＠immutableアノテーションで定義するようにワーニングが表示されるので、別の実装庵を考えおります。

該当のソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 状態も含め管理するデータを準備する
  List<CounterItem> _counterItems =
      List<CounterItem>.generate(30, (index) => CounterItem(0));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
//    推測だが、builder関数は、スクロールされるたびに表示画面内の要素を再度レンダリングしているので、scoreが保持されない。
      body: ListView.builder(
        itemCount: _counterItems.length,
        itemBuilder: (context, index) {
          // １要素ずつ、レンダリングしていく
          return _counterItems[index];
        },
      ),
    );
  }
}

// 以下のクラスを別ファイルに分割して、パーツとして管理したい
class CounterItem extends StatefulWidget {
  CounterItem(this.score);
  final int score;
  @override
  _CounterItemState createState() => _CounterItemState();
}

class _CounterItemState extends State<CounterItem> {
  int _score;

  @override
  void initState() {
    super.initState();
    _score = widget.score;    // 値渡しすることになるので、大元のListデータに反映できない
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          border: Border(bottom: BorderSide(width: 1.0, color: Colors.grey))),
      child: ListTile(
        leading: ElevatedButton(
          child: Text('カウント　アップ'),
          onPressed: () {
            setState(() {
              _score++;
              // widget.score++;
            });
          },
        ),
        title: Text(
          '$_score',
          // '${widget.score}',
          style: TextStyle(color: Colors.black, fontSize: 18.0),
        ),
      ),
    );
  }
}

Answer 1

値の保持はListViewのitem側で行うより、その保持側（上位のState）で行うと良いかと思います。
例えば以下のような形で値の保持自体はできそうです。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _listItems = List<int>.generate(30, (_) => 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: _listItems.length,
        itemBuilder: (context, index) {
          return CounterItem(
            score: _listItems[index],
            onPressed: () => setState(() => _listItems[index]++),
          );
        },
      ),
    );
  }
}

class CounterItem extends StatelessWidget {
  CounterItem({this.score, this.onPressed});
  final int score;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          border: Border(bottom: BorderSide(width: 1.0, color: Colors.grey))),
      child: ListTile(
        leading: ElevatedButton(
          child: Text('カウント　アップ'),
          onPressed: onPressed,
        ),
        title: Text(
          '$score',
          // '${widget.score}',
          style: TextStyle(color: Colors.black, fontSize: 18.0),
        ),
      ),
    );
  }
}

Comments

[kurimaron7]

回答ありがとうございます。
やはり、コールバックで対応するのが良さそうですかね。
しかし、コールバックメソッドが大量にある場合など可読性などが悪くなりそうだと思うのですが、どうなのでしょうか？

また、Providerなどのアーキテクチャを活用していくのが良いのでしょうか？

[KyoheiG3]

回答遅くなりました。
コールバックが大量にあるとはどのような状況でしょうか？
単純なリストのアイテムだとせいぜい数個程度だとは思いますが、2~3個程度までであれば上記コードのようなクロージャでのハンドリングで良いかと思います。

可読性などを考慮する場合はイベントの種類ごとにクロージャをまとめて、そのクロージャの引数としてコールバックイベント専用の`enum`やクラスを用意しイベントをハンドリングするなどである程度対応できそうです。が、結局はどこかに分岐やらが必要になるかと。

単純なボタンやリストのタップのイベントのハンドリングのためだけに`Provider`などを導入するのは少々過剰かと思います。