How can i show text fields based on user inputs when the button is pressed?

You can find in the screen shot i'm trying to do.

here is the code:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textController = TextEditingController();
    void showTextFields(){
      TextField();
    }
    return Scaffold(
      appBar: AppBar(
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 50,),
            Padding(
              padding: const EdgeInsets.only(left: 20, right: 20.0),
              child: TextField(
                  controller: textController,
                  decoration: InputDecoration(
                    labelText: 'Text fields number'
                  ),
              ),
            ),
            SizedBox(height: 10,),
            ElevatedButton(
              onPressed: showTextFields, 
              child: Text('Press to show text field')
              ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

I hope my help will be of use to you, greetings

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _parentKey = GlobalKey();
  int countItems = 0;
  late TextEditingController textController;
  @override
  void initState() {
    super.initState();
    textController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    void showTextFields() {
      setState(() {
        countItems = int.parse(textController.text);
      });
    }

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 20, right: 20.0),
              child: TextField(
                controller: textController,
                decoration:
                    const InputDecoration(labelText: 'Text fields number'),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            ElevatedButton(
                onPressed: showTextFields,
                child: const Text('Press to show text field')),
            const SizedBox(
              height: 10,
            ),
            (countItems > 0)
                ? Flexible(
                    child: ListView.builder(
                        itemCount: countItems,
                        itemBuilder: (BuildContext context, int index) {
                          return TextField(
                            style: TextStyle(color: Colors.white),
                            cursorColor: Colors.white,
                            textAlign: TextAlign.center,
                            decoration: InputDecoration(
                              hintText: "TextField "   index.toString(),
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          );
                        }),
                  )
                : const SizedBox()
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You can this code, Firstly you must to change stateless to StatefullWidget and then examine to blow code

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

  @override
  _ShowTextFieldValueState createState() => _ShowTextFieldValueState();
}

class _ShowTextFieldValueState extends State<ShowTextFieldValue> {
  @override
  Widget build(BuildContext context) {
  final textController = TextEditingController();
  String value = "";
    
    return Scaffold(
      appBar: AppBar(
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 50,),
            Padding(
              padding: const EdgeInsets.only(left: 20, right: 20.0),
              child: TextField(
                  controller: textController,
                  decoration: InputDecoration(
                    labelText: 'Text fields number'
                  ),
              ),
            ),
            SizedBox(height: 200,width: 200,

            child: Center( child: Text(value)),
            ),
            ElevatedButton(
              onPressed: (){
                setState(() {
                  value= textController.text;
                });
              }, 
              child: Text('Press to show text field')
              ),
          ],
        ),
      ),
    );
  }
}