Columnのchildrenに定義したリストを渡すと変更が反映されません

Question

Columnのchildrenに、List<Widget>で定義したリストを渡すと変更が反映されません。何が原因なのか知りたいです。

例えば下記のようなコードがあるとします。
ボタンを押すと_changeText()が呼ばれ、 _textが変わり画面に反映されます。

class _MyHomePageState extends State<MyHomePage> {
  String _text = 'foo';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: Column(
        children: [
          Column(
            children: [Text(_text)],
          ),
          ElevatedButton(
              onPressed: () => _changeText(), child: Text("Change Text"))
        ],
      ),
    );
  }

  _changeText() {
    setState(() {
      _text = 'bar';
    });
  }
}

しかし下記のように List<Widget>でウィジェットを格納するリストを用意し、その中にTextを入れて同じようなことをすると、ボタンを押しても変更が反映されません。なぜでしょうか？

class _MyHomePageState extends State<MyHomePage> {
  String _text = 'foo';
  List<Widget> _widgetList = [];

  @override
  void initState() {
    super.initState();
    _widgetList = [
      Text(_text)
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: Column(
        children: [
          Column(
            children: _widgetList,
          ),
          ElevatedButton(
              onPressed: () => _changeText(), child: Text("Change Text"))
        ],
      ),
    );
  }

  _changeText() {
    setState(() {
      _text = 'bar';
    });
  }
}

よろしくおねがいします。

Answer 1

質問の前半に示されているコードでは、 _MyHomePageState の build() が返す Scaffold の中で _text を使用しているため、 _text の値が更新されるたびにウィジェットが再ビルドされ、表示が更新されます。
それに対し、質問の後半で示されているコードでは、 _MyHomePageState の initState() で作成された _widgetList をキャッシュしてそれを build() で使用するようになっているため、 _text の値が更新されてもウィジェットが再ビルドされず、表示が更新されません。

【Flutter】 無駄なリビルドを防ぐたった1つの方法 - Qiita

Comments

[mikaaan]

キャッシュされたWidgetが再ビルドされないという仕組みを知りませんでした！勉強になりました、ありがとうございます。

Answer 2

_textを"bar"から"foo"に変えるのではなく、
_widgetList配列の中のText("bar")をText("foo")にしなければなりません。

barをfooに変更する場合

  _changeText() {
    setState(() {
      _text = 'bar';
 　　　　　　　　　　_widgetList[0] = Text(_text);
    });
  }

Listを増やす場合

  _changeText() {
    setState(() {
      _text = 'bar';
      _widgetList.add(Text(_text));
    });
  }

Comments

[mikaaan]

回答ありがとうございます。仰る通り、配列の中のTextを置き換えると画面上に反映されることを確認できました。しかし、逆に配列の変数を定義していない Column(children: [Text(_text)],) の場合（上のコード）だと、_textを変えるだけで画面にも反映されるのはなぜでしょうか？ （両者の違いはなんですか？）