Flutter animation

Image rotation animation.

Import the image files

We need to import the image files into the project. It is common practice to put image files in a images or assets folder at the root of a Flutter project.

Declare the Image in the pubspec.yaml

pubspec.yaml

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(new ImageRotate());
}

class ImageRotate extends StatefulWidget {
  @override
  _ImageRotateState createState() => new _ImageRotateState();
}

class _ImageRotateState extends State<ImageRotate>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 7),
    );

    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      color: Colors.white,
      child: new AnimatedBuilder(
        animation: animationController,
        child: new Container(
          height: 150.0,
          width: 150.0,
          child: new Image.asset('images/batmanlogo.png'),
        ),
        builder: (BuildContext context, Widget _widget) {
          return new Transform.rotate(
            angle: animationController.value * 6.3,
            child: _widget,
          );
        },
      ),
    );
  }
}

SingleTickerProviderStateMixin

Provides a single [Ticker] that is configured to only tick while the current tree is enabled, as defined by [TickerMode].

To create the [AnimationController] in a [State] that only uses a single [AnimationController], mix in this class, then pass `vsync: this` to the animation controller constructor.

Animation Controller and Animation

A controller for an animation.

Play an animation [forward] or in [reverse], or [stop] an animation. Set the animation to a specific [value]. Define the [upperBound] and [lowerBound] values of an animation. Create a [fling] animation effect using a physics simulation.

By default, an [AnimationController] linearly produces values that range from 0.0 to 1.0, during a given duration. The animation controller generates a new value whenever the device running your app is ready to display a new frame (typically, this rate is around 60 values per second).

An AnimationController needs a [TickerProvider], which is configured using the `vsync` argument on the constructor. If you are creating an AnimationController from a [State], then you can use the [TickerProviderStateMixin] and [SingleTickerProviderStateMixin] classes to obtain a suitable [TickerProvider].

AnimatedBuilder

A general-purpose widget for building animations. AnimatedBuilder is useful for more complex widgets that wish to include an animation as part of a larger build function. To use AnimatedBuilder, simply construct the widget and pass it a builder function.

Transform.rotate

Creates a widget that transforms its child using a rotation around the center. The `angle` argument must not be null. It gives the rotation in clockwise radians.

Screenshots

Transform.rotate animation