Add new text form field when button pressed? - flutter

Question

I have screen which have username field,
Here, When i press the submit button add new TextFormField below the UserName field so how i can do this?
Code as Below.
return Container(
child: Form(
key: _formKey,
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
child: Text("Reset Password"),
),
Container(
child: Center(
child: Expanded(
child: Text(
"Enter your username below to recieve password reset instruction",
textAlign: TextAlign.center,
maxLines: 2,
),
),
),
),
TextFormField(
controller: userNameController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "User Name",
),
focusNode: fnField1,
validator: (value) {
if (value?.isEmpty == true) {
return AppLocalizations.of(context)!.valEnterUserName;
}
return null;
},
),
Container(
constraints: const BoxConstraints(minWidth: double.infinity),
child: ElevatedButton(
onPressed: () async {},
child: Text("Submit"),
),
),
],
),
),
);
Please help me that how i can do this.

Answer 1

In such a case we can use a StatefulWidget to set a _displayNewTextField boolean to true once the button is pressed:
bool _displayNewTextField = false;
...
Container(
constraints: const BoxConstraints(minWidth: double.infinity),
child: ElevatedButton(
onPressed: () async {
setState(() {
_displayNewTextField = true;
});
},
child: const Text("Submit"),
),
),
And use a Visibility Widget to show the new TextField accordingly:
Visibility(
visible: _displayNewTextField,
child: TextFormField(
controller: newTextFieldController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
labelText: "User Name",
),
),
),
A full example is reported below:
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _displayNewTextField = false;
TextEditingController newTextFieldController = TextEditingController();
TextEditingController userNameController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Form(
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
child: const Text("Reset Password"),
),
const Center(
child: Expanded(
child: Text(
"Enter your username below to recieve password reset instruction",
textAlign: TextAlign.center,
maxLines: 2,
),
),
),
TextFormField(
controller: userNameController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
labelText: "User Name",
),
),
Visibility(
visible: _displayNewTextField,
child: TextFormField(
controller: newTextFieldController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.text,
decoration: const InputDecoration(
labelText: "User Name",
),
),
),
Container(
constraints: const BoxConstraints(minWidth: double.infinity),
child: ElevatedButton(
onPressed: () async {
setState(() {
_displayNewTextField = true;
});
},
child: const Text("Submit"),
),
),
],
),
),
),
);
}
}