Flutter & Dart Tips - Week In Review #10

Hello Reader,

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

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.

      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 here

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.

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

Try it on DartPad here

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

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

Try it on DartPad here

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

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

Try it on DartPad here

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

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

Try it on DartPad here

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

        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 here

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 Ryan Quintal on Unsplash