【Flutter】ダイアログの中のラジオボタンが効かない

Question

こんにちは。
現在、予約機能UIを作っています。
ラジオボタンで予約時間を選択できて、
「4時間以上」を選択すると、ダイアログでそれ以上の選択肢を選んでもらう仕様です。

添付写真は、現在のコードで出力されたものです。
「4時間以上」を選択した際に、下に現れるボタンを押すと、ダイアログが出てくる仕様で考えています。
その下に現れるボタンには、ダイアログで選択した値がテキスト出力されています。!

しかし、現状ではダイアログ内のラジオを選択しても、タップ反応(一瞬灰色になる)はあるのですが、チェック色が変わらず、ラジオの値もボタンに反映されない状態です。

  final List sortTime = ['1時間', '2時間', '3時間', '4時間以上'];

  bool _inputTime = false;
  //ここにチェックされた選択肢を入れる
  String sortTimeChecked = "";
  List<Widget> get _sortTimeList {
    List<Widget> sortTimeCheckedList = List();
    sortTime.forEach((item) {
      sortTimeCheckedList.add(Container(
          margin: const EdgeInsets.symmetric(horizontal: 4.0),
          child: item != '4時間以上'
              ? ChoiceChip(
                  labelPadding: EdgeInsets.symmetric(vertical: 4),
                  padding: EdgeInsets.only(left: 12, right: 12),
                  label: Text(item),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0)),
                  selected: sortTimeChecked == item, // 判定
                  onSelected: (selected) {
                    setState(() {
                      sortTimeChecked = item; // 代入
                      _inputTime = false;
                    });
                  },
                )
              : ChoiceChip(
                  labelPadding: EdgeInsets.symmetric(vertical: 4),
                  padding: EdgeInsets.only(left: 12, right: 12),
                  label: Text(item),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0)),
                  selected: sortTimeChecked == item, // 判定
                  onSelected: (selected) {
                    setState(() {
                      sortTimeChecked = item; // 代入
                      _inputTime = true;
                    });
                  },
                )));
    });
    return sortTimeCheckedList;
  }

  List<String> sortTimeOthers = ['4時間', '5時間', '6時間', '7時間', '8時間', '9時間'];
  String _currentIndex = '4時間';
  Future _selectsortTimeOthers() async {
    await showDialog(
      context: context,
      builder: (BuildContext context) => new AlertDialog(
        title: Text(''),
        actions: <Widget>[
          FlatButton(
            onPressed: () {
              Navigator.pop(context, null);
            },
            child: Text('CANCEL'),
          ),
          FlatButton(
            onPressed: () {
              Navigator.pop(context, sortTimeOthers);
            },
            child: Text('OK'),
          ),
        ],
        content: Container(
          width: double.minPositive,
          height: 300,
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: sortTimeOthers.length,
            itemBuilder: (BuildContext context, int index) {
              return RadioListTile(
                value: index,
                activeColor: Colors.blue,
                groupValue: _currentIndex,
                title: Text(sortTimeOthers[index]),
                onChanged: (val) {
                  setState(() {
                    print(index);
                    _currentIndex = val;
                  });
                },
              );
            },
          ),
        ),
      ),
    );
  }

  Widget sortTimeWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Wrap(
          direction: Axis.horizontal,
          alignment: WrapAlignment.start,
          children: _sortTimeList,
        ),
        _inputTime == true
            ? OutlineButton(
                color: Colors.white,
                disabledBorderColor: Colors.black,
                onPressed: () {
                  _selectsortTimeOthers();
                },
                child: Text(_currentIndex),
              )
            : Container(),
      ],
    );
  }

参考サイトは以下です
https://androidkt.com/display-auto-size-alertdialog-with-listview-in-flutter-simple-list-checkbox-list-radio-button-list/

参考から試行錯誤していろいろいじったので、若干違うところが多々あるかと思いますが...

原因がわからず、対処方法をご教授いただければ嬉しいです。
よろしくお願いいたします。

Answer 1

質問内のコードだとint型とString型のミスマッチが起きていたので、まずこれを直す必要があります。

 return RadioListTile<String>(
-  value: index,
+  value: sortTimeOthers[index],
   activeColor: Colors.blue,
   groupValue: _currentIndex,
   title: Text(sortTimeOthers[index]),
   onChanged: (val) {
     setState(() {
       print(index);
       _currentIndex = val;
     });
   },
 );

---

次に、チェックを画面に反映させるため、タイルが選択された時にダイアログの中身を更新してやる必要があります。

質問内のコードでも、onChangedの中でsetStateが使われているのですが、これは元ページのsetStateなので、ダイアログの中身は更新されません。

この問題を解決するために、参考リンクのコードではStatefulBuilderというウィジェットが使われていました。
自分も今初めて知ったくらいマイナーなウィジェットですが、これを使うと、以下のようになります。
ちゃんと動くか分かりませんが、一度試してみてください。

  Future _selectsortTimeOthers() async {
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (context, setState) {
            return AlertDialog(
              title: Text(''),
              actions: <Widget>[
                FlatButton(
                  onPressed: () {
                    Navigator.pop(context, null);
                  },
                  child: Text('CANCEL'),
                ),
                FlatButton(
                  onPressed: () {
                    Navigator.pop(context, sortTimeOthers);
                  },
                  child: Text('OK'),
                ),
              ],
              content: Container(
                width: double.minPositive,
                height: 300,
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: sortTimeOthers.length,
                  itemBuilder: (BuildContext context, int index) {
                    return RadioListTile<String>(
                      value: sortTimeOthers[index],
                      activeColor: Colors.blue,
                      groupValue: _currentIndex,
                      title: Text(sortTimeOthers[index]),
                      onChanged: (val) {
                        // ダイアログを更新
                        setState(() {
                          print(index);
                          _currentIndex = val;
                        });
                      },
                    );
                  },
                ),
              ),
            );
          },
        );
      },
    );

    //　元ページを更新 (場合によっては`onChanged`の中に書くのもアリかも)
    setState(() {});
  }

Comments

[Yariii]

ご回答ありがとうございます。
おかげさまでラジオボタン選択できるようになりました。ありがとうございます！

１点だけ、ダイヤログの「OK」を押したら、値が反映されず、「OK」→ダイアログ消える→「4時間以上」をもう一度押したら、ダイアログの値に更新されるという動きになりました。

「OK」のonPressedに仕掛けが必要だと思うのですが、
参考サイトでは「OK」のonPressedに
Navigator.pop(context, sortTimeOthers[_currentIndex]);
と表記があり、入れてみたところ_currentIndexがあることでエラーになってしまいます。↓
The argument type 'String' can't be assigned to the parameter type 'int'.
ここはどのようにすれば反映されますでしょうか？

[nskhei]

> Navigator.pop(context, sortTimeOthers[_currentIndex]);
と表記があり、入れてみたところ_currentIndexがあることでエラーになってしまいます。

これは、String型である_currentIndexという値を配列の添字に使おうとしたためだと思います。
ですが、今のコードだとこの部分は関係ないと思います。

[nskhei]

値が反映されない理由は分からないです...。
もしかしたら、質問のコードで省かれている部分が原因かもしれません。

あと、回答のコードの一番下のsetStateがちゃんと書かれているか確認してください。

[Yariii]

すみません、別箇所のバグでホットリロードが効いていなかったのが原因でした。~ ~；
ですので今回も無事解決できました、ありがとうございました...！