[Flutter]リビルドされているが画像が更新されない

Question

##やりたいこと
Providerを使って，データが変更されたらリビルドして表示画像を変更したいです。

##困っていること
リビルドはされているのですが表示が変わりません。

初期状態は全て①の箇所の画像はAssetの画像が表示されています。
それを編集してImage.memoryの別の画像
コンソールでログを見るとの箇所で確かに②の箇所で

_[log] Image(image: MemoryImage(Uint8ArrayView#25b1e, scale: 1.0), frameBuilder: null, loadingBuilder: null, alignment: center, this.excludeFromSemantics: false, filterQuality: low)

の表示があります。

なぜかAndroidの画面での表示が変わりません。

Flutter Inspectorでは全て
image: AssetImage(bundle: null, name: "images/boxImage.jpg")
と表示されています。

##調べたこと
Flutter Image Widget won't update on change state

このような記事を見つけたのですが，Image.fileの話で関係ないのかなと思いました。
##開発環境
Android Studio 3.6.3
Flutter 1.14.6
Dart 2.8.0

現在Flutterで開発をはじめて2週間ほどです。
よろしくお願いいたします。

##追記
見にくいかと思いますがファイル全体です。
// function スコアボックス
List<Widget> _scoreCellList(BuildContext context, int inning) {
の箇所が該当箇所です。
文字数制限のため元々の質問をコードを削除しました。
よろしくお願いいたします。

class ScorebookPage extends StatelessWidget {
  ScorebookPage({this.battingTurn});

  static const _cellHeight = 50.0;
  static const _cellWidth = 70.0;

  BattingTurn battingTurn;

  bool get _isBattingTurnFirst => battingTurn == BattingTurn.first;

  @override
  Widget build(BuildContext context) {
    //画面サイズ取得
    final size = MediaQuery.of(context).size;

    ImageCache().clear();
    return Scaffold(
        //https://stackoverflow.com/questions/51972371/bottom-overflow-by-30px
        //これないとbottom overflow する
        resizeToAvoidBottomPadding: false,

        body: SafeArea(
          child: Container(
            width: size.width,
            height: size.height,
            child: Column(
              verticalDirection: VerticalDirection.down,
              children: <Widget>[
                Expanded(
                    child: BidirectionalScrollViewPlugin(
                        child: _buildWidgets(context)))
              ],
            ),
          ),
        ),
        floatingActionButton: Column(
          verticalDirection: VerticalDirection.up,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            FloatingActionButton(
              heroTag: 'flip',
              onPressed: () {
                if (_isBattingTurnFirst) {
                  Navigator.of(context).pushNamed('/scorebookSecond');
                } else {
                  Navigator.of(context).pop();
                }
              },
              tooltip: _isBattingTurnFirst ? '後攻のシートへ' : '先攻のシートへ',
              child: Icon(Icons.flip_to_back),
            ),
            Container(
              // 余白のためContainerでラップ
              margin: const EdgeInsets.only(bottom: 16),
              child: FloatingActionButton(
                heroTag: 'menu',
                backgroundColor: originalGreen,
                onPressed: () {
                  print('pressed');
                },
                child: Icon(
                  Icons.menu,
                  size: 32,
                ),
              ),
            ),
          ],
        ) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }

  Widget _buildWidgets(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      height: _cellHeight * 13,
      color: Colors.white,
      child: Row(
        children: [
          Column(
            children: _scoreCellList(context, 1).map((widget) {
              return widget;
            }).toList(),
            mainAxisSize: MainAxisSize.min,
          ),
          Column(
            children: _scoreCellList(context, 2).map((widget) {
              return widget;
            }).toList(),
            mainAxisSize: MainAxisSize.min,
          ),
          Column(
            children: _scoreCellList(context, 3).map((widget) {
              return widget;
            }).toList(),
            mainAxisSize: MainAxisSize.min,
          ),
          Column(
            children: _scoreCellList(context, 4).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 5).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 6).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 7).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 8).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 9).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 10).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 11).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 12).map((widget) {
              return widget;
            }).toList(),
          ),
          Column(
            children: _scoreCellList(context, 13).map((widget) {
              return widget;
            }).toList(),
          ),
        ],
        crossAxisAlignment: CrossAxisAlignment.stretch,
      ),
    );
  }

  // function スコアボックス
  List<Widget> _scoreCellList(BuildContext context, int inning) {
    List<Widget> list = new List();

    ImageCache().clear();
    // イニング行
    list.add(Container(
      height: _cellHeight / 2,
      width: _cellWidth,
      child: Center(
        child: Text(inning.toString()),
      ),
      decoration: BoxDecoration(
          border: Border(
              top: const BorderSide(color: originalGreen, width: 0.5),
              right: BorderSide(
                  color: originalGreen, width: inning == 13 ? 0.5 : 0),
              left: const BorderSide(color: originalGreen, width: 0.5))),
    ));

    final scoreBoxDatasModel = _isBattingTurnFirst
        ? Provider.of<FirstScoreBoxDatasModel>(context)
        : Provider.of<SecondScoreBoxDatasModel>(context);
    log('rebuild score cell');
    // スコア行　10行
    for (var order = 1; order <= 10; order++) {
      // TODO(kazuki): ProviderのSelectorでリビルドを減らす
      // 監視するところを全部にしないで切り分ける？
      // イニングごととかでリビルドが走るようにとか

      final scoreBoxData = scoreBoxDatasModel.scoreBoxData(inning, order);

      if (scoreBoxData.changed != null) {
//        log(scoreBoxData.changed);
//        log(scoreBoxData.inning.toString());
//        log(scoreBoxData.order.toString());
//        log(scoreBoxData.imageBytes.toString());
      }
//      log(_isBattingTurnFirst.toString());
      final image = scoreBoxData.imageBytes != null
          ? Image.memory(
              scoreBoxData.imageBytes,
              key: Key(scoreBoxData.id),
            )
          : Image.asset(
              'images/boxImage.jpg',
              key: Key(scoreBoxData.id),
            );
//      final image = Image.memory(scoreBoxData.imageBytes, key: UniqueKey(),)
//      log(image.toString());
      list.add(
        Hero(
          tag: scoreBoxData.id,
          child: GestureDetector(
            child: Container(
              padding: const EdgeInsets.all(0),
              color: Colors.white,
              height: _cellHeight,
              width: _cellWidth,
              child: Container(
                child: Center(
                  child: Text(scoreBoxData.changed,
                      style: TextStyle(color: Colors.black87)),
                ),
                decoration: BoxDecoration(
                  border: Border(
                    top: const BorderSide(color: originalGreen, width: 0.5),
                    bottom: BorderSide(
                        color: originalGreen, width: order == 10 ? 0.5 : 0),
                    right: BorderSide(
                        color: originalGreen, width: inning == 13 ? 0.5 : 0),
                    left: const BorderSide(color: originalGreen, width: 0.5),
                  ),
                ),
              ),
            ),
            onTap: () {
              Navigator.push(
                context,
                ScorebookToHandWriteRoute(
                  widget: HandWritePageView(
                      initialPageOrder: scoreBoxData.order,
                      inning: scoreBoxData.inning,
                      scoreBoxDatasModel: scoreBoxDatasModel),
                ),
              );
            },
          ),
        ),
      );
    }

    list.add(Container(
        width: _cellWidth,
        height: _cellHeight / 2,
        decoration: const BoxDecoration(
            border: Border(
          top: BorderSide(color: originalGreen, width: 0.5),
          bottom: BorderSide(color: originalGreen, width: 0.5),
          left: BorderSide(color: originalGreen, width: 0.5),
        ))));

    return list;
  }

}

