【Flutter】プルダウンリストで選択しただけのtextFieldを表示させたい

Question

前提

プルダウンリストで所定の数値を選択後その数値と同じ数分だけのテキスト入力エリアを表示させたいです。

実現したいこと

前提の通りですが、プルダウンリストで指定した数値分だけ非同期でテキスト入力欄を表示させたいです。
例えば
・プルダウンのデフォルト値が1だとしたらテキスト入力エリアを1つ表示
・プルダウンの値を3に変更したらテキスト入力エリアを3つ表示
・プルダウンの値を3から1に変更したらテキスト入力エリアを1つに減らす（この時値を保持可能であれば保持したいです）

発生している問題・エラーメッセージ

エラーメッセージなどは特に出ていません

該当のソースコード

細かい部分は省略しています。

class _hogehogeCreateState extends State<_hogehogeCreate> {
  String userSelectedButton = '2';
  String firstLabel = '';
  String secondLabel = '';

  var selectedValue = '2';
  final lists = <String>['2', '3', '4'];

  void userSelect(String userSelected){
    selectedValue = userSelected;
    textFieldSelected();
    setState(() {});
  }

  void textFieldSelected(){
    if(selectedValue == 2){
　　　//ここの条件が合致したら TextField を表示させるものと予想しています。
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          DropdownButton<String>(
            value: selectedValue,
            items: lists
              .map((String list) =>
                DropdownMenuItem(value: list, child: Text(list)))
              .toList(),
            onChanged: (String? value) {
              setState(() {
                selectedValue = value!;
              });
            },
          ),
          Text(selectedValue),
        ],
      ),
    );

試したこと

onChangedに if を指定してみましたが駄目でした。

Answer 1

お二人ともご回答ありがとうございます。

ta.fuさんに教えていただいたコードを完コピしたら想定した動きができました。
プログラミングはまだまだ慣れていなくてコードがどういう意味を成しているか理解できていませんが、勉強しつつ理解していきます。

Answer 2

とりあえずこれで期待通りの挙動になっていますでしょうか?
参考にしてみてください。
とりあえず動くものを書いただけなので、TextEditingControllerのdisposeやレイアウト、装飾など必要なら追加してください。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var selectedValue = '2';
  final lists = <String>['2', '3', '4'];
/*
  void userSelect(String userSelected) {
    selectedValue = userSelected;
    textFieldSelected();
    setState(() {});
  }

  void textFieldSelected() {
    if (selectedValue == 2) {
      //ここの条件が合致したら TextField を表示させるものと予想しています。
    }
  }
  */

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<String>(
              value: selectedValue,
              items: lists
                  .map((String list) =>
                      DropdownMenuItem(value: list, child: Text(list)))
                  .toList(),
              onChanged: (String? value) {
                setState(() {
                  selectedValue = value!;
                });
              },
            ),
            Text(selectedValue),

            ArbitraryNumberOfTextFields(numOfTF:int.parse(selectedValue,),)

          ],
        ),
      ),
    );
  }
}

class ArbitraryNumberOfTextFields extends StatefulWidget {
  const ArbitraryNumberOfTextFields({
    Key? key,
    required this.numOfTF,
  }) : super(key: key);

  final int numOfTF;

  @override
  State<ArbitraryNumberOfTextFields> createState() => _ArbitraryNumberOfTextFieldsState();
}

class _ArbitraryNumberOfTextFieldsState extends State<ArbitraryNumberOfTextFields> {
  TextEditingController ctrl1 = TextEditingController();
  TextEditingController ctrl2 = TextEditingController();
  TextEditingController ctrl3 = TextEditingController();
  TextEditingController ctrl4 = TextEditingController();

  //↓結局このケースではkeyは不要だった。
  // ValueKey<String> key1 = ValueKey('1');
  // ValueKey<String> key2 = ValueKey('2');
  // ValueKey<String> key3 = ValueKey('3');
  // ValueKey<String> key3 = ValueKey('4');

  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
        TextField(
          //key:key1,
          controller: ctrl1,
        ),
        TextField(
          //key:key2,
          controller: ctrl2,
        ),
        Visibility(
          visible:widget.numOfTF >= 3,
          child: TextField(
            //key:key3,
            controller: ctrl3,
          ),
        ),
        Visibility(
          visible: widget.numOfTF == 4,
          child: TextField(
            //key:key4,
            controller: ctrl4,
          ),
        ),
      ],
    );
  }
}

Answer 3

あなたがどのようなUIを想像しているかは不明ですが、こんな感じですか？

class _hogehogeCreateState extends State<_hogehogeCreate> {
  int selectedValue = 2;
  final lists = <int>[2, 3, 4];

  void textChanged(int index, String value) {
    debugPrint("$index $value");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          DropdownButton<int>(
            value: selectedValue,
            items: lists
                .map((int list) =>
                    DropdownMenuItem(value: list, child: Text(list.toString())))
                .toList(),
            onChanged: (int? value) {
              setState(() {
                selectedValue = value!;
              });
            },
          ),
          Text(selectedValue.toString()),
          Column(
              children: List.generate(
                  selectedValue,
                  (index) => TextField(
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            labelText: "Name: $index"),
                        onChanged: (value) => textChanged(index, value),
                      ))),
        ],
      ),
    );
  }
}

「実現したいこと」に記述されている内容と提示されたコードとの関連性が薄く、質問をもし書くとしたらプルダウンの値が1の時はこんな形のGUI(実装)で3の時はこんな形のGUI(実装)にしたいのです、という感じだったらよかったのにとは思う。