Explore Implicit Animation In Flutter
Animations are straightforward to do in Flutter, and a great deal of unpredictability can be accomplished with significantly less exertion than native Android. This is generally accomplished through ways like characterizing an Animation and an AnimationController. However, there are inbuilt widgets that even diminish this and make animations as simple as basically changing values!
Animations assume a significant part in upgrading your application’s general user experience from the visual criticism, motion, and up to the custom animations you can actually envision!. Like some other items integrated into an application, animations should be useful instead of simply a regular stylistic layout.
In this post, we will Explore Implicit Animation In Flutter. We will also implement a demo program, common types, properties and use them in your flutter applications.
Table Of Contents::
Implicit Animation:
The implicit animation could be separated into worked-in widgets and customized widgets.ImplicitAnimtatedWidget It is an abstract class for building widgets that animate changes to their properties. Widgets of this sort won’t animate when they are first added to the widget tree. Or maybe, when they are rebuilt with various values, they will react to those progressions by animating the progressions over a predetermined duration.https://www.youtube.com/embed/IVTjpW3W33s?feature=oembedIntroduction Video
ImplicitlyAnimatedWidgets consequently animate changes in their properties at whatever point they change. For this, they make and deal with their own inner AnimationControllers to control the animation. While these widgets are easy to utilize and don’t expect you to deal with the lifecycle of an AnimationController physically, they are likewise, to some degree, restricted: Besides the objective value for the animated property, developers can pick a duration and curve for the movement.
Common Types of Widgets:
Various implicitly animated widgets transport with the framework. They are typically namedAnimatedFoo where Foo is the name of the non-animated rendition of that widget. There are some regularly utilized implicitly animated widgets include:
- > AnimatedContainer
- > AnimatedOpacity
- > AnimatedCrossFade
- > TweenAnimationBuilder
Properties
There are some properties:
- Curve: The official document is clear and sweet in that they show all the inherent curve behaviors in videos. So on the off chance that you need to change the animation curve, pick what you need.
- Duration: This is a real sense that implies the duration of the animation. It very well may be days, hours, minutes, seconds, milliseconds, even microseconds.
- onEnd: We can accomplish something after the animation wraps up.
Code Implement:
Create a new dart file called home_page_screen.dart inside the lib folder.
We will make four buttons on this home page screen, and each button will show implicit animation, and we will show the below detail.
AnimatedContainer:
An AnimatedContainer naturally transitions to the value characterized (colors, sizes, and so on) rather than immediately changing to them.
The Container the class causes you to make a widget with explicit properties, for example, height, width, color and then some. This is normally utilized for wrapping child widgets to deal with their properties, for example, sizes, paddings, and margins advantageously.
AnimatedContainer(
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10),
),
duration: Duration(milliseconds:600),
curve: Curves.easeInToLinear,
),
Utilizing the AnimatedContaineryou can animate a normal Container by changing its properties. It naturally changes the color, the sizes without you having the explicitly setting custom tweens or controllers.
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
width = width ==300? 250: 300;
height = height==250? 300: 250;
color = color == Colors.orange?
Colors.indigo[300]: Colors.orange;
});
},
child: Icon(Icons.add,color: Colors.black,),
),
We will create a floatingActionButton(). In this button, we will add the height, width, and color on the setState(). When we run the application, we ought to get the screen’s output like the underneath screen video.
AnimatedOpacity:
AnimatedOpacity animates changes in opacity, for example, how noticeable a widget is. An opacity of 0 makes a widget totally transparent, while a 1 opacity is completely obvious.
Opacity is really self-explanatory — it’s liable for refreshing the transparency of a UI part. AnimatedOpacity It is a widget on top of the default Opacity widget — it animates the progressions dependent on its opacity property.
AnimatedOpacity(
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10),
),
),
opacity: opacity,
duration: Duration(milliseconds:600),
curve: Curves.easeInToLinear,
),
In AnimatedOpacity, you change the opacity and setState, and it automatically animates the opacity change.
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
opacity = opacity == 0.4 ? 1.0 : 0.4;
});
},
child: Icon(Icons.add,color: Colors.black,),
),
When the button is clicked, it simply changes opacity and setsState. When we run the application, we ought to get the screen’s output like the underneath screen video.
AnimatedCrossFade:
AnimatedCrossFade is smooth progress starting with one widget then onto the next with a given duration. Flutter makes this simple by utilizing an AnimatedCrossFade widget.
Cross-fade animations, step by step, become fade a UI part while at the same time blurring in another UI component. The AnimatedCrossFade is a widget that gives cross-fade progress when exchanging between two given child widgets.
AnimatedCrossFade(
firstChild: Container(
width: 350,
height: 250,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
secondChild: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(80),
),
),
crossFadeState: state,
duration: Duration(seconds:1),
firstCurve: Curves.easeInToLinear,
secondCurve: Curves.easeInToLinear,
sizeCurve: Curves.bounceOut,
),
The transition is triggered by changing the crossFadeState.
Note: If the two children are of different sizes then it automatically transitions from one size to the other.
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
state = state == CrossFadeState.showFirst?
CrossFadeState.showSecond:CrossFadeState.showFirst;
});
},
child: Icon(Icons.add,color: Colors.black,),
),
We will show the first child, then the second child, in the transition state or vice versa. When we run the application, we ought to get the screen’s output like the underneath screen video.
TweenAnimationBuilder:
To utilize TweenAnimationBuilderI set the timeframe that I need my animation to take with the duration parameter and the range of values that I need to animate between the Tween boundary. As the name proposes, an Tween object empowers you to determine a range of values that you need to animate between.
The tween also characterizes the animation’s objective value: When the widget first builds, it animates from Tween. Begin to Tween. End Another animation can be set off whenever by furnishing another tween with another Tween. End value. The new animation runs from the current animation value (which might be Tween. end of the old tween, if that animation is finished) to Tween. End of the new tween.
TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: value),
duration: Duration(milliseconds: 500),
builder: (context, size, _){
return IconButton(
iconSize: size,
icon: Icon(Icons.star,color: Colors.blueGrey,),
onPressed: (){
setState(() {
value = value == 60 ? 200 : 60;
});
},
);
},
)
When we run the code, the icon will show, and when we tap the icon, it was animated, and the icon’s size was larger. When we run the application, we ought to get the screen’s output like the underneath screen video.
Code File :
import 'package:flutter/material.dart';
import 'package:flutter_implicit_animation_dem/animated_container_screen.dart';
import 'package:flutter_implicit_animation_dem/animated_cross_fade_screen.dart';
import 'package:flutter_implicit_animation_dem/animated_opacity_screen.dart';
import 'package:flutter_implicit_animation_dem/tween_animation_builder_Screen.dart';
class HomePageScreen extends StatefulWidget {
@override
_HomePageScreenState createState() => _HomePageScreenState();
}
class _HomePageScreenState extends State<HomePageScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white24,
appBar: AppBar(
title: Text('Implicit Animation Demo'),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
child: Text('Animated Container'),
color: Colors.blueGrey,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => AnimatedContainerScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Animated Opacity'),
color: Colors.blueGrey,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => AnimatedOpacityScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Animated Cross Fade'),
color: Colors.blueGrey,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => AnimatedCrossFadeScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
RaisedButton(
child: Text('Tween Animation Builder',),
color: Colors.blueGrey,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => TweenAnimationBuilderScreen()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
],
),
)
), //center
);
}
}
Conclusion:
In the article, I have explained the Implicit Animation widget in a flutter; you can modify this code according to your choice. This was a small introduction to Implicit Animation On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Implicit Animation widget in your flutter projects. We will show you what Implicit Animation, some property is, some types using in Implicit Animation, and make a demo program for working Implicit Animation in your flutter applications, 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.
find the source code of the Flutter Implicit Animation Demo:
flutter-devs/flutter_implicit_animation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
