DEV Community

Cover image for Flutter & Dart Tips - Week In Review #8
Offline Programmer
Offline Programmer

Posted on

Flutter & Dart Tips - Week In Review #8

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(),
              )
            ],
          ),
        ),

...

Enter fullscreen mode Exit fullscreen mode

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,
            ),
          ),
        ],
      ),

...

Enter fullscreen mode Exit fullscreen mode

3- Center the FloatingActionButton by setting the floatingActionButtonLocation parameter as below


...

    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.settings_voice),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

...

Enter fullscreen mode Exit fullscreen mode

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.
            },
          ),
        );

...

Enter fullscreen mode Exit fullscreen mode

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'),
            ),
          ],
        ),
      ),

...

Enter fullscreen mode Exit fullscreen mode

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: () {},
    )


Enter fullscreen mode Exit fullscreen mode

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)