Flutter RangeSliderをポップアップ状態で実施すると、スライドバーが動作しない。

Question

問題

Flutterで以下のRangeSlidebarをStatelessWidgetコード内で作成しています。
https://api.flutter.dev/flutter/material/RangeSlider-class.html

しかし、ポップアップ状態ではスライドバーが動作しません。
どのようにすれば良いでしょうか？

#補足イメージ
検索フィルタ用のスライドバーをポップアップで実施しています。

以下は一度ポップアップを閉じて、再度開いた状態です。
値の変更は反映されていますが、スライドバーは動かず、一度閉じないといけません。

#コード

以下は表示側のコード

class MapsHome extends StatelessWidget {
Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => MapHome(this.uid),
      child: Consumer<MapHome>(
        builder: (BuildContext context, model, child) => Scaffold(　　
　　　　・
　　　　・
　　　　・
IconButton(
  color: Colors.black54,
  icon: Icon(Icons.filter_list,
  onPressed: () async {
  if (await openSearchSetting(context, model) =="yes") {
    //検索フィルタ適用後の処理
    }
  },
),
　　・
　　・
　　・
  //検索フィルタのポップアップ処理。
  Future<String> openSearchSetting(BuildContext context, MapHome model) async {
    String value = await showDialog<String>(
      context: context,
      builder: (BuildContext context) => new SimpleDialog(
        title: new Text("検索フィルタ", style: TextStyle(fontSize: 17)),
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(0, 0, 0, 5),
            child: new Divider(),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "評価",
                  style: TextStyle(fontSize: 14),
                ),
                RangeSlider(
                  values: model.currentRangeValues,
                  min: 0,
                  max: 10,
                  divisions: 10,
                  labels: RangeLabels(
                    model.currentRangeValues.start.round().toString(),
                    model.currentRangeValues.end.round().toString(),
                  ),
                  onChanged: (RangeValues values) {
                    model.ChangeSearchStarRange(values);
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0, 0, 0, 5),
            child: new Divider(),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              createDialogOption(context, "no", "キャンセル"),
              createDialogOption(context, "yes", "適用"),
            ],
          ),
        ],
      ),
    );

    return value;
  }

}

以下は処理側のコード

class MapHome extends ChangeNotifier {
 RangeValues currentRangeValues = const RangeValues(0, 10);
  void ChangeSearchStarRange(RangeValues values) {
    this.currentRangeValues = values;
    notifyListeners();
  }
}

#補足
RangeSlidebarのサンプルではsetState()で値を更新しています。しかし、私はStatelessWidegetで作成しています。statefullwidget変更の修正範囲の関係からできる限りStatelessWidgetのまま実装の方法を探しています。
https://api.flutter.dev/flutter/material/RangeSlider-class.html

#追記
nskhei様の回答を受けて、追加質問です。

showDialogを動作させるにはChangeNotifierProviderを新たに作成する必要がある。
このshowDialogは検索フィルターで、閉じた先にあるChangeNotifierProviderのインスタンスに値を渡したいと考えています。

新たにChangeNotifierProviderを作成すると、別個のインスタンスになり、値を引き継げないと考えているのですが、どのようにすればよろしいでしょうか？

Answer 1

showDialogは画面遷移と同じなので、元ページにあるConsumerによるリビルドは効きません。

ダイアログ内で再度ChangeNotifierProvider + Consumerを設置することで、解決すると思います。

  Future<String> openSearchSetting(BuildContext context, MapHome model) async {
    String value = await showDialog<String>(
      context: context,
      builder: (BuildContext context) => ChangeNotifierProvider<MapHome>.value(
        value: model,
        child: new SimpleDialog(
          title: new Text("検索フィルタ", style: TextStyle(fontSize: 17)),
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 5),
              child: new Divider(),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    "評価",
                    style: TextStyle(fontSize: 14),
                  ),
                  Consumer<MapHome>(
                    builder: (context, model, child) {
                      return RangeSlider(
                        values: model.currentRangeValues,
                        min: 0,
                        max: 10,
                        divisions: 10,
                        labels: RangeLabels(
                          model.currentRangeValues.start.round().toString(),
                          model.currentRangeValues.end.round().toString(),
                        ),
                        onChanged: (RangeValues values) {
                          model.ChangeSearchStarRange(values);
                        },
                      );
                    },
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 5),
              child: new Divider(),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                createDialogOption(context, "no", "キャンセル"),
                createDialogOption(context, "yes", "適用"),
              ],
            ),
          ],
        ),
      ),
    );
    return value;
  }

Comments

[takumi123]

回答ありがとうございます。
なるほど、ChangeNotifierProviderを新たに作成する必要があるのですね。

このshowDialogは検索フィルターで、閉じた先にあるChangeNotifierProviderに値を渡したいと考えています。

新たにChangeNotifierProviderを作成すると、別個のインスタンスになり、値を引き継げないと考えているのですが、どのようにすればよろしいでしょうか？

[nskhei]

回答内のコードではChangeNotifierProvider.valueを使って、
元ページのモデルと同じインスタンスを供給するようにしています。

[takumi123]

見落としていました！
申し訳ありません。

無事動作しました。大変感謝しております。
ありがとうございます！！！