DEV Community

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

Posted on

Flutter & Dart Tips - Week In Review #12

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

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


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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Spacer

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


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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

FractionallySizedBox

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


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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

AnimatedSwitcher

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


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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

CupertinoAlertDialog

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.


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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

CupertinoButton

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


...

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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

CupertinoActionSheet

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 corey oconnell on Unsplash

Discussion (1)

Collapse
nombrekeff profile image
Keff

Nice tips! I did not know about the Spacer widget. So many widgets I can't keep up lol!