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)