DEV Community

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

Posted on

Flutter & Dart Tips - Week In Review #10

Hello Reader,

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

dude-its-the-72b78733f8

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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

LayoutBuilder

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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Warp

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


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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

AnimatedIcon

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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

AnimatedContainer

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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

SliverAppBar

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


Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

AnimatedOpacity

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

Discussion (0)