# 12 Flutter: Animations

{% code title="main.dart" %}

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

import './loader.dart';

void main(){
  runApp(
    new MaterialApp(
      home: new Home()
    )
  );
}

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blueAccent,
      body: new Center(
        child: new Loader()
      ),
    );
  }
}

```

{% endcode %}

{% code title="loader.dart" %}

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

class Loader extends StatefulWidget{
  @override
  State createState() => new LoaderState();
}

class LoaderState extends State<Loader> with SingleTickerProviderStateMixin{
  
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState(){
    super.initState();
    //vsync make sure that no unecessary resource are used by our device
    controller = new AnimationController(duration: new Duration(microseconds: 800), vsync: this);
    //curve is used to define how our animation behaves
    animation = new CurvedAnimation(parent: controller, curve: Curves.bounceOut);
    animation.addListener((){
      //we call setState everytime when the animation value changes
      this.setState(() {});
    });
    animation.addStatusListener((AnimationStatus status){
    });
    /*to start the animation we use this but it shows animation
    only once i.e you have to restart app again n again*/

    //controller.forward(); /

    //use controller.repeat() to repeat your animation
    controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Container(
          color: Colors.white,
          height: 3.0,
          width: animation.value * 100.0, //animation.value ranges from 0 to 1  
        ),
        new Padding(padding: new EdgeInsets.only(bottom: 5.0)),
        new Container(
          color: Colors.white,
          height: 3.0,
          width: animation.value * 75.0, //animation.value ranges from 0 to 1  
        ),
        new Padding(padding: new EdgeInsets.only(bottom: 5.0)),
        new Container(
          color: Colors.white,
          height: 3.0,
          width: animation.value * 50.0, //animation.value ranges from 0 to 1  
        ),
      ],
    );
  }
}

```

{% endcode %}


---

# Agent Instructions: 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:

```
GET https://kodestat.gitbook.io/flutter/flutter-animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.