Animation

In Flutter, animations are an essential aspect of creating engaging and interactive user interfaces. Flutter provides a rich set of tools and widgets to create animations. Here's an overview of how you can work with animations in Flutter:

1. Tween Animation:

Tween animations are the simplest form of animations in Flutter. They involve animating a property from one value to another over a specified duration.

         
        import 'package:flutter/material.dart';

        void main() {
          runApp(MyApp());
        }
        
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              home: MyHomePage(),
            );
          }
        }
        
        class MyHomePage extends StatefulWidget {
          @override
          _MyHomePageState createState() => _MyHomePageState();
        }
        
        class _MyHomePageState extends State with SingleTickerProviderStateMixin {
          late AnimationController controller;
          late Animation animation;
        
          @override
          void initState() {
            super.initState();
            controller = AnimationController(
              vsync: this,
              duration: Duration(seconds: 1),
            );
            animation = Tween(begin: 0, end: 300).animate(controller)
              ..addListener(() {
                setState(() {});
              });
            controller.forward();
          }
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text("Tween Animation"),
              ),
              body: Center(
                child: Container(
                  width: animation.value,
                  height: animation.value,
                  color: Colors.blue,
                ),
              ),
            );
          }
        
          @override
          void dispose() {
            controller.dispose();
            super.dispose();
          }
        }
      

2. Implicit Animations:

Implicit animations are a more advanced form of animations where you don't have to manually manage animation controllers. Flutter provides AnimatedWidget and AnimatedBuilder for implicit animations.

         
        class AnimatedLogo extends AnimatedWidget {
          AnimatedLogo({Key? key, required Animation animation})
              : super(key: key, listenable: animation);
        
          @override
          Widget build(BuildContext context) {
            final Animation animation = listenable as Animation;
            return Center(
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 10),
                width: animation.value,
                height: animation.value,
                child: FlutterLogo(),
              ),
            );
          }
        }
      

3. Hero Animations:

Hero animations are used for smooth transitions between two screens where a widget is shared between them.

4. Custom Animations:

You can create custom animations by subclassing the Animation class or by using the AnimationController along with custom curves and intervals.