Flutter Tween Animation Widget

Learn how to use the Tween Animation widget in Flutter to create smooth and dynamic animations between two values, Hero Animation widget in Flutter to create smooth transitions between two screens & Staggered Animation Widgets to create dynamic and engaging animations in your app.

Flutter Tween Animation Widget:

The Tween Animation widget is a powerful tool in Flutter that allows you to create smooth and dynamic animations between two values. With this widget, you can animate the properties of your widgets such as opacity, size, position, and color. 

In this tutorial, you'll learn how to use the Tween Animation widget to create beautiful animations in your Flutter app.

import 'package:flutter/material.dart';

class TweenAnimation extends StatefulWidget {
  const TweenAnimation({super.key});

  @override
  TweenAnimationState createState() => TweenAnimationState();
}

class TweenAnimationState extends State<TweenAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    super.initState();
    // Create a new AnimationController with a duration of 2 seconds and the current state as the vsync provider.
    _controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);

    // Create a new Tween animation that will animate the value from 0 to 1.
    _animation = Tween(begin: 0, end: 1).animate(_controller);

    // Start the animation by moving it forward.
    _controller.forward();
  }

  @override
  void dispose() {
    // Dispose of the controller when the animation is no longer needed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tween Animation'),
      ),
      body: Center(
        child: ScaleTransition(
          // Apply the scale animation to the FlutterLogo widget.
          scale: _animation,
          child: const FlutterLogo(size: 150),
        ),
      ),
    );
  }
}

Properties:

• duration (required): Duration of the animation
• vsync (required): The ticker provider for the animation
• begin (required): The starting value of the animation
• end (required): The ending value of the animation
• curve (optional): The easing curve for the animation

..

Flutter Hero Animation

The Hero Animation widget in Flutter allows you to create smooth transitions between two screens by animating a widget from one screen to another. This is a great way to provide a seamless user experience and make your app feel more polished. 

In this tutorial, you'll learn how to use the Hero Animation widget to create beautiful transitions in your Flutter app.

import 'package:flutter/material.dart';

// Define the first screen that will navigate to the second screen with the Hero animation.
class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          // Navigate to the second screen when the image is tapped.
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => const SecondScreen()),
          );
        },
        child: Hero(
          tag: 'image', // Assign a unique tag to the Hero animation.
          child: Image.asset('assets/images/flutter_fly.png'),
        ),
      ),
    );
  }
}

// Define the second screen that will display the same image with the Hero animation.
class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: Hero(
          tag: 'image', // Use the same tag as the first screen to create a Hero animation between the screens.
          child: Image.asset('assets/images/flutter_fly.png'),
        ),
      ),
    );
  }
}

Properties:

• tag (required): A unique identifier for the widget being animated. This should be the same for both the widget in the first screen and the widget in the second screen.
• child (required): The widget to animate. In this case, it's an Image.asset widget, but it can be any widget you want to animate.
• flightShuttleBuilder (optional): A callback that's called to build the widget that's displayed during the animation. If not provided, a default animation will be used.
• placeholderBuilder (optional): A callback that's called to build a placeholder widget while the hero animation is in progress. If not provided, an empty SizedBox will be used.

..

Flutter Staggered Animation Widgets

Flutter's Staggered Animation Widgets allow you to create complex and dynamic animations by animating multiple widgets with a time delay between each animation. This creates a staggered effect that can make your app feel more engaging and interactive. 

In this tutorial, you'll learn how to use Flutter's Staggered Animation Widgets to create stunning animations in your app.

import 'package:flutter/material.dart';

// Define a stateful widget for the staggered animation example.
class StaggeredAnimationExample extends StatefulWidget {
  const StaggeredAnimationExample({super.key});

  @override
  StaggeredAnimationExampleState createState() => StaggeredAnimationExampleState();
}

class StaggeredAnimationExampleState extends State<StaggeredAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    // Create an animation controller with a duration of 2 seconds.
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );

    // Start the animation.
    _animationController.forward();
  }

  @override
  void dispose() {
    // Dispose of the animation controller when the widget is disposed.
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Staggered Animation Example'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          // Create a FadeTransition for each list item with a staggered delay.
          return FadeTransition(
            opacity: _animationController.drive(
              Tween(begin: 0.0, end: 1.0).chain(
                CurveTween(
                  curve: Interval(
                    index / 10, // Calculate a staggered delay based on the index of the item.
                    1.0,
                    curve: Curves.easeIn, // Use an easing curve for the animation.
                  ),
                ),
              ),
            ),
            child: ListTile(
              title: Text('Item $index'),
              subtitle: Text('This is item $index'),
              leading: CircleAvatar(
                child: Text('$index'),
              ),
            ),
          );
        },
      ),
    );
  }
}

Properties:

• vsync: A required parameter that should be set to this if you're using a SingleTickerProviderStateMixin. This will ensure that the animation runs at the correct speed and doesn't consume too many resources.
• duration: A required parameter that sets the length of time the animation will run for.
• curve: An optional parameter that sets the animation curve for the animation. The default value is Curves.linear.
• opacity: A property of the FadeTransition widget that sets the opacity of the widget during the animation. This is what creates the fade effect.
• chain: A method of the Animation class that allows you to chain multiple animations together. This is used to create the staggered effect by adding a time delay between each animation.
• Interval: A class that defines a range between two values. This is used to define the time delay between each animation.

..