Hello Reader,
This post is the 8th of the Flutter & Dart Tips series. My goal is to have at least 100 tips in this series. Do you know how many I have shared with you so far?
1- You can use the validator widget to validate the Form Inputs in your submit function and apply the validation condition on each TextFormField.
...
void _submit() {
final isValid = _formKey.currentState.validate();
if (!isValid) {
return;
}
_formKey.currentState.save();
}
...
Form(
key: _formKey,
child: Column(
children: [
Text(
"Form-Validation",
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
),
//styling
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {
//Validator
},
validator: (value) {
if (value.isEmpty ||
!RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(value)) {
return 'Enter a valid email!';
}
return null;
},
),
//box styling
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
//text input
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {},
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Enter a valid password!';
}
return null;
},
),
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
RaisedButton(
padding: EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 15.0,
),
child: Text(
"Submit",
style: TextStyle(
fontSize: 24.0,
),
),
onPressed: () => _submit(),
)
],
),
),
...
2- Use the ListView to create a horizontal list by setting the scrollDirection parameter to Axis.horizontal
...
ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
height: 480.0,
width: 240.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/image1.png'),
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
),
Container(
height: 480.0,
width: 240.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/image2.webp'),
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
),
Container(
height: 480.0,
width: 240.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/image3.jpg'),
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
),
Container(
height: 480.0,
width: 240.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/image4.jpg'),
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
),
],
),
...
3- Center the FloatingActionButton by setting the floatingActionButtonLocation parameter as below
...
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.settings_voice),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
...
4- You can provide an action label in SnackBar to act when pressed on it as below
...
final snackBar = SnackBar(
content: const Text('Amazing SnackBar!'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Do something.
},
),
);
...
5- Use the barrierDismissible property to prevent dismissing the AlertDialog when the user taps on the screen outside the alert box.
...
showDialog<String>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) => AlertDialog(
title: const Text('This is a title'),
content: const Text('This is a description'),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
),
),
...
6- You can create a circular icon button using ElevatedButton. Check the following example.
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: CircleBorder(), padding: EdgeInsets.all(30)),
child: Icon(
Icons.add,
size: 50,
),
onPressed: () {},
)
See you next week. 👋🏻
Follow me on Twitter for more tips about #coding, #learning, #technology...etc.
Check my Apps on Google Play & Apple Store
Cover image Ethan Robertson on Unsplash
Top comments (0)