How To Create Image Rotate Animation Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

The Animation Controller class is used to perform various type of animations in flutter. Today we are going to create image rotation animation in flutter using Animation Controller class. We are using Transform.rotate() property of Animation Controller to rotate image view. We would also give the functionality of app user to start and stop rotation animation using animation Controller.repeat() and animation Controller.stop() method.

How To Create Image Rotate Animation Using Flutter Android App

Image Rotate Animation
Complete Code For Image Rotate Animation In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.amber,
            title: Text('Rotate Image'),
          ),
            backgroundColor: Colors.white,
            body: Center(
                child: RotateImage()
            )
        )
    );
  }
}

class RotateImage extends StatefulWidget {
  @override
  RotateImageState createState() => new RotateImageState();
}

class RotateImageState extends State
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 5),
    );
    animationController.repeat();
  }
  stopRotation(){
    animationController.stop();
  }
  startRotation(){
    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
              color: Colors.white,
              alignment: Alignment.center,
              child: AnimatedBuilder(
                animation: animationController,
                child: Container(
                  height: 150.0,
                  width: 150.0,
                  child: Container(
                    height: 200,
                    width: 200,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      image: new DecorationImage(
                          fit: BoxFit.cover,
                          image: new AssetImage(
                              "assets/download.jpg")
                      ) ,
                    ),
                  )
                ),
                builder: (BuildContext context, Widget _widget) {
                  return Transform.rotate(
                    angle: animationController.value * 6.3,
                    child: _widget,
                  );
                },
              )),

          Container(
              margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
              child:
              RaisedButton(
                onPressed: () => startRotation(),
                child: Text(' Start Rotation '),
                textColor: Colors.white,
                color: Colors.amber,
                padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              )
          ),

          Container(
              margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
              child:
              RaisedButton(
                onPressed: () => stopRotation(),
                child: Text(' Stop Rotation '),
                textColor: Colors.white,
                color: Colors.amber,
                padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              )
          ),

        ]);
  }
}

Related Post