Flutter & Dart Tips - Week In Review #8
Tags: beginners, codenewbie, flutter, dart
Published: 2021-08-01 01:48:51

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.

```dart

...

      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

```dart

...

      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

```dart

...

    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

```dart

...

  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.

```dart

...

      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.

```dart

    ElevatedButton(
    style: ElevatedButton.styleFrom(
        shape: CircleBorder(), padding: EdgeInsets.all(30)),
    child: Icon(
      Icons.add,
      size: 50,
    ),
    onPressed: () {},
  	)


```



See you next week. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a> & <a href="https://apple.co/3hZXoBx">Apple Store</a>

<span>Cover image  <a href="https://unsplash.com/@ethanrobertson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ethan Robertson</a> on <a href="https://unsplash.com/s/photos/summer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a> </span>