Flutter & Dart Tips - Week In Review #12
Tags: flutter, dart, codenewbie, beginners
Published: 2021-08-28 23:40:01


Hello Reader,

Welcome to the 12th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.

![12](https://media0.giphy.com/media/S6NfXNzmwrBwAseDyf/giphy.gif?cid=ecf05e47mp561cn5888zevo4y7r8bl6f2zherleqpdhnx2zw&rid=giphy.gif&ct=g)

1- Use the Spacer Widget to create spacing between widgets.

```dart

...
		Container(
          color: Colors.red,
          height: 50,
          width: 50,
        ),
        Spacer(),
        Container(
          color: Colors.green,
          height: 50,
          width: 50,
        ),
        Spacer(),
...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=f7646609316b5daca866e6f662e7ba25&null_safety=true">here</a> 

![Spacer](https://i.imgur.com/qkTx5DX.gif)



2- FractionallySizedBox Widget is a widget that sizes its child to a fraction of the total available space.

```dart

...
      FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.25,
        child: RaisedButton(
          child: Text('Click Me'),
          color: Colors.red,
          textColor: Colors.white,
          onPressed: () {},
        ),
      ),
...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=d219fd156398e23e943a45398960cc9e&null_safety=true">here</a> 

![FractionallySizedBox](https://i.imgur.com/NZy3axj.gif)

3- Use the AnimatedSwitcher widget to create animation when switching between two widgets.

```dart

...
          AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(child: child, scale: animation);
            },
            child: Text(
              '$_count',
              key: ValueKey<int>(_count),
              style: Theme.of(context).textTheme.headline4,
            ),
          ),
...

```


> Try it on DartPad <a href="https://dartpad.dev/?id=42b9a6bda83c007403ed305332cbe4b1&null_safety=true">here</a> 

![AnimatedSwitcher](https://i.imgur.com/QN4fPlu.gif)

4- Use the CupertinoAlertDialog to create an iOS-style widget that informs the user about situations that require acknowledgement.

```dart

...
        CupertinoAlertDialog(
              title: Text("This is the title"),
              content: Text("This is the content"),
              actions: [
                // Close the dialog
                // You can use the CupertinoDialogAction widget instead
                CupertinoButton(
                    child: Text('Cancel'),
                    onPressed: () {
                      Navigator.of(ctx).pop();
                    }),
                CupertinoButton(
                  child: Text('I agree'),
                  onPressed: () {
                    // Do something
                    print('I agreed');

                    // Then close the dialog
                    Navigator.of(ctx).pop();
                  },
                )
              ],
            )
...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=feba39bdd3a04d1c288cd5e2f89bf48c&null_safety=true">here</a> 

![CupertinoAlertDialog](https://i.imgur.com/UUs2EO1.gif)

5- Use CupertinoButton Widget to create an iOS-style button that Takes in a text or an icon that fades out and in on touch.

```dart

...
        Container(
          child: Center(
            child: CupertinoButton(
              onPressed: () {
                // Todo
              },
              child: Text("CupertinoButton Widget"),
            ),
          ),
        ),
        Container(
          child: Center(
            child: CupertinoButton.filled(
              onPressed: () {},
              child: Text("CupertinoButton Widget"),
            ),
          ),
        ),
...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=0e04c1d6280046a45ea789a80bc297a5&null_safety=true">here</a> 

![CupertinoButton](https://i.imgur.com/G4AjZKw.gif)

6- The CupertinoActionSheet is an ios-themed widget that has action sheets design specifications.

```dart

...

           CupertinoActionSheet(
              title: Text(
                "Flutter dev",
                style: TextStyle(fontSize: 30),
              ),
              message: Text(
                "Select any action ",
                style: TextStyle(fontSize: 15.0),
              ),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: Text("Action 1"),
                  isDefaultAction: true,
                  onPressed: () {
                    print("Action 1 is been clicked");
                  },
                ),
                CupertinoActionSheetAction(
                  child: Text("Action 2"),
                  isDestructiveAction: true,
                  onPressed: () {
                    print("Action 2 is been clicked");
                  },
                )
              ],
              cancelButton: CupertinoActionSheetAction(
                child: Text("Cancel"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            );
...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=77144ea31ab1f0211e5e715bf6ef5582&null_safety=true">here</a> 

![CupertinoActionSheet](https://i.imgur.com/0xzxy4h.gif)

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/@coreymoconnell1?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">corey oconnell</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>