【Flutter】特定のラジオボタンを押下時のみ、TextFieldを表示したい。

前提

支払方法の選択をラジオボタンでしてもらい
「クレジットカード」が選択された時のみ、「詳細」を入力するTextFieldを表示したいです。
現在のコードでは「現金」と「クレジットカード」の両方に反応してしまい、
現金の時にもTextFieldが表示されてしまいます。

実現したいこと

・「クレジットカード」が選択された時のみ「詳細」のTextFieldを表示したい。
※「現金」のラジオボタンを選択したときは何も表示されないようにしたい。

該当のソースコード

Dart
1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(const MyApp());
5}
6
7class MyApp extends StatelessWidget {
8  const MyApp({Key? key}) : super(key: key);
9
10  @override
11  Widget build(BuildContext context) {
12    return MaterialApp(
13      title: '支払い',
14      theme: ThemeData(
15        primarySwatch: Colors.orange,
16      ),
17      home: const MyHomePage(),
18    );
19  }
20}
21
22class MyHomePage extends StatefulWidget {
23  const MyHomePage({Key? key}) : super(key: key);
24
25  @override
26  State<MyHomePage> createState() => _MyHomePageState();
27}
28
29class _MyHomePageState extends State<MyHomePage> {
30
31  String? _payment = '現金';
32
33  void _handleRadioButton(String? payment) async => setState(() {
34    _payment = payment ?? '現金';
35  });
36
37  bool isShow = true;
38
39  @override
40  Widget build(BuildContext context) {
41    return Scaffold(
42        appBar: AppBar(
43          leading: IconButton(
44            icon: Icon(
45              Icons.arrow_back,
46              color: Colors.black,
47            ),
48            onPressed: () {},
49          ),
50          title: Text(
51            '支出',
52            style: TextStyle(fontSize: 25),
53          ),
54          centerTitle: true,
55        ),
56        body: SingleChildScrollView(
57          child: Column(children: <Widget>[
58            Container(
59              width: 300,
60              decoration: BoxDecoration(
61                  border: Border(
62                    bottom: BorderSide(),
63                  )),
64              margin: EdgeInsets.all(20),
65
66              child: Row(
67                mainAxisAlignment: MainAxisAlignment.spaceAround,
68                children: <Widget>[
69                  Row(
70                    children:<Widget>[
71                      Radio(
72                        activeColor: Colors.orange,
73                        value: '現金',
74                        groupValue: _payment,
75                        onChanged: (value) {
76                          setState(() {
77                            _payment = value!;
78                          });
79                        },
80                      ),
81                      Text('現金'),
82                    ],
83                  ),
84                  Row(
85                    children:<Widget>[
86                      Radio(
87                        activeColor: Colors.orange,
88                        value: 'クレジットカード',
89                        groupValue: _payment,
90                        onChanged: (value){
91                          setState(() {
92                            _payment = value!;
93                            isShow = !isShow;
94                          });
95                        },
96                      ),
97                      Text('クレジットカード'),
98                    ],
99                  ),
100                ],
101              ),
102            ),
103            Visibility(
104              visible: isShow,
105              child: Container(
106                width: 300,
107                decoration: BoxDecoration(
108                    border: Border(
109                      bottom: BorderSide(),
110                    )),
111                child: Row(
112                  mainAxisAlignment: MainAxisAlignment.center,
113                  children: <Widget>[
114                    Container(
115                      margin: EdgeInsets.all(15),
116                      child:  const Text(
117                        '詳細',
118                        style: TextStyle(fontSize: 15),
119                      ),
120                    ),
121                    SizedBox(
122                      width: 230,
123                      height: 40,
124                      child: TextField(
125                        decoration: InputDecoration(
126                          contentPadding: EdgeInsets.all(0),
127                          border: OutlineInputBorder(),
128                        ),
129                      ),
130                    ),
131                  ],
132                ),
133              ),
134            ), 
135          ]),
136        ));
137  }
138}
139

試したこと

・「現金」と「クレジットカード」のonChange部分の書き方を変えた
・2つのラジオボタンをWidget単位で切り離した
・「 bool isShow = true」をfalseに変更した。

上記以外にもたくさんのサイトを参照しながら解決に向けて模索しましたが、
そもそも表示されなくなってしまうか、挙動が変わらないかの2択で解決できませんでした。
何か解決策がありましたらご教示いただけますと幸いです。
よろしくお願いいたします。

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

Android Studio Dolphin | 2021.3.1

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず挙動に関しては下記のコードで良いでしょうか。

class _MyHomePageState extends State<MyHomePage> {

  String? _payment = '現金';

  void _handleRadioButton(String? payment) async => setState(() {
    _payment = payment ?? '現金';
  });

  bool get isShow {
    return _payment == 'クレジットカード' ? true : false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
            ),
            onPressed: () {},
          ),
          title: Text(
            '支出',
            style: TextStyle(fontSize: 25),
          ),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Column(children: <Widget>[
            Container(
              width: 300,
              decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(),
                  )),
              margin: EdgeInsets.all(20),

              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Row(
                    children:<Widget>[
                      Radio(
                        activeColor: Colors.orange,
                        value: '現金',
                        groupValue: _payment,
                        onChanged: (value) {
                          setState(() {
                            _payment = value!;
                          });
                        },
                      ),
                      Text('現金'),
                    ],
                  ),
                  Row(
                    children:<Widget>[
                      Radio(
                        activeColor: Colors.orange,
                        value: 'クレジットカード',
                        groupValue: _payment,
                        onChanged: (value){
                          setState(() {
                            _payment = value!;
                            //isShow = !isShow;//不要
                          });
                        },
                      ),
                      Text('クレジットカード'),
                    ],
                  ),
                ],
              ),
            ),
...

あとStringでやるよりも、

enum MethodOfPayment{
  cash,
  creditCard,
}

このようなenumでやった方がtypo時の実行時不具合が起こり得ないのでロバストで保守性も高いですね、みたいな話はあるんですかね。まあ一人でやってるならリスク管理も含めてどうにでも好きにしたらいいとは思いますが笑

あと見返していて気づきましたが、

return _payment == 'クレジットカード' ? true : false;

は

return _payment == 'クレジットカード';

でいいですよね笑

投稿2022/11/18 07:39

編集2022/11/18 09:21

moriman

総合スコア615

回答へのコメント

trainee_of_A

2022/11/21 00:29

ご回答いただいたにも関わらず、お返事が遅くなり申し訳ございません。 moriman様のおっしゃる通りにコードを変更したら望んだ挙動で動きました！ありがとうございます！ enumの記述につきましても大変勉強になりました。より使いやすいアプリにするためにも、moriman様の回答を踏まえて製作していきます。この度は誠にありがとうございました。

行動規範の内容に同意します