AnimatedSize Widget – Flutter Widget Guide By Flutter Agency

In this article, we will learn about AnimatedSize Widget.

So What is the first question arise in our mind?

What is AnimatedSize Widget?

AnimatedSize Widget is a widget that automatically transitions its size over a given duration whenever the given child’s size changes.

The AnimatedSize Widget takes a duration parameter, and you use the Duration class to specify 1 second. The vsync is referenced by this, meaning this reference of the _AnimatedSizeWidgetState class. The curve argument gives the animation a spring effect by using Curves.easeInOut. The child Icon size property takes the _size variable and as it changes the new size is animated.

Default Constructor for AnimatedSize Widget will look like below:

AnimatedSizeWidget({
   Key key,
   Widget child,
   AlignmentGeometry alignment: Alignment.center,
   Curve curve: Curves.linear,
   @required Duration duration,
   Duration reverseDuration,
   @required TickerProvider vsync,
 });

Note in order to use the Vsync property you use the SingleTickerProviderStateMixin class.

Properties:

Key key: Controls how one widget replaces another widget in the tree.
Widget child: The widget below this widget in the tree.
AlignmentGeometry alignment: The alignment of the child within the parent when the parent is not yet the same size as the child. The x and y values of the alignment control the horizontal and vertical alignment, respectively. An x value of -1.0 means that the left edge of the child is aligned with the left edge of the parent whereas an x value of 1.0 means that the right edge of the child is aligned with the right edge of the parent. Other values interpolate (and extrapolate) linearly. For example, a value of 0.0 means that the center of the child is aligned with the center of the parent.
Curve curve: This attribute will define the curve to apply when animating the parameters of this container.
Duration duration: This attribute will specify the duration over which to animate the parameters of this container.
Duration reverseDuration: This attribute will be the duration when transitioning this widget’s size to match the child’s size when going in reverse. If not specified, defaults to duration.
TickerProvider vsync: This Property will specify the TickerProvider for this widget.

How to use AnimatedSize Widget in Flutter?

The following code snippet tells us how to implement AnimatedSize Widget in Flutter.

import 'package:flutter/material.dart';

class AnimatedSizeWidget extends StatefulWidget {
  @override
  _AnimatedSizeWidgetState createState() => _AnimatedSizeWidgetState();
}

class _AnimatedSizeWidgetState extends State<AnimatedSizeWidget>
    with SingleTickerProviderStateMixin {
  bool _first = true;

  double _width = 200;
  double _height = 200;
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 300,
            child: Center(
              child: AnimatedSize(
                duration: const Duration(milliseconds: 500),
                curve: Curves.fastOutSlowIn,
                vsync: this,
                child: Container(
                  width: _width,
                  height: _height,
                  color: Colors.blue,
                ),
              ),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          RaisedButton(
            child: const Text('Click Here!'),
            onPressed: () {
              setState(() {
                _width = _first ? 220 : 200;
                _height = _first ? 160 : 200;

                _first = !_first;
              });
            },
          ),
        ],
      ),
    );
  }
}

We will get output like below:

AnimatedSize Widget

Conclusion:

In this article, we have been through What is AnimatedSize Widget in Flutter along with how to implement it in a Flutter.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.