How to show TextField when button is pressed? - flutter

Question

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')
),
],
),
),
);
}
}

Answer 1

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()
],
),
),
);
}
}

Answer 2

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')
),
],
),
),
);
}
}