Flutter Animation: How to animate a Box in the Flutter

Flutter Animation: In this article, we will see how can we animate a circle, how can we repeat animation and how can we rotate a circle in the flutter.

Animate a box in the Flutter
Repeat the animation of the box in the Flutter
Rotate a box in the Flutter

Source: LottieFiles.com

Animate a Circle:

To animate a circle in Flutter, you can use the AnimatedContainer widget. This widget allows you to animate the properties of a container, such as its size, background color, and border-radius.

Here’s an example of how you can use AnimatedContainer to animate the size of a circle:

First, we will create a screen that name will be “AnimateScreen” under the animate_screen.dart file.

Initialize a variable, and will assign the value of height and width for the circle:

 double _circleSize = 200;

Then will use the “AnimatedContainer” widget and gives the height, width, duration, animation curve, and decoration:

AnimatedContainer(
          duration: const Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
          width: _circleSize,
          height: _circleSize,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.red,
          ),
        ),

Then under the floating action button, we will use “setState” to change the state of the Circle by pressing the button.

floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _circleSize = _circleSize == 200 ? 300 : 200;
          });
        },
        child: const Icon(Icons.refresh),
      ),

The output should be like this:

Flutter animates a circle

In this example, we have a red circle that animates its size when the user taps the floating action button. The animation lasts for 1 second and uses the Curves.fastOutSlowIn curve.

You can customize the animation by changing the duration, curve, and other properties of the AnimatedContainer. You can also animate other properties of the container, such as the background color or border-radius.

Complete Code:

import 'package:circle_rotate/animate_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circle Rotate',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimateScreen(),
    );
  }
}


/// animate_screen.dart file


class AnimateScreen extends StatefulWidget {
  const AnimateScreen({Key? key}) : super(key: key);

  @override
  State<AnimateScreen> createState() => _AnimateScreenState();
}

class _AnimateScreenState extends State<AnimateScreen> {

  double _circleSize = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
          width: _circleSize,
          height: _circleSize,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.red,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _circleSize = _circleSize == 200 ? 300 : 200;
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

Repeat the animation and rotate a circle that will cover in the next article. If you like this article, then write your words inside the comment box and send an emoji to me 🙂

Complete detail about Flutter state managements in the flutter

AppBar – Widget of the Day #02 | Flutter Beginner Guide

How to use PinPut Flutter Package in Flutter 2022

Scaffold – Widget of the day #01 | Flutter Beginner

How to use the Flutter Zoom Drawer Package

Tags: animated container widget in flutter AnimatedContainer example in flutter flutter flutter animated container widget flutter animation Flutter Beginner Tutorial flutter beginner tutorials Flutter Frontend Tutorials flutter learn flutter tutorials Flutter Tutorials flutter skills flutter app development how to animate a circle in flutter how to give animation to a widget in flutter