Flutter & Dart Tips - Week In Review #9
Tags: flutter, codenewbie, dart, beginners
Published: 2021-08-07 22:25:47

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.

```dart

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

```

![Screen Shot 2021-08-07 at 3.24.01 PM](https://i.imgur.com/bflFjhW.png)

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

```dart

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 image description here](https://media.giphy.com/media/ecM41I9rfRhQTWafzk/giphy.gif)

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

```dart


  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

```dart


      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

```dart

...

      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.

```dart


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


```

![Screen Shot 2021-08-07 at 3.17.32 PM](https://i.imgur.com/QwyZdk4.png)

See you next week. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a> & <a href="https://apple.co/3hZXoBx">Apple Store</a>

<span>Cover image  <a href="https://unsplash.com/@bt_optics?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Bryan Turner</a> on <a href="https://unsplash.com/s/photos/olympic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>