DEV Community

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

Posted on

2

Flutter & Dart Tips - Week In Review #11

Hello Reader,

In this 11th post of the Flutter & Dart Tips series, I will add six more tips to the 60+ tips I shared since June of this year.

despicable-me-minions

1- The SlideTransition Widget animates the position of a widget relative to its normal position.


    SlideTransition(
      position: _offsetAnimation,
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: FlutterLogo(size: 150.0),
      ),
    )

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

SlideTransition

2- The FadeTransition Widget fades a widget in and out by animating its opacity.


      FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), 
                             child: FlutterLogo(),),
      ),

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

FadeTransition

3- The AnimatedCrossFade Widget cross-fades between two given children and animates itself between their sizes.


        AnimatedCrossFade(
              crossFadeState: _isFirst
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              duration: const Duration(seconds: 1),
              firstCurve: Curves.easeInCubic,
              secondCurve: Curves.easeInCirc,
              firstChild: const FlutterLogo(
                  style: FlutterLogoStyle.horizontal, size: 100.0),
              secondChild: const FlutterLogo(
                  style: FlutterLogoStyle.stacked, size: 100.0),
        )

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

AnimatedCrossFade

4- The CupertinoContextMenu Widget is a full-screen modal route that opens when the child is long-pressed.


        CupertinoContextMenu(
            child: Container(
              color: Colors.red,
            ),
            actions: <Widget>[
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
        ),

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

CupertinoContextMenu

5- The BackdropFilter Widget applies a filter to the existing painted content.


          BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 10.0,
                sigmaY: 10.0,
              ),
              child: Container(
                color: Colors.black.withOpacity(0.2),
              ),
          ),

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

BackdropFilter

6- The RotatedBox Widget rotates its child by an integral number of quarter turns.


      RotatedBox(
        quarterTurns: 2,
        child: Text(
          'This is a Roated Text ',
          style: TextStyle(
            fontSize: 55,
            fontWeight: FontWeight.bold,
            letterSpacing: 0,
          ),
        ),
      )


Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RotatedBox

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 Mufid Majnun on Unsplash

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)