【Dart】ラジオボタンを選択するとテキストフィールドが表示されるようにしたい

Question

解決したい課題

「はい」のRadioButtonを選択するとTextFieldが表示されるようにしたいです。

コード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyAppPage(),
    );
  }
}

class MyAppPage extends StatefulWidget {
  RadioPage createState() => RadioPage();
}

class RadioPage extends State<MyAppPage> {
  String groupValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Row(
          children: <Widget>[
            Radio(
                value: 'はい',
                groupValue: groupValue,
                onChanged: (value) {
                  setState(() {
                    this.groupValue = value;
                  });
                }),
            Text(
              'はい',
            ),
            Radio(
                value: 'いいえ',
                groupValue: groupValue,
                onChanged: (value) {
                  setState(() {
                    this.groupValue = value;
                  });
                }),
            Text(
              'いいえ',
            ),
          ],
        ),
      ),
    );
  }
  Widget _hogemaru() {
    if (groupValue == 'はい') {
      return TextField(
          decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'テキスト入力',
      ));
    }
  }
}

試したこと

Container内のあらゆるところにTextFieldの記述(_hogemaru)を入れてみたけれどエラーになったり、いろいろ試したりしているのですがイメージとは違う結果になってしまいます。

どなたかアドバイスいただけないでしょうか。
よろしくお願いいたします。

Answer 1

こんな感じでしょうか。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyAppPage(),
    );
  }
}

class MyAppPage extends StatefulWidget {
  RadioPage createState() => RadioPage();
}

class RadioPage extends State<MyAppPage> {
  String groupValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Column(
          children: [
            Row(
              children: <Widget>[
                Radio(
                    value: 'はい',
                    groupValue: groupValue,
                    onChanged: (value) {
                      print("????$value");
                      setState(() {
                        this.groupValue = value;
                        print("????????$groupValue");
                      });
                    }),
                Text(
                  'はい',
                ),
                Radio(
                    value: 'いいえ',
                    groupValue: groupValue,
                    onChanged: (value) {
                      print("????$value");
                      setState(() {
                        this.groupValue = value;
                        print("????????$groupValue");
                      });
                    }),
                Text(
                  'いいえ',
                ),
              ],
            ),
            if(groupValue=='はい')_hogemaru(),
          ],
        ),
      ),
    );
  }
  Widget _hogemaru() {
    if (groupValue == 'はい') {
      return TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'テキスト入力',
          ));
    }
  }
}

//コンソール
flutter: ????いいえ
flutter: ????????いいえ
flutter: ????はい
flutter: ????????はい
flutter: ????いいえ
flutter: ????????いいえ

Comments

[narururu]

ご回答ありがとうございます。morimanさん☺

想定通りの動作です！ありがとうございます！
if(groupValue=='はい')_hogemaru(),と記述すれば上手くいくんですね????
そうすると、hogemaru()はif (groupValue == 'はい') {}の記述削除してTextFieldもWidgetのみで大丈夫ですね☺
勉強になります。
ご丁寧にアドバイスしていただき本当にありがとうございました！助かりました！