【Flutter】providerのnotifyListeners()でshowModalBottomSheetを再描画させたいのですができません。

Question

前提

Flutterの勉強で、メモ帳アプリを作成しています。
そこでshowModalBottomSheetWidgetをproviderのnotifyListeners()で再描画させたいのですができません。
何が足りないのでしょうか？
よければアドバイスいただけるとありがたいです。
よろしくお願いします。

実現したいこと

Buttonを押すとshowModalBottomSheetが表示され、そこに新規メモ帳作成Buttonと今までに作成した下書きのメモ帳が動的に表示させる、といった機能を実装しようといています。
しかし、新規メモ帳作成Buttonを押し、メモ帳作成画面へ移動したあとにメモ内容を保存し、「 Navigator.pop(context);」により戻るとnotifyListeners()が実行されても画面が再描画されません。

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

なし

該当のソースコード

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class SendDiary extends StatefulWidget {
  String? destination;
  SendDiary(this.destination);

  @override
  State<SendDiary> createState() => _SendDiary();
}

class _SendDiary extends State<SendDiary> {
  @override
  Widget build(BuildContext context) {
    final double deviceHeight = MediaQuery.of(context).size.height;
    final double deviceWdth = MediaQuery.of(context).size.width;
    return Scaffold(
        body: TextButton(
      onPressed: () {
        showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            enableDrag: true,
            builder: (context) {
              return Consumer<ReShowModalBottomSheet>(
                  builder: (context, model, child) {
                return Container(
                    height: deviceHeight * 0.4,
                    width: deviceWdth,
                    child: Column(children: [
                      TextButton(
//ここでメモ帳作成画面へ遷移
                        onPressed: () async {
                          await Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => WriteDiary(null)));
//メモ帳作成後、戻ってきたタイミングで再描画
                          model.reShowModalBottomSheet();
                        },
                        child: Text('新規メモ帳作成画面へ遷移'),
                      ),
                      SingleChildScrollView(
                          physics: BouncingScrollPhysics(),
                          child: Column(children: [
                            for (int index = 0;
                                index < diaryStorage[0].length;
                                index++) ...{
                              // new Consumer<ReShowModalBottomSheet>(
                              //     builder: (context, model, child) {
                              new TextButton(
                                onPressed: () async {
//ここで保存していたメモ帳（下書き）をメモ帳作成画面へ展開
                                  await Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => SendWriteDiary(
                                                null,
                                                null,
                                                null,
                                                'null',
                                                null,
                                              )));
//メモ帳作成画面から戻り、画面再描画
                                       model.reShowModalBottomSheet();
                                },
                                child: Text('下書きの数だけButtonを作成'),
                              )
                            }
                          ]))
                    ]));
              });
            });
      },
      child: Text('ShowModalBottomSheet'),
    ));
  }
}

import 'package:flutter/material.dart';

class ReShowModalBottomSheet extends ChangeNotifier {
  void reShowModalBottomSheet() {
    notifyListeners();
  }
}

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

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

Answer 1

以下のサンプルコードで、Consumerのbuilderで作られたウィジェットを再構築していることを確認しました。

提示されたコードと違うのは、State内のbuilderでReShowModalBottomSheetの情報を取り出し、Consumer<ReShowModalBottomSheet>をListenableProvider.valueでラップして、valueに取り出したReShowModalBottomSheetを渡しているところかな。

提示されたコードは実行できないのでそれに近いコードを作ったのだけど、当初動きませんでした。
showModalBottomSheetを作ったところでproviderのエラーが出ました。
それを調べると、Providerのデータ伝播はウィジェットツリー内にとどまるのだけど、showModalBottomSheetは別ツリーになるのでアクセスできない可能性があるとのことです。

なぜ更新されていないかという理由は不明ですが、このような実装で更新を行うことが出来ました。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProvDialog1 extends StatelessWidget {
  const ProvDialog1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ReShowModalBottomSheet(),
      child: const _Scaf(),
    );
  }
}

class ReShowModalBottomSheet extends ChangeNotifier {
  void reShowModalBottomSheet() {
    notifyListeners();
  }
}

class _Scaf extends StatefulWidget {
  const _Scaf({Key? key}) : super(key: key);

  @override
  State<_Scaf> createState() => _ScafState();
}

class _ScafState extends State<_Scaf> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    final data = context.read<ReShowModalBottomSheet>();
    return Scaffold(
      appBar: AppBar(
        title: const Text("ProvDialog1"),
      ),
      body: TextButton(
        onPressed: () => showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            enableDrag: true,
            builder: (BuildContext context) {
              return ListenableProvider.value(
                value: data,
                child: Consumer<ReShowModalBottomSheet>(
                    builder: (context, model, child) {
                  return Column(children: [
                    TextButton(
                      onPressed: () async {
                        count++;
                        model.reShowModalBottomSheet();
                      },
                      child: Text("count = $count"),
                    ),
                  ]);
                }),
              );
            }),
        child: const Text('Show Dialog'),
      ),
    );
  }
}

• 追記
  ウィジェットの更新指示だけならConsumerを使うよりStatefulBuilderを使った方が楽なのでは？

Comments

[bbiiq]

回答ありがとございます！
とりあえず、Consumer<ReShowModalBottomSheet>をListenableProvider.valueでラップして、valueに取り出したReShowModalBottomSheetを渡してみたのですが、相変わらずって感じだったのでメインとなるクラスとShowModalBottomSheetとShowModalBottomSheetの中のボタンを全て同じツリーの中に入るようやってみます。ありがとうございました。

ウィジェットの更新指示だけならConsumerを使うよりStatefulBuilderを使った方が楽なのでは？
→それもやってみたんですけど上手くいかなかったので、勉強も兼ねてProviderを使ってみたっていう感じです！

[ta.fu]

基本的にこういうのは再現するソースが提示されないと、有効な他者の意見を聞くことはできません。

後あるとしたら、勘違い系。
再構築は行ってるけど、データの変更はないので同じ情報が表示されていて、再構築していないと思い込んでいる場合。
builderのreturnでウィジェットを返す前にデバッグ文などを入れて、builderが実行されているかを確認するとか。

[bbiiq]

「基本的にこういうのは再現するソースが提示されないと、有効な他者の意見を聞くことはできません。」
なるほど。main.dartから提示するってことですね。ありがとうございます。

確認してみます。ありがとうございました。