Implicit Animation In Flutter

Yogendra singh

28 April 2023

In this blog, we are going to learn about Implicit Animation In Flutter. We don’t need to write code for basic animation, we can achieve animation by changing some property values of widgets.

You may also check our interactive app designs by our Flutter app development company

Implicit Animation

Using implicit animations, you can animate a widget property by setting a target value. When we setState in StatefulWidget then new target values, like color, width, height, and, etc. changes with a specified duration from the old value to the new value.

Some implicit animation Widgets:

1. AnimatedOpacity: We can hide and show widgets using opacity. Its value lies between 0 (no visibility) and 1 (visible).

2.AnimatedCrossFade: Replace one widget with another and animates itself between sizes.

3.AnimatedPositioned: It is used to change the position of the widget to a new position with a specified duration,

4.AnimatedContainer: We can animate properties like width, height, background colors, etc.

AnimatedContainer widget:

Let’s check implementations of AnimatedContainer

Create a StatefulWidget
Declare properties with initial values _width = 50, double _height = 50, _color = Colors.green , _borderRadius = BorderRadius.circular(8)
Add AnimatedContainer using the properties.
Change the value of properties randomly on the click button and rebuild the widget with new properties.

import 'dart:math';

import 'package:flutter/material.dart';

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

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

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // 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(
          // 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());
            });
          },
          child: Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

import 'dart:math';

import 'package:flutter/material.dart';

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

class AnimatedContainerApp extends StatefulWidget {

@override

_AnimatedContainerAppState createState() => _AnimatedContainerAppState();

}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {

// 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(

// 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),

);

// Generate a random border radius.

_borderRadius =

BorderRadius.circular(random.nextInt(100).toDouble());

});

child: Icon(Icons.play_arrow),

);

}

Let’s check the final result of the code.

https://mobikul.com/wp-content/uploads/2021/05/untitled.webm?_=1

I hope this blog will help to add animation to your widgets.

Happy Learning 🙂

Reference Links :

https://flutter.dev/docs/cookbook/animation/animated-container