DEV Community

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

Posted on

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

Enter fullscreen mode Exit fullscreen mode

Screen Shot 2021-08-07 at 3.24.01 PM

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

Enter fullscreen mode Exit fullscreen mode

enter image description here

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 */},
            ),
          ]),

...

Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Screen Shot 2021-08-07 at 3.17.32 PM

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 Bryan Turner on Unsplash

Discussion (0)