> For the complete documentation index, see [llms.txt](https://flutteruniversity.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteruniversity.gitbook.io/docs/learn-flutter/intermediate/animations.md).

# Animations

Animations are a crucial part of modern UI/UX design, allowing developers to create visually appealing and dynamic applications. Flutter provides a powerful and flexible framework for working with animations.

## 1. Basic Animation 🌀

Basic animations involve animating a single property over time. Flutter's `AnimationController` and `Tween` classes are typically used for this purpose.

```dart
AnimationController controller;
Animation<double> animation;

@override
void initState() {
  super.initState();

  controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );

  animation = Tween<double>(
    begin: 0,
    end: 300,
  ).animate(controller)
    ..addListener(() {
      setState(() {});
    });

  controller.forward();
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}
```

## 2. Animated Widgets 🎡

Flutter provides several animated widgets for common animations, like `AnimatedOpacity`, `AnimatedPositioned`, and `AnimatedContainer`.

```dart
AnimatedContainer(
  duration: Duration(seconds: 2),
  width: _isBig ? 200 : 100,
  height: _isBig ? 200 : 100,
  color: Colors.blue,
)
```

## 3. Custom Animations 🎨

For more complex animations, you can create your own custom animated widgets.

```dart
class FadeTransitionExample extends StatelessWidget {
  final Animation<double> animation;

  FadeTransitionExample(this.animation);

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animation,
      child: Container(width: 200, height: 200, color: Colors.blue),
    );
  }
}
```

## Complete Example Code 📜

Here's a complete Flutter app example demonstrating a basic animation using `AnimationController` and `Tween`:

{% tabs %}
{% tab title="Code" %}

```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BasicAnimationExample(),
    );
  }
}

class BasicAnimationExample extends StatefulWidget {
  @override
  State<BasicAnimationExample> createState() => _BasicAnimationExampleState();
}

class _BasicAnimationExampleState extends State<BasicAnimationExample>
    with TickerProviderStateMixin {
  AnimationController? controller;
  Animation<double>? animation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    animation = Tween<double>(
      begin: 0,
      end: 300,
    ).animate(controller!)
      ..addListener(() {
        setState(() {});
      });

    controller!.forward();
  }

  @override
  void dispose() {
    controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Animation Example'),
      ),
      body: Center(
        child: Container(
          width: animation!.value,
          height: animation!.value,
          color: Colors.blue,
        ),
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/C4P4SkkxmIQHtTylYJkO" alt="" width="450"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

In this example:

* We first create an `AnimationController` and a `Tween` object.
* The `Tween` object specifies the beginning and ending values for the animation.
* We start the animation by calling `controller.forward()`.
* We use the `addListener` method to rebuild our widget each time the animation value changes.
* In the `build` method, we create a `Container` whose width and height are set to the current value of the animation, creating a growing square animation.

***

## Assignments 📝

* [ ] Create a Flutter app with a simple animation using `AnimatedContainer`.
* [ ] Experiment with different animated widgets like `AnimatedOpacity` and `AnimatedPositioned`.
* [ ] Create a custom animation using `FadeTransition`.