Posted on Aug 7, 2021

Flutter & Dart Tips - Week In Review #9

Hello Reader,

Welcome to the 9th of the Flutter & Dart Tips series. My goal is to have at least 100 tips in this series. So far, I have shared with you 50 tips. Let's add more.

1- You can use the ShaderMask widget to apply a gradient look and feel to its child.

 body: Center( child: ShaderMask( blendMode: BlendMode.srcIn, shaderCallback: (Rect bounds) { return LinearGradient( colors: [Colors.red, Colors.green], tileMode: TileMode.clamp, ).createShader(bounds); }, child: const Text('This is a colorful Text', style: TextStyle(fontSize: 36)), ), ),

2- AnimatedSize is a widget that automatically transitions its size over a given duration whenever the given child's size changes.

 class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin { double _size = 50.0; bool _large = false; void _updateSize() { setState(() { _size = _large ? 250.0 : 100.0; _large = !_large; }); } @override Widget build(BuildContext context) { return GestureDetector( onTap: () => _updateSize(), child: Container( color: Colors.amberAccent, child: AnimatedSize( vsync: this, curve: Curves.easeInCirc, duration: const Duration(seconds: 2), child: FlutterLogo(size: _size), ), ), ); } }

3- Use the flutter_staggered_grid_view to create a gridview of multiple columns & rows of varying sizes

 new StaggeredGridView.countBuilder( crossAxisCount: 4, itemCount: 8, itemBuilder: (BuildContext context, int index) => new Container( color: Colors.green, child: new Center( child: new CircleAvatar( backgroundColor: Colors.white, child: new Text('$index'), ), )), staggeredTileBuilder: (int index) => new StaggeredTile.count(2, index.isEven ? 2 : 1), mainAxisSpacing: 4.0, crossAxisSpacing: 4.0, )

4- You can use the ColorFiltered widget to apply a color filter to its child widgets

 Column( children: [ // The original image Image.network(_imageUrl), // The black-and-white image ColorFiltered( colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation), child: Image.network(_imageUrl), ), ], ),

5- Use the flutter_speed_dial plugin to create more than one floating button on the same screen

 ... floatingActionButton: SpeedDial( icon: Icons.share, backgroundColor: Colors.amber, children: [ SpeedDialChild( child: Icon(Icons.face), label: 'Social Network', backgroundColor: Colors.amberAccent, onTap: () {/* Do someting */}, ), SpeedDialChild( child: Icon(Icons.email), label: 'Email', backgroundColor: Colors.amberAccent, onTap: () {/* Do something */}, ), SpeedDialChild( child: Icon(Icons.chat), label: 'Message', backgroundColor: Colors.amberAccent, onTap: () {/* Do something */}, ), ]), ...

6- You can create multiple shadows for a Text widget. Check the following example.

 Text('Important Text', style: TextStyle( color: Colors.black, fontSize: 50, fontWeight: FontWeight.bold, shadows: [ Shadow( color: Colors.red[500]!, offset: Offset(-50, -50), blurRadius: 5), Shadow( color: Colors.green[200]!, offset: Offset(50, 50), blurRadius: 5), ], ), ),