> 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`.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://flutteruniversity.gitbook.io/docs/learn-flutter/intermediate/animations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.