Flutter Text Validation in CupertinoTextField - ios

Question

I want to add some text validation to my CupertinoTextField but there's no validator for this Widget. How can I solve this?
I tried searching on the internet for some solutions but nothing came out.
CupertinoTextField(
prefix: Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
customIcon,
),
),
style: TextStyle(
fontSize: 30,
),
keyboardType: TextInputType.number,
maxLength: maxLength,
maxLines: 1,
maxLengthEnforced: true,
placeholder: placeholderText,
onChanged: onChangedFunction,
decoration: BoxDecoration(
border: Border.all(
width: 2.0,
color: CupertinoColors.inactiveGray,
),
borderRadius: BorderRadius.circular(32.0),
),
)

Answer 1

You need to use TextEditingController & perform the validation manually.
Basic validation for checking if the field is empty or not.
code:
TextEditingController _myPhoneField = TextEditingController();
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_myPhoneField.text.isEmpty) {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('error'),
content: Text('Phone Field is Empty'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('ok'))
],
);
});
} else {
// Validation passed
}
},
child: Text('submit'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoTextField(
clearButtonMode: OverlayVisibilityMode.editing,
controller: _myPhoneField, // Add this
prefix: Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
CupertinoIcons.phone_solid,
),
),
style: TextStyle(
fontSize: 30,
),
keyboardType: TextInputType.number,
maxLength: 10,
maxLines: 1,
maxLengthEnforced: true,
placeholder: 'Enter Phone',
onChanged: (v) {
print(v);
},
decoration: BoxDecoration(
border: Border.all(
width: 2.0,
color: CupertinoColors.inactiveGray,
),
borderRadius: BorderRadius.circular(32.0),
),
),
],
),
);
}

Answer 2

This is not about CupertinoTextField, but if you still want to validate input on Cupertino, you can use the CupertinoTextFormFieldRow widget.
CupertinoTextFormFieldRow(
controller: _usernameController,
validator: (value) {
if (value!.isEmpty || value.length < 4) {
return 'Please enter a valid username.';
}
return null;
},
decoration: BoxDecoration(
color: Colors.black12,
border: Border.all(
color: Colors.black12,
),
borderRadius: BorderRadius.circular(8.0),
),
)