How To Create Rotate Animation Using Flutter Android

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

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

How To Create Rotate Animation Using Flutter Android

Rotate Animation 
Complete COde For Rotate Animation  In Flutter
main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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 animationController;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    )..addListener(() => setState(() {}));
    animation = CurvedAnimation(
      parent: animationController,
      curve: Curves.elasticIn,
    );

    animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
          title: Text("Rotate Animation")),
      body: Center(
        child: RotationTransition(
          turns: animation,
          child: Container(
            height: 80,
            width: 80,
            child: FlutterLogo(),
          ),
        ),
      ),
    );
  }
}

Related Post