Last active
August 5, 2023 17:17
-
-
Save obumnwabude/9768f552db6d391a3dfc5f6ce3e87253 to your computer and use it in GitHub Desktop.
Improve Flutter Forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class PasswordForm extends StatefulWidget { | |
const PasswordForm({super.key}); | |
@override | |
State<PasswordForm> createState() => _PasswordFormState(); | |
} | |
class _PasswordFormState extends State<PasswordForm> { | |
bool _isPasswordObscure = true; | |
final _passwordController = TextEditingController(); | |
void _toggleObscurePassword() => | |
setState(() => _isPasswordObscure = !_isPasswordObscure); | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar(title: const Text('Password Form')), | |
body: Center( | |
child: Form( | |
autovalidateMode: AutovalidateMode.onUserInteraction, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
ConstrainedBox( | |
constraints: const BoxConstraints(maxWidth: 256), | |
child: TextFormField( | |
controller: _passwordController, | |
decoration: InputDecoration( | |
hintText: 'Create Password', | |
suffixIcon: InkWell( | |
onTap: _toggleObscurePassword, | |
child: Icon(_isPasswordObscure | |
? Icons.visibility | |
: Icons.visibility_off), | |
)), | |
obscureText: _isPasswordObscure, | |
validator: (value) { | |
if (value == null || value.isEmpty) { | |
return 'Password is required.'; | |
} else if (value.characters.length < 8) { | |
return 'Password should be at least 8 characters.'; | |
} else { | |
return null; | |
} | |
}, | |
), | |
), | |
const SizedBox(height: 24), | |
ConstrainedBox( | |
constraints: const BoxConstraints(maxWidth: 256), | |
child: TextFormField( | |
decoration: InputDecoration( | |
hintText: 'Confirm Password', | |
suffixIcon: InkWell( | |
onTap: _toggleObscurePassword, | |
child: Icon(_isPasswordObscure | |
? Icons.visibility | |
: Icons.visibility_off), | |
)), | |
obscureText: _isPasswordObscure, | |
obscuringCharacter: '*', | |
validator: (value) { | |
if (value == null || value.isEmpty) { | |
return 'Confirm Password is required.'; | |
} else if (value != _passwordController.text) { | |
return 'Passwords do not match.'; | |
} else { | |
return null; | |
} | |
}, | |
), | |
), | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class SimpleForm extends StatefulWidget { | |
const SimpleForm({super.key}); | |
@override | |
State<SimpleForm> createState() => _SimpleFormState(); | |
} | |
class _SimpleFormState extends State<SimpleForm> { | |
var _formKey = GlobalKey<FormState>(); | |
final _nameController = TextEditingController(); | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar(title: const Text('Simple Form')), | |
body: Center( | |
child: Form( | |
key: _formKey, | |
autovalidateMode: AutovalidateMode.onUserInteraction, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
ConstrainedBox( | |
constraints: const BoxConstraints(maxWidth: 256), | |
child: TextFormField( | |
controller: _nameController, | |
decoration: | |
const InputDecoration(hintText: 'Enter Your Name'), | |
maxLength: 20, | |
validator: (value) { | |
if (value == null || value.isEmpty) { | |
return 'Name is required.'; | |
} else if (value.characters.length < 3) { | |
return 'Name should be at least 3 characters.'; | |
} else { | |
return null; | |
} | |
}, | |
), | |
), | |
const SizedBox(height: 24), | |
ElevatedButton( | |
onPressed: () { | |
if (_formKey.currentState!.validate()) { | |
ScaffoldMessenger.of(context).showSnackBar(SnackBar( | |
content: Text("{'name': ${_nameController.text}}"))); | |
setState(() { | |
_nameController.text = ''; | |
_formKey = GlobalKey<FormState>(); | |
}); | |
} | |
}, | |
child: const Text('Submit'), | |
) | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment