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

前提

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

実現したいこと

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

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

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

該当のソースコード

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

Flutter
1class _hogehogeCreateState extends State<_hogehogeCreate> {
2  String userSelectedButton = '2';
3  String firstLabel = '';
4  String secondLabel = '';
5
6  var selectedValue = '2';
7  final lists = <String>['2', '3', '4'];
8
9  void userSelect(String userSelected){
10    selectedValue = userSelected;
11    textFieldSelected();
12    setState(() {});
13  }
14
15  void textFieldSelected(){
16    if(selectedValue == 2){
17　　　//ここの条件が合致したら TextField を表示させるものと予想しています。
18    }
19  }
20
21  @override
22  Widget build(BuildContext context) {
23    return Scaffold(
24      body: Column(
25        children: <Widget>[
26          DropdownButton<String>(
27            value: selectedValue,
28            items: lists
29              .map((String list) =>
30                DropdownMenuItem(value: list, child: Text(list)))
31              .toList(),
32            onChanged: (String? value) {
33              setState(() {
34                selectedValue = value!;
35              });
36            },
37          ),
38          Text(selectedValue),
39        ],
40      ),
41    );
42

試したこと

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

回答3件

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

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

投稿2022/09/27 01:13

pqjccz

総合スコア6

とりあえずこれで期待通りの挙動になっていますでしょうか?
参考にしてみてください。
とりあえず動くものを書いただけなので、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,
          ),
        ),
      ],
    );
  }
}

投稿2022/09/26 12:31

moriman

総合スコア615

ベストアンサー

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

dart
1class _hogehogeCreateState extends State<_hogehogeCreate> {
2  int selectedValue = 2;
3  final lists = <int>[2, 3, 4];
4
5  void textChanged(int index, String value) {
6    debugPrint("$index $value");
7  }
8
9  @override
10  Widget build(BuildContext context) {
11    return Scaffold(
12      body: Column(
13        children: <Widget>[
14          DropdownButton<int>(
15            value: selectedValue,
16            items: lists
17                .map((int list) =>
18                    DropdownMenuItem(value: list, child: Text(list.toString())))
19                .toList(),
20            onChanged: (int? value) {
21              setState(() {
22                selectedValue = value!;
23              });
24            },
25          ),
26          Text(selectedValue.toString()),
27          Column(
28              children: List.generate(
29                  selectedValue,
30                  (index) => TextField(
31                        decoration: InputDecoration(
32                            border: const OutlineInputBorder(),
33                            labelText: "Name: $index"),
34                        onChanged: (value) => textChanged(index, value),
35                      ))),
36        ],
37      ),
38    );
39  }
40}