Animation In Flutter !!

Here are some simple animations which can be done using the flutter widgets.

About the App : This app shows some simple animations which can be done using the flutter widgets. It have two screen showing different animations.

First is the home screen which in which I have added a very simple animation to the image. Here is the demo video of that animation.

So to do that animation , I have used AnimatedContainer() widget. We have to give initial and final size of the image. Also we have to give duration time for transition.

AnimatedContainer(
width: _bigger ? 100 : 500,
child: Image.asset('assets/testanim.png'),
duration: Duration(seconds: 1),
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.white, Colors.transparent])),
),

In assets, I have mentioned the image to which I want to apply animation. _bigger is the boolean variable which we can used into SetState() function to change the state on occurring of any event like pressing a button or tapping on screen etc. Then gradient parameter is used to give some background look to that image. It looks like white glare behind the image during the transition.

RaisedButton(
onPressed: () => setState(() {
_bigger = !_bigger;
}),
child: Text('Press'),
)

This RaisedButton() is used to initiate the transition.

Simple Image Transition

Then I have given one floating action button to navigate on the second screen.

Floating Action Button For Navigation

On Second Screen, I have added one another beautiful animation with the help of TweenAnimationBuilder() widget. The tween defines the target value for the animation: When the widget first builds, it animates from Tween_Begin to Tween_End .

This TweenAnimationBuilder() have three main parameters named tween, duration, builder . Tween is used for transition i.e begin and end. We can give the colors for begin and end of the transitions. Then duration is used to determine the time for the transition. The current value of the animation along with the child is passed to the builder callback, which is expected to build a widget based on the current animation value. The builder is called throughout the animation for every animation value until Tween_End is reached.

AnimatedContainer(
width: _bigger ? 100 : 300,
child: TweenAnimationBuilder(
tween: ColorTween(begin: Colors.white, end: _newColor),
duration: Duration(seconds: 1),
builder: (_, Color color, __) {
return ColorFiltered(
colorFilter:
ColorFilter.mode(color, BlendMode.modulate),
child: Image.asset('assets/verticlesun.jpg'),
);
},
),
duration: Duration(seconds: 1),
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.white, Colors.transparent])),
),

ColorFilter() class applies colorFilter to its child. That colorfilter property applies mentioned coloured transition smoothly to its child. In above code it will apply transition to that asset image.

Colour Transition

In further code I have used Slider() widget to change that colour. I have uploaded all source code to my GitHub repository . GitHub repository Link is given below :

shubhamshinde4141/Animation-App

Thanks, Hope this is helpful!🙂