DEV Community

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

Posted on

Flutter & Dart Tips - Week In Review #11

#dart #flutter #codenewbie #beginners

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

Top comments (0)