How to add validation in dynamic textformfield - flutter

Question

I want to add validation in dynamic textformfield....i have added validation as per my knowledge but its not working properly.....when i created 4-5 textformfield and erase data from previous field its doesn't show any error when i click on submit button......validation is working properly only for currrent textformfield .....its not working properly for previous textformfield ....how can i slove it???
class PurchaseTicket extends StatefulWidget {
#override
int eventID;
PurchaseTicket(this.eventID);
_PurchaseTicketState createState() => _PurchaseTicketState();
}
class _PurchaseTicketState extends State<PurchaseTicket> {
// List<GlobalKey<FormState>> _formKeys = [GlobalKey<FormState>()];
//final _formKey = GlobalKey<FormState>();
List<TextEditingController> _controllers = new List();
List<TextEditingController> _controllers1 = new List();
List<FocusNode> _FocusNode1 = new List();
List<FocusNode> _FocusNode2 = new List();
FocusNode myFocusNode1 = new FocusNode();
FocusNode myFocusNode2 = new FocusNode();
TextEditingController mobileController = TextEditingController();
TextEditingController nameController = TextEditingController();
ScrollController controller = ScrollController();
var _count = 0;
List<Map<String, dynamic>> _values;
_register(BuildContext context) async {
bool validname;
bool validmobile;
for (var i = 0; i <= _controllers.length - 1; i++) {
print(_controllers[i].text.runtimeType);
if (_controllers[i].text.trim() == "" || _controllers[i].text == null) {
validname = false;
} else {
validname = true;
}
}
for (var i = 0; i <= _controllers1.length - 1; i++) {
if (_controllers1[i].text.trim() == '') {
validmobile = false;
} else {
validmobile = true;
}
}
if (nameController.text.trim() == '' || nameController.text.length < 1) {
showToast('Please Enter Name', context: context);
} else if (mobileController.text.trim() == '' ||
mobileController.text.length < 10) {
showToast('Enter Valid Mobile Number', context: context);
} else if (validname == false) {
showToast('Please Enter Name', context: context);
} else if (validmobile == false) {
showToast('Enter Valid Mobile Number', context: context);
} else {
print(
"$validmobile $validname ${nameController.text} ${mobileController.text}");
participateRegister(nameController.text, mobileController.text,
_controllers, _controllers1, widget.eventID, context);
}
}
// else if (mobileController.text.isNotEmpty &&
// nameController.text.isNotEmpty) {
// for (int i = 0; i < _controllers.length; i++) {
// if (validmobile = false) {
// showToast('Please Enter Name', context: context);
// }
// }
// } else if (mobileController.text.isNotEmpty &&
// nameController.text.isNotEmpty) {
// for (int i = 0; i < _controllers1.length; i++) {
// if (validmobile == false) {
// showToast('Enter Valid Mobile Number', context: context);
// }
// }
// }
// }
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFfbf0d4),
body: SingleChildScrollView(
child: Stack(children: [
Container(
height: MediaQuery.of(context).size.height * .50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
//image: NetworkImage(widget.eventData.splitImage[0]),
image: ExactAssetImage("assets/images/Group 4.png"),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.29,
),
height: MediaQuery.of(context).size.height * .7,
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage("assets/images/body shape.png"),
fit: BoxFit.fill,
),
),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.03,
),
child: InkWell(
child: new IconButton(
icon: new Icon(
Icons.arrow_back,
size: 20,
),
color: Colors.white,
onPressed: () => {Navigator.pop(context)}),
),
),
Padding(
padding: const EdgeInsets.only(
left: 30,
right: 30,
),
child: Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.width * .5),
child: Column(
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 10,
child: Container(
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(
20.0) // <--- border radius here
),
),
child: Column(
children: [
SizedBox(
//height: 10,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * .71,
height:
MediaQuery.of(context).size.height * .085,
child: new TextFormField(
controller: nameController,
focusNode: myFocusNode1,
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.text,
decoration: InputDecoration(
fillColor: Colors.white,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFa5a5a5)),
),
border: UnderlineInputBorder(),
labelText: 'Name',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: myFocusNode1.hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
),
),
),
SizedBox(
// height: MediaQuery.of(context).size.height * .013,
),
Container(
width: MediaQuery.of(context).size.width * .71,
height: MediaQuery.of(context).size.height * .085,
child: new TextFormField(
maxLength: 10,
controller: mobileController,
focusNode: myFocusNode2,
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.number,
decoration: InputDecoration(
counterText: '',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5)),
),
fillColor: Colors.white,
border: UnderlineInputBorder(),
labelText: 'Mobile No',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: myFocusNode2.hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
validator: (value) {
if (value.length < 10 && value.isEmpty) {
return "Atleast 10 digit required";
}
return null;
},
),
),
SizedBox(
height: 10,
),
],
),
),
),
ListView.builder(
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: _count,
itemBuilder: (context, index) {
print(index);
return _row(index);
},
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
child: Icon(
Icons.add,
color: Colors.red,
size: 35,
),
backgroundColor: Color(0xFF9a7210),
onPressed: () async {
_controllers.add(new TextEditingController());
_controllers1.add(new TextEditingController());
_FocusNode1.add(new FocusNode());
_FocusNode2.add(new FocusNode());
// _formKeys.add(new GlobalKey<FormState>());
setState(() {
_count++;
});
},
),
],
),
SizedBox(
height: 20,
),
Center(
child: GestureDetector(
onTap: () {
_register(context);
},
child: Container(
height: 70,
width: 260,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
const Color(0xFFb48919),
const Color(0xFF9a7210),
],
),
border: Border.all(color: Colors.white, width: 4),
borderRadius: BorderRadius.all(Radius.circular(
70.0) // <--- border radius here
),
),
child: Center(
child: Text("Submit",
style: TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: 1,
fontSize: 30,
color: Colors.white)),
),
),
),
),
SizedBox(
height: 30,
)
],
),
),
),
]),
));
}
_row(int index) {
return Column(
children: [
Row(
children: [
Expanded(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 10,
child: Container(
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(
20.0) // <--- border radius here
),
),
child: Column(
children: [
SizedBox(
// height: 10,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * .71,
height: MediaQuery.of(context).size.height * .085,
child: new TextFormField(
autofocus: false,
controller: _controllers[index],
focusNode: _FocusNode1[index],
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.text,
decoration: InputDecoration(
fillColor: Colors.white,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Color(0xFFa5a5a5)),
),
border: UnderlineInputBorder(),
labelText: 'Name',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: _FocusNode1[index].hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
),
),
),
SizedBox(
//height: MediaQuery.of(context).size.height * .013,
),
Container(
width: MediaQuery.of(context).size.width * .71,
height: MediaQuery.of(context).size.height * .085,
child: new TextFormField(
maxLength: 10,
autofocus: false,
controller: _controllers1[index],
focusNode: _FocusNode2[index],
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.number,
decoration: InputDecoration(
counterText: '',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: const Color(0xFFa5a5a5)),
),
fillColor: Colors.white,
border: UnderlineInputBorder(),
labelText: 'Mobile No',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: _FocusNode2[index].hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
),
),
SizedBox(
height: 10,
),
],
),
),
),
),
],
),
SizedBox(
height: 30,
)
],
);
}
}

Answer 1

Use Form , Here is the Example For you:
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
GlobalKey<FormState> formKey = new GlobalKey();
String formFieldValue;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Form(
key: formKey,
child: Column(
children: [
TextFormField(
validator: (input) {
if (input.isEmpty) {
return 'Please type something';
}
return null;
},
onSaved: (input) => formFieldValue = input,
),
RaisedButton(
onPressed: submitForm,
child: Text(
'Submit'
),
)
],
),
)
);
}
submitForm() {
final formState = formKey.currentState;
if (formState.validate()) {
formState.save();
// then do something
}
}
}

Answer 2

Please follow below tutorial which Flutter team suggest to use for validation.
You can just put all text fields in a form and validate the all fields anytime.
https://flutter.dev/docs/cookbook/forms/validation