Flutterでラジオボタン＋折りたたみの方法

Question

こんにちは。(立て続けに質問すみません)

現在、いろいろなラジオボタン作成に挑戦しているのですが、
添付写真のようなラジオボタンを実装しようと考えています。

[リンゴ,バナナ,アップル]の選択肢があり、(リンゴとアップルが同じなのは気にしないでください...w)
このうち「バナナ」だけタップすると、追加のUIがその下にアコーディオンする動きで考えます。

Flutterのラジオボタンをそのまま使うと、デザインを柔軟にできなさそうだったので(FlatButtonのようなUIにしたかったので)、
GestureDetectorを使って、ラジオボタンと同じ動きを作ろうかと考えました。

そして試行錯誤中のコードが以下です。
ラジオボタンの動きをどのように実現すれば良いのかわからず時間だけが無くなっていき。。
知恵をお貸しいただけたらと思います。

  final List sortFruits = ['リンゴ', 'バナナ', 'アップル'];

  //ここに選択した値を入れたいです
  String sortFruitsChecked = "";
  bool _inputFruits = false;

  List<Widget> get _sortFruitsList {
    List<Widget> sortFruitsCheckedList = List();
    sortFruits.forEach((item) {
      sortFruitsCheckedList.add(Container(
          width: double.infinity,
          height: 60,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black87, width: 1),
            borderRadius: BorderRadius.circular(8),
          ),
          margin: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
          child: item != 'バナナ'
              ? GestureDetector(
                  onTap: () {
                    setState(() {
                      sortFruitsChecked = item;
                      print(sortFruitsChecked);
                    });
                  },
                  child: Container(
                    color: Colors.transparent,
                    child: Text(item),
                  ))
              : Column(
                  children: [
                    GestureDetector(
                      child: Text(item),
                      onTap: () {
                        sortFruitsChecked = item;
                        print(sortFruitsChecked);
                        _inputFruits = false;
                      },
                    ),
                    _inputFruits == true
　　　　　　　　　　　　　　//アコーディオン部分としてとりあえずこの"a"の文字が出るか実験
                        ? Container(
                            child: Text('a'),
                          )
                        : Container()
                  ],
                )));
    });
    return sortFruitsCheckedList;
  }

  Widget sortFruitsWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          children: _sortGradeList,
        ),
        _inputFruits == true
            ? OutlineButton(
                color: Colors.white,
                disabledBorderColor: Colors.black,
                onPressed: () {
                  _selectsortTimeOthers();
                },
                child: Text(_currentIndex),
              )
            : Container(),
      ],
    );
  }

GestureDetector以外にも、よりflutterにあった書き方などがあれば教えていただきたいです。
もしかするとFlutterで用意されているラジオボタンでも可能だったりするんですかね？(調べても、FlutButtonのようなデザインでラジオボタン実装している文献に出会えずでして、、)

よろしくお願いいたします。

---追記
ちょっと語弊があるかもしれないので補足させてください。

コード冒頭の

//ここに選択した値を入れたいです
  String sortFruitsChecked = "";

これはprint出力で成功を確認しています。

ですのでラジオ本来の機能は果たしているのですが、
・選択中のラジオボタンに色をつけたい(ラジオボタンぽくしたい)
・「バナナ」のみ追加でアコーディオン機能を入れたい
といったことが今回の理想です。

よろしくお願いいたします。

Answer 1

カスタマイズしたラジオボタンの例なら、以下のページが参考になると思います。
https://stackoverflow.com/questions/50060276/flutter-custom-radio-button

アコーディオン機能についても、こちらが参考になるかと。
https://stackoverflow.com/questions/49760264/how-can-i-create-expanded-panel

Comments

[Yariii]

ご回答ありがとうございます！！
参考リンクありがとうございます。こちらで組んでみようと思います。m_ _m