Flutter permits designers to make great portable application UIs for iOS and Android. The animation framework in Flutter depends on composed Animation objects. Widgets can either fuse these animations in their build functions straight by perusing their present value and listening to their state changes or they can utilize the animations as the premise of more intricate animations that they give to different widgets.
In this blog, we will Explore AnimatedSize In Flutter. We will see how to implement a demo program of the animated size widget and how to use it in your flutter applications.
AnimatedSize class – widgets library – Dart API
Animated widget that automatically transitions its size over a given duration whenever the given child’s size changes…api. flutter.dev
Table Of Contents::
Introduction:
AnimatedSize widget is a widget that consequently advances its anything but a given duration at whatever point the given child’s size changes. It is a widget that animates its size to coordinate with the size of its child.
Demo Module :
This demo video shows how to create an animated size widget in a flutter. It shows how the animated size widget will work in your flutter applications. It shows when the code successfully runs, then the user press the button the size of the child changed according to the given duration. It will be shown on your devices.
Constructor:
There are constructor of AnimatedSize are:
const AnimatedSize({
Key? key,
Widget? child,
this.alignment = Alignment.center,
this.curve = Curves.linear,
required this.duration,
this.reverseDuration,
required this.vsync,
this.clipBehavior = Clip.hardEdge,
})
In the above constructor, all fields set apart with @required should not be vacant argument is really needed since you will get an affirmation error on the off chance that you don’t pass it. There are two required arguments: vsync and duration. Below I am going to explain how to provide the values for the required and non-required arguments.
Properties:
There are some properties of AnimatedSize are:
- > alignment: This property is utilized to the alignment of the child inside the parent when the parent isn’t yet a similar size as the child. The x and y upsides of the alignment control the horizontal and vertical arrangement, separately.
- > reverseDuration: This property is utilized to the duration while changing this current widget’s size to coordinate with the child’s size while going reverse.
- > curve: This property is utilized in the animation curve while progressing this current widget’s size to coordinate with the child’s size.
- > duration: This property is utilized to the duration while changing this current widget’s size to coordinate with the child’s size.
- > vsync: This Property is utilized to will indicate the TickerProvider for this widget.
- > child: This Property is utilized to the widget underneath this widget in the tree.
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called animated_size_demo.dart inside the lib folder.
We will create a Stateful widget and the respective State class has to use TickerProviderStateMixin.
class _AnimatedSizeDemoState extends State<AnimatedSizeDemo>
with TickerProviderStateMixin {
}
First, we will create a double variable _size.
double _size = 140;
In the body, we will add the center widget. In this widget, add the column widget. Inside, add the text , _buildAnimatedSize(), _buildAnimationWithAnimatedContainer() widgets. We will describe both below.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Animated Size",style: TextStyle(fontSize: 18),),
SizedBox(height: 10,),
_buildAnimatedSize(),
SizedBox(height: 50,),
Text("Size Animation With AnimatedContainer",style: TextStyle(fontSize: 18),),
SizedBox(height: 10,),
_buildAnimationWithAnimatedContainer(),
SizedBox(height: 50,),
ElevatedButton(
child: Text('Change Size'),
onPressed: () {
setState(() {
_size = _size == 140 ? 180 : 140;
});
},
)
],
),
),
We will also add an ElevatedButton(). Inside, add text and onPressed function. In function, we will be switching the value of the _size between small value and big value.
We will describe the _buildAnimatedSize() widget:
In this widget, we will return a container with decoration. It’s child property, we will add AnimatedSize() widget. In this widget, we will add vsync, duration with 3 seconds, alignment was center, the curve was easeInCirc and _buildChild() widget.
Widget _buildAnimatedSize() {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: AnimatedSize(
vsync: this,
duration: const Duration(seconds: 3),
alignment: Alignment.center,
curve: Curves.easeInCirc,
child: _buildChild(),
),
);
}
We will describe the _buildChild() widget:
In this widget, we will return a container. Inside add width, height with double variable _size. We will add DecorationImage with fit: BoxFit.contain.
Widget _buildChild() {
return Container(
width: _size,
height: _size,
decoration: BoxDecoration(
color: Colors.teal[50],
image: DecorationImage(
image: AssetImage(
'assets/logo.png'
),fit: BoxFit.contain
),
),
);
}
We will describe the _buildAnimationWithAnimatedContainer() widget:
The AnimatedSize is utilized to animate a parent widget to coordinate with the size of its child. It doesn’t animate the child widget. On the off chance that what you need is animating the size change of a widget, one of the options is utilizing the AnimatedContainer widget. The AnimatedContainer is a Container that can animate its child when any property changes.
Widget _buildAnimationWithAnimatedContainer() {
return AnimatedContainer(
width: _size,
height: _size,
color: Colors.teal[50],
duration: const Duration(seconds: 3),
child: _buildChild(),
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class AnimatedSizeDemo extends StatefulWidget {
@override
_AnimatedSizeDemoState createState() =>
new _AnimatedSizeDemoState();
}
class _AnimatedSizeDemoState extends State<AnimatedSizeDemo>
with TickerProviderStateMixin {
double _size = 140;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter Animated Size Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Animated Size",style: TextStyle(fontSize: 18),),
SizedBox(height: 10,),
_buildAnimatedSize(),
SizedBox(height: 50,),
Text("Size Animation With AnimatedContainer",style: TextStyle(fontSize: 18),),
SizedBox(height: 10,),
_buildAnimationWithAnimatedContainer(),
SizedBox(height: 50,),
ElevatedButton(
child: Text('Change Size'),
onPressed: () {
setState(() {
_size = _size == 140 ? 180 : 140;
});
},
)
],
),
),
);
}
Widget _buildChild() {
return Container(
width: _size,
height: _size,
decoration: BoxDecoration(
color: Colors.teal[50],
image: DecorationImage(
image: AssetImage(
'assets/logo.png'
),fit: BoxFit.contain
),
),
);
}
Widget _buildAnimatedSize() {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: AnimatedSize(
vsync: this,
duration: const Duration(seconds: 3),
alignment: Alignment.center,
curve: Curves.easeInCirc,
child: _buildChild(),
),
);
}
Widget _buildAnimationWithAnimatedContainer() {
return AnimatedContainer(
width: _size,
height: _size,
color: Colors.teal[50],
duration: const Duration(seconds: 3),
child: _buildChild(),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the AnimatedSize in a flutter; you can modify this code according to your choice. This was a small introduction to AnimatedSize On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the AnimatedSize in your flutter projects. We will show you what the Introduction is?. AnimatedSize can be utilized if you need to animate the size of a parent widget when the size of the child widget changes. The utilization is very basic, you are needed to pass the TickerProvider and Duration arguments. Remember that it doesn’t animate the child widget. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