Comments

[satokei]

Image.memoryにkeyを追加したらどうなるでしょう？
　Image.memory(data.imageBytes, key: UniqueKey())

[fathy]

ご質問ありがとうございます。

試しましたが変化はありませんでした。

keyについて理解できていないのですが，
下記のようにキーを揃えるパターンも変化しませんでした。。。

final image = scoreBoxData.imageBytes != null
? Image.memory(
data.imageBytes,
key: Key(data.id),
)
: Image.asset(
'images/boxImage.jpg',
key: Key(data.id),
);

[satokei]

Image.fileについてですが、
質問のstackoverflowに記載されているIssueで、
「キャッシュのクリア」と「keyを追加」で回避できるとあります。
imageCache.clear() も実行するとどうでしょう？

https://github.com/flutter/flutter/issues/17419

[fathy]

遅くなりすみません。

変わりませんでした。。

キャッシュのクリアとキーの追加を行いましたが，画像は同じままです。

[satokei]

なるほど、分からないですね....????

ちなみに、画像以外を表示させると変化はあるのでしょうか？
（もしくは、表示件数が変わっているとか）

[fathy]

すみません！画像以外でも変わりませんでした！

試したコードは
child: Center(
child: image,
)
の箇所を
child: Center(
child: Text(data.changed),
),
に変更しました。
画像が変更されたあともテキストが変わりませんでした。

