Flutter & Dart Tips - Week In Review #10
Tags: flutter, dart, beginners, codenewbie
Published: 2021-08-15 00:28:36



Hello Reader,

Welcome back to the 10th post of the Flutter & Dart Tips series.

![dude-its-the-72b78733f8](https://i.imgur.com/tkwEyYD.jpg)

Ten weeks ago, I started this series to share the tips I tweet during the week. My goal is to have at least 100 tips in this series. 


1- LayoutBuilder helps to create a widget tree that can depend on the size of the parent widget.

```dart

      LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 750) {
          return Container(
            color: Colors.green,
            height: 100,
            width: 100,
          );
        } else {
          return Container(
            color: Colors.yellow,
            height: 100,
            width: 100,
          );
        }
      },
    );

```

> Try it on DartPad <a href="https://dartpad.dev/?id=e4cac9818ebd1bfad62323c834b489b0&null_safety=true">here</a> 



![LayoutBuilder](https://media.giphy.com/media/X50n7IZ9s0vdGwnwNL/giphy.gif)



2- The wrap is a widget that displays its children in horizontal or vertical runs. It will try to place each child next to the previous child on the main axis. If there is not enough space, it will create a new run adjacent to its existing children in the cross axis.

```dart

	Wrap(
      children: List.generate(
        10,
        (index) => Container(
          margin: const EdgeInsets.all(10),
          color: Colors.green,
          height: 100,
          width: 100,
        ),
      ),
    );

```

> Try it on DartPad <a href="https://dartpad.dev/?id=5c0b7e70d19ec7c640fbdd10583b7484&null_safety=true">here</a> 

![Warp](https://i.imgur.com/wrcMqRb.gif)

3- AnimatedIcon is a Flutter widget that animates the switching of an icon with other. 

```dart

      AnimatedIcon(
          icon: AnimatedIcons.pause_play,
          size: 52,
          progress: myAnimation
      ),

```


> Try it on DartPad <a href="https://dartpad.dev/?id=ea830ec764f187e1bd372427509dfd93&null_safety=true">here</a> 

![AnimatedIcon](https://media.giphy.com/media/KoU0Ba0j7kwCsau1F3/giphy.gif)

4-  The AnimatedContainer widget is a container widget with animations. It can be animated by altering the values of its properties.

```dart

	AnimatedContainer(
        width: _width,
        height: _height,
        decoration: BoxDecoration(
          color: _color,
          borderRadius: _borderRadius,
        ),
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      ),

```

> Try it on DartPad <a href="https://dartpad.dev/?id=3a4291b177882967d3e5ab48c00988dc&null_safety=true">here</a> 

![AnimatedContainer](https://i.imgur.com/TLWAMwd.gif)

5- The SliverAppBar is a widget that gives a floating app bar.

```dart

        SliverAppBar(
          pinned: _pinned,
          snap: _snap,
          floating: _floating,
          expandedHeight: 160.0,
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('SliverAppBar'),
            background: FlutterLogo(),
          ),
        ),

```

> Try it on DartPad <a href="https://dartpad.dev/?id=fba7a3ae6b78ab7933c7635e24d7ecf2&null_safety=true">here</a> 

![SliverAppBar](https://media.giphy.com/media/nRPyZXLfNoniOeHzzp/giphy.gif)

6- AnimatedOpacity Widget automatically transitions the child’s opacity over a given duration whenever the given opacity changes.

```dart

        AnimatedOpacity(
          opacity: _opacity,
          duration: const Duration(seconds: 1),
          curve: Curves.bounceInOut,
          // The green box must be a child of the AnimatedOpacity widget.
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),


```

> Try it on DartPad <a href="https://dartpad.dev/?id=5d1c2edf4adbf720616a766466a0cdfc&null_safety=true">here</a> 

![AnimatedOpacity](https://media.giphy.com/media/ciDOYTDpOkLxPPgy5i/giphy.gif)

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/@ryanquintal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ryan Quintal</a> on <a href="https://unsplash.com/s/photos/ten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>