How to Rotate an Image using Animation Controller and Transform ?

· 4 min read
How to Rotate an Image using Animation Controller and Transform
How to Rotate an Image using Animation Controller and Transform

RotationTransition Widget is a widget that is basically used to animates rotation of the widget. So in this article, We will go through How to Rotate an Image using Animation Controller and Transform?

How to Rotate an Image using Animation Controller and Transform?

Consider a code snippet as below:

AnimationController rotationController;

@override
void initState() {
  rotationController = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
  super.initState();
}
//...
RotationTransition(
  turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),
  child: ImgButton(...)
//...
rotationController.forward(from: 0.0); /

Transform Widget rotates image from 0.0 to 1.0 it’s default parameters for AnimationController. For a full circle, you have to set the upper parameter to 2 * pi from the math package.

import 'dart:math';
//...
animationController = AnimationController(vsync: this, duration: Duration(seconds: 5), upperBound: pi * 2);

Consider a code snippet like the below:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    );
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
              child: Icon(Icons.stars),
            ),
            RaisedButton(
              child: Text("go"),
              onPressed: () => _controller.forward(),
            ),
            RaisedButton(
              child: Text("stop"),
              onPressed: () => _controller.reset(),
            ),
          ],
        ),
      ),
    );
  }
}

Step by step guide:

  • First, let your widget state class implement SingleTickerProviderStateMixin.
  • Secondly, define an AnimationController, and don’t forget to dispose of it.
AnimationController _controller;

@override
void initState() {
  _controller = AnimationController(
    duration: const Duration(milliseconds: 5000),
    vsync: this,
  );
  super.initState();
}

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

Then wrap your Widget with RotationTransition.

RotationTransition(
  turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
  child: Icon(Icons.stars),
),
  • Finally, call methods on the AnimationController to start/stop animation.
  • Run the animation once, use:: forward
  • Repeat indefinitely, use:: repeat
  • Stop immediately, use:: stop
  • Stop and set it back to the original rotation, use:: reset
  • Stop and animate to a rotation, use ::animate

Conclusion:

In this article, we have been through How to solve the scroll controller could not attach to any scroll views in Flutter?

Thanks for Reading !!!

Keep Learning !!! Keep Fluttering !!!
Do share your valuable suggestion feedback for the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply