Fixed Flips and Animations

Author: samarthagarwal

lib/loaders/flip_loader.dart

@@ -2,16 +2,18 @@ import 'package:flutter/material.dart';
 import 'dart:math';
 
 class FlipLoader extends StatefulWidget {
-  Color loaderBackground;
-  Color iconColor;
-  IconData icon;
-  String animationType;
+  final Color loaderBackground;
+  final Color iconColor;
+  final IconData icon;
+  final String animationType;
+  final String shape;
+  final bool rotateIcon;
 
-  FlipLoader({this.loaderBackground = Colors.redAccent, this.iconColor = Colors.white, this.icon = Icons.sync, this.animationType = "full_flip"});
+  FlipLoader({this.loaderBackground = Colors.redAccent, this.iconColor = Colors.white, this.icon = Icons.sync, this.animationType = "full_flip", this.shape = "square", this.rotateIcon = true});
 
 
   @override
-  _FlipLoaderState createState() => _FlipLoaderState(this.loaderBackground, this.iconColor, this.icon, this.animationType);
+  _FlipLoaderState createState() => _FlipLoaderState(this.loaderBackground, this.iconColor, this.icon, this.animationType, this.shape, this.rotateIcon);
 }
 
 class _FlipLoaderState extends State<FlipLoader>
@@ -25,8 +27,10 @@ class _FlipLoaderState extends State<FlipLoader>
   IconData icon;
   Widget loaderIconChild;
   String animationType;
+  String shape;
+  bool rotateIcon;
 
-  _FlipLoaderState(this.loaderColor, this.iconColor, this.icon, this.animationType);
+  _FlipLoaderState(this.loaderColor, this.iconColor, this.icon, this.animationType, this.shape, this.rotateIcon);
 
   @override
   void initState() {
@@ -37,7 +41,6 @@ class _FlipLoaderState extends State<FlipLoader>
     controller.addStatusListener((status){
       // Play animation backwards and forwards for full flip
       if (animationType == "half_flip") {
-        print('half line 40');
         if (status == AnimationStatus.completed) {
           setState(() {
             controller.repeat();
@@ -46,15 +49,14 @@ class _FlipLoaderState extends State<FlipLoader>
       }
       // play animation on repeat for half flip
       else if (animationType == "full_flip") {
-        print('full line 57');
-        if (status == AnimationStatus.completed) {
+        if (status == AnimationStatus.dismissed) {
           setState(() {
-            controller.reverse();
+            controller.forward();
           });
         }
-        if (status == AnimationStatus.dismissed) {
+        if (status == AnimationStatus.completed) {
           setState(() {
-            controller.forward();
+            controller.repeat();
           });
         }
       }
@@ -72,29 +74,29 @@ class _FlipLoaderState extends State<FlipLoader>
 
     switch(type) {
       case "half_flip":
-        animCtrl = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
+        animCtrl = AnimationController(duration: const Duration(milliseconds: 4000), vsync: this);
 
         // Horizontal animation
         this.rotationHorizontal = Tween<double>(begin: 0.0, end: 1.0).animate(
           CurvedAnimation(
             parent: animCtrl,
-            curve: Interval(0.0, 0.50, curve: Curves.fastOutSlowIn)));
+            curve: Interval(0.0, 0.50, curve: Curves.linear)));
 
         // Vertical animation
         this.rotationVertical = Tween<double>(begin: 0.0, end: 1.0).animate(
           CurvedAnimation(
             parent: animCtrl,
-            curve: Interval(0.50, 1.0, curve: Curves.fastOutSlowIn))); 
+            curve: Interval(0.50, 1.0, curve: Curves.linear)));
       break;
       case "full_flip":
       default:
-        animCtrl = AnimationController(duration: const Duration(milliseconds: 4000), vsync: this);
+        animCtrl = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
 
-        this.rotationHorizontal = Tween<double>(begin: -1.0, end: 1.0).animate(
+        this.rotationHorizontal = Tween<double>(begin: 0.0, end: 1.0).animate(
           CurvedAnimation(
             parent: animCtrl,
             curve: Interval(0.0, 0.50, curve: Curves.linear)));
-        this.rotationVertical = Tween<double>(begin: -1.0, end: 1.0).animate(
+        this.rotationVertical = Tween<double>(begin: 0.0, end: 1.0).animate(
           CurvedAnimation(
             parent: animCtrl,
             curve: Interval(0.50, 1.0, curve: Curves.linear)));
@@ -107,9 +109,9 @@ class _FlipLoaderState extends State<FlipLoader>
   @override
   Widget build(BuildContext context) {
     if (animationType == "half_flip") {
-      return buildFullFlipper(context);
-    } else {
       return buildHalfFlipper(context);
+    } else {
+      return buildFullFlipper(context);
     }
   }
 
@@ -121,18 +123,27 @@ class _FlipLoaderState extends State<FlipLoader>
           child: new Transform(
             transform: Matrix4.identity()
               ..setEntry(3, 2, 0.006)
-              ..rotateX(sin(pi * rotationVertical.value))
-              ..rotateY(sin(pi * rotationHorizontal.value)),
+              ..rotateX(sin(2*pi * rotationVertical.value))
+              ..rotateY(sin(2*pi * rotationHorizontal.value)),
             alignment: Alignment.center,
             child: Container(
               decoration: BoxDecoration(
-                borderRadius: new BorderRadius.all(const Radius.circular(8.0)),
+                shape: shape == "circle" ? BoxShape.circle : BoxShape.rectangle,
+                borderRadius: shape == "circle" ? null : new BorderRadius.all(const Radius.circular(8.0)),
                 color: loaderColor,
               ),
               width: 40.0,
               height: 40.0,
-              child: new RotationTransition(
+              child: rotateIcon == true ? new RotationTransition(
                 turns: rotationHorizontal.value == 1.0 ? rotationVertical : rotationHorizontal,
+                child: new Center(
+                  child: Icon(
+                    icon,
+                    color: iconColor,
+                    size: 20.0,
+                  ),
+                ),
+              ) : Center(
                 child: Icon(
                   icon,
                   color: iconColor,
@@ -154,19 +165,20 @@ class _FlipLoaderState extends State<FlipLoader>
           child: new Transform(
             transform: Matrix4.identity()
               ..setEntry(3, 2, 0.006)
-              ..rotateX((pi * rotationVertical.value))
-              ..rotateY((pi * rotationHorizontal.value)),
+              ..rotateX((2* pi * rotationVertical.value))
+              ..rotateY((2* pi * rotationHorizontal.value)),
             alignment: Alignment.center,
             child: Container(
               decoration: BoxDecoration(
-                borderRadius: new BorderRadius.all(const Radius.circular(8.0)),
+                shape: shape == "circle" ? BoxShape.circle : BoxShape.rectangle,
+                borderRadius: shape == "circle" ? null : new BorderRadius.all(const Radius.circular(8.0)),
                 color: loaderColor,
               ),
               width: 40.0,
               height: 40.0,
               child: new Center(
                 child: Icon(
-                  icon, color: iconColor
+                  icon, color: iconColor, size: 20.0,
                 ),
               ),
             ),