ログの出力はされているのですが。。。
何が考えられるでしょうか????‍♀️

[satokei]

_boxListメソッドを使用している箇所に問題があるかもしれませんので、
コードを提示してください。

[satokei]

コード提示ありがとうございます。
確認しましたところ、話が戻ってすみませんが、
イメージキャッシュのクリア方法は、
　ImageCache().clear();
ではなくて、
　imageCache.clear();
ですね。
試してみてみてください。

[fathy]

すみません。。

クラス内の変数_imageChacheとして実行しましたが，画像は同じままでした????‍♀️

[satokei]

imageCacheは、グローバルなgetterですので、
「imageCache.clear();」としてください。

[fathy]

スペスミスでおかしなことになってました。????‍♀️

ようやくキャッシュクリアできたかと思うのですが，結果は同じでした。
キーを設定してもダメでした。。。

[satokei]

> クラス内の変数_imageChacheとして実行しましたが，

クラス内の変数として定義していないですよね？それは削除してください。

[fathy]

してないです！
アンダーバーもつけてないのでグローバルのものを参照できているはずです！

[fathy]

```
@override
Widget build(BuildContext context) {
//画面サイズ取得
final size = MediaQuery.of(context).size;

imageCache.clear();
return Scaffold(
```

このようにしました。

[satokei]

了解しました！

[satokei]

ちなみに、画像の代わりに「Text(scoreBoxData.changed)」を表示してもらいましたが、
初期表示時とリビルド時で実は内容が同じってことはないですよね。

例えば、「Text(image.toString())」としても変わらないですか？

[fathy]

Text(data.changed)の内容もログの上では変化していました。
Text(image.toString())としてみても
Image-[<'4be7c326-3c64-48
などと表示されこの文字列の変化は確認できませんでした。

[fathy]

今，satokei様のアドバイスとは関係ないのですが，リビルドする数が多すぎるのではないかと思い，大幅に減らして実行しましたが結果は同じでした。

[satokei]

ありがとうございます。
....????

Answer 1

原因は、BidirectionalScrollViewPluginがStatefulWidgetであり、
リビルドされても再利用されてしまっているからです。

再利用させないためには、
BidirectionalScrollViewPluginに
keyを設定してあげるのが手っ取り早そうですが、
コンストラクタにkeyがないので渡せないですね。

以下のようにコンストラクタにkeyをつけて、
UniqueKeyを渡してあげれば、画像が変わると思います。
またプラグインの作者へプルリクを投げるとよいかと

• bidirectional_scroll_view.dart

class BidirectionalScrollViewPlugin extends StatefulWidget {
  BidirectionalScrollViewPlugin({@required this.child,
    Key key,  // <==★これを追加
    this.childWidth,
    this.childHeight,
    this.velocityFactor,
    this.initialOffset,
    this.scrollDirection,
    this.scrollListener,
    this.scrollOverflow = Overflow.visible,
  }) : super(key: key);  // <==★これを追加
～略～
}

• pub.dev

https://pub.dev/packages/bidirectional_scroll_view

• GitHub

https://github.com/toufikzitouni/flutter-bidirectional_scrollview_plugin

Comments

[fathy]

本当にありがとうございます????‍♀️

はじめからコード全体を載せるべきでした。

確認に手間どりそうなので少々お時間下さい。

[fathy]

変わりました！！！
本当にたくさんの時間を割いて頂いてありがとうございます！
感動しました。
????‍♀️????‍♀️????‍♀️

[satokei]

おお！よかったです！