Create an Animated container in Flutter

If you are reading this article, you must already know about Container. A Container is a well-known widget in Flutter. It is a widget that combines common painting, positioning, and sizing widgets. It has various well-defined properties such as color, alignment, padding, width, and height. Animated Container in Flutter is simply a container widget with animation.

Check out more about our Flutter app development company.

You can use the Animated Container widget if you want to create an animation every time any value changes. AnimatedContainer works by starting an animation that plays for the given duration when the value of the property changes.

Now let’s check how can we implement Animated Container in Flutter.

Create a stateful widget.
Add an Animated Container widget and define its properties.
Add a Floating Action Button & on the tap of FAB alter the properties of the Animated Container& create animation.

Create a stateful widget.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title:  Text(widget.title),
      ),

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

Add an Animated Container widget.

body:  Center(
        child: AnimatedContainer(

          width: width,
          height: height ,
          duration: const Duration(seconds: 1),
          decoration: BoxDecoration(
            color: color,
            borderRadius: _borderRadius
          ),
          curve: Curves.fastOutSlowIn,
        ),
      )

body: Center(

child: AnimatedContainer(

width: width,

height: height ,

duration: const Duration(seconds: 1),

decoration: BoxDecoration(

color: color,

borderRadius: _borderRadius

curve: Curves.fastOutSlowIn,

)

Add different properties such as width, height, color, and duration of the animation, and provide an optional curve to make the animation feel smoother.

Define width, height & color.

 double width = 50;
 double height = 50;
 Color color = Colors.green;
 BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

double width = 50;

double height = 50;

Color color = Colors.green;

BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

Altering the properties.

Add an FAB & on the onPressed function of FAB and alter the Animated Container properties by randomly generating the height, width & color of the container.

floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.play_arrow),
        onPressed: () {
          setState(() {
            final random = Random();
            width = random.nextInt(300).toDouble();
            height = random.nextInt(300).toDouble();
            color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
            _borderRadius = BorderRadius.circular(random.nextInt(100).toDouble());
          });
        },

      ),

floatingActionButton: FloatingActionButton(

child: const Icon(Icons.play_arrow),

onPressed: () {

setState(() {

final random = Random();

width = random.nextInt(300).toDouble();

height = random.nextInt(300).toDouble();

color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);

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

});

OUTPUT:

Full code:

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Animated Container'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 double width = 50;
 double height = 50;
 Color color = Colors.green;
 BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);



  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title:  Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.play_arrow),
        onPressed: () {
          setState(() {
            final random = Random();
            width = random.nextInt(300).toDouble();
            height = random.nextInt(300).toDouble();
            color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
            _borderRadius = BorderRadius.circular(random.nextInt(100).toDouble());
          });
        },

      ),
      body:  Center(
        child: AnimatedContainer(

          width: width,
          height: height ,
          duration: const Duration(seconds: 1),
          decoration: BoxDecoration(
            color: color,
            borderRadius: _borderRadius
          ),
          curve: Curves.fastOutSlowIn,
        ),
      ) // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

import 'dart:math';

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Animated Container'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

double width = 50;

double height = 50;

Color color = Colors.green;

BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

floatingActionButton: FloatingActionButton(

child: const Icon(Icons.play_arrow),

onPressed: () {

setState(() {

final random = Random();

width = random.nextInt(300).toDouble();

height = random.nextInt(300).toDouble();

color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);

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

});

body: Center(

child: AnimatedContainer(

width: width,

height: height ,

duration: const Duration(seconds: 1),

decoration: BoxDecoration(

color: color,

borderRadius: _borderRadius

curve: Curves.fastOutSlowIn,

) // This trailing comma makes auto-formatting nicer for build methods.

);

}

Conclusion:

This is how we create an Animated Container in Flutter.

Thanks for reading this article.

If I got something wrong, let me know in the comments. I would love to improve.

For more interesting blogs check out here – https://mobikul.com/blog/

Reference link: https://betterprogramming.pub/introduction-to-flutter-animations-using-animatedcontainer-96a335cad2c

nausheen Siddiqui

21 Dec, 2023
Updated by - nausheen Siddiqui
5 Jul, 2023
Updated by - Mobikul Admin

. . .

Create an Animated container in Flutter

OUTPUT:

Full code:

Conclusion:

Leave a Comment Cancel Reply

Message Sent!