Flutter Animate The Properties Of A Container

We all know that Container class provides a convenient way to create a widget with specific properties: width, height, background color, padding, borders, and more.

Simple animations often involves changing these properties over time. For example, you may want to animate the background color from blue to orange to indicate that an item has been selected by the user.

To animate these properties in Flutter App, Flutter provides the AnimatedContainer widget. Just Like the Container Widget, AnimatedContainer  widget allows you to define the properties like , width, height, background colors, etc. When theAnimatedContainer is rebuilt with new properties, then it automatically animates between the old values and new values. In Flutter, such types of animations are known as “implicit animations.”

This describes how to use an AnimatedContainer to animate the size, background color, and border radius when the user taps a button.

What is Implicit Animation In Flutter?

In Flutter App When  theAnimatedContainer is rebuilt using new properties, then it automatically animates between the old values and new values. In Flutter, such types of animations are known as “implicit animations.”

Creating the  Animating The Properties Of A Container in Flutter:

  • Create a StatefulWidget with default properties
  • Build an AnimatedContainer using the properties
  • Start the animation by rebuilding with new properties

Creating a StatefulWidget with default properties:

Now , create a  StatefulWidget and a State classes. In this  custom State class define the properties you need to change. In this example, we are going to  includes the width, height, color, and border radius. In addition, you can also define the default value of each property.

These properties must come under a custom State class so they can be updated when the user taps OR click a button.

class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State {
// Define the various properties with default values. Update these properties
// when the user taps a FloatingActionButton.
double _width = 50;
double _height = 50;
Color _color = Colors.green;
BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

@override
Widget build(BuildContext context) {
// Fill this out in the next steps
}
}

Build an AnimatedContainer using the properties :

Now, we can build the AnimatedContainer using the properties defined in the previous step. And then, we must provide a duration that defines how long the animation should perform.

AnimatedContainer(
// Use the properties stored in the State class.
width: _width,
height: _height,
decoration: BoxDecoration(
color: _color,
borderRadius: _borderRadius,
),
// Define how long the animation.
duration: Duration(seconds: 1),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.fastOutSlowIn,
);

Start the animation by rebuilding with new properties:

Finally, start the animation by rebuilding the AnimatedContainer with new properties. How to trigger out a rebuild? When it comes to use a  StatefulWidgets, and  setState  method is the solution for triggering the rebuild. .

Now in this example, we are going to add a button to the app. When the user taps that button, then it updates the properties with a new  properties like, width, height, background color and border radius inside a call to setState method.

In this app, generate new values each time when  the user taps the button.

 

FloatingActionButton(
child: Icon(Icons.play_arrow),
// When the user taps the button
onPressed: () {
// Use setState to rebuild the widget with new values.
setState(() {
// Create a random number generator.
final random = Random();

// Generate a random width and height.
_width = random.nextInt(300).toDouble();
_height = random.nextInt(300).toDouble();

// Generate a random color.
_color = Color.fromRGBO(
random.nextInt(256),
random.nextInt(256),
random.nextInt(256),
1,
);

// Generate a random border radius.
_borderRadius =
BorderRadius.circular(random.nextInt(100).toDouble());
});
},
);

Complete example code for Flutter Animate The Properties Of A Container:

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(AnimatedContainerApp());

class AnimatedContainerApp extends StatefulWidget {
@override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State {
// Define the various properties with default values. Update these properties
// when the user taps a FloatingActionButton.
double _width = 50;
double _height = 50;
Color _color = Colors.green;
BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AnimatedContainer Demo'),
),
body: Center(
child: AnimatedContainer(
// Use the properties stored in the State class.
width: _width,
height: _height,
decoration: BoxDecoration(
color: _color,
borderRadius: _borderRadius,
),
// Define how long the animation should take.
duration: Duration(seconds: 1),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.fastOutSlowIn,
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
// When the user taps the button
onPressed: () {
// Use setState to rebuild the widget with new values.
setState(() {
// Create a random number generator.
final random = Random();

// Generate a random width and height.
_width = random.nextInt(300).toDouble();
_height = random.nextInt(300).toDouble();

// Generate a random color.
_color = Color.fromRGBO(
random.nextInt(256),
random.nextInt(256),
random.nextInt(256),
1,
);

// Generate a random border radius.
_borderRadius =
BorderRadius.circular(random.nextInt(100).toDouble());
});
},
),
),
);
}
}

Congratulations  You Have Learned  Animating  The Properties Of A Container In Flutter App…!!!!

If It Is Helpful Share It With Your Friends…!!!!

Leave a Reply

Categories