Skip to content

Commit 0598c7c

Browse files
samarthagarwalsamarthagarwal
committed
Fixed Flips and Animations
2 parents fb1c178 + ecfb398 commit 0598c7c

File tree

5 files changed

+142
-184
lines changed

5 files changed

+142
-184
lines changed

‎lib/loaders/flip_loader.dart

Lines changed: 122 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,119 @@
11
import 'package:flutter/material.dart';
2-
import 'dart:async';
32
import 'dart:math';
43

54
class FlipLoader extends StatefulWidget {
5+
Color loaderBackground;
6+
Color iconColor;
7+
IconData icon;
8+
String animationType;
9+
10+
FlipLoader({this.loaderBackground = Colors.redAccent, this.iconColor = Colors.white, this.icon = Icons.sync, this.animationType = "full_flip"});
11+
12+
613
@override
7-
_FlipLoaderState createState() => _FlipLoaderState();
14+
_FlipLoaderState createState() => _FlipLoaderState(this.loaderBackground, this.iconColor, this.icon, this.animationType);
815
}
916

1017
class _FlipLoaderState extends State<FlipLoader>
1118
with SingleTickerProviderStateMixin {
19+
1220
AnimationController controller;
1321
Animation<double> rotationHorizontal;
1422
Animation<double> rotationVertical;
15-
double verticalRotation = 0.0;
16-
double horizontalRotation = 0.0;
23+
Color loaderColor;
24+
Color iconColor;
25+
IconData icon;
26+
Widget loaderIconChild;
27+
String animationType;
28+
29+
_FlipLoaderState(this.loaderColor, this.iconColor, this.icon, this.animationType);
1730

1831
@override
1932
void initState() {
2033
super.initState();
2134

22-
controller = AnimationController(
23-
duration: const Duration(milliseconds: 4000), vsync: this);
24-
rotationHorizontal = Tween<double>(begin: -1.0, end: 1.0).animate(
25-
CurvedAnimation(
26-
parent: controller,
27-
curve: Interval(0.0, 0.50, curve: Curves.linear)));
28-
rotationVertical = Tween<double>(begin: -1.0, end: 1.0).animate(
29-
CurvedAnimation(
30-
parent: controller,
31-
curve: Interval(0.50, 1.0, curve: Curves.linear)));
32-
35+
controller = createAnimationController(animationType);
3336

3437
controller.addStatusListener((status){
35-
if (status == AnimationStatus.completed) {
36-
setState(() {
37-
controller.repeat();
38-
});
38+
// Play animation backwards and forwards for full flip
39+
if (animationType == "half_flip") {
40+
print('half line 40');
41+
if (status == AnimationStatus.completed) {
42+
setState(() {
43+
controller.repeat();
44+
});
45+
}
46+
}
47+
// play animation on repeat for half flip
48+
else if (animationType == "full_flip") {
49+
print('full line 57');
50+
if (status == AnimationStatus.completed) {
51+
setState(() {
52+
controller.reverse();
53+
});
54+
}
55+
if (status == AnimationStatus.dismissed) {
56+
setState(() {
57+
controller.forward();
58+
});
59+
}
60+
}
61+
// custom animation state
62+
else {
63+
print("TODO not sure yet");
3964
}
4065
});
4166

4267
controller.forward();
4368
}
4469

70+
AnimationController createAnimationController([String type = 'full_flip']) {
71+
AnimationController animCtrl;
72+
73+
switch(type) {
74+
case "half_flip":
75+
animCtrl = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
76+
77+
// Horizontal animation
78+
this.rotationHorizontal = Tween<double>(begin: 0.0, end: 1.0).animate(
79+
CurvedAnimation(
80+
parent: animCtrl,
81+
curve: Interval(0.0, 0.50, curve: Curves.fastOutSlowIn)));
82+
83+
// Vertical animation
84+
this.rotationVertical = Tween<double>(begin: 0.0, end: 1.0).animate(
85+
CurvedAnimation(
86+
parent: animCtrl,
87+
curve: Interval(0.50, 1.0, curve: Curves.fastOutSlowIn)));
88+
break;
89+
case "full_flip":
90+
default:
91+
animCtrl = AnimationController(duration: const Duration(milliseconds: 4000), vsync: this);
92+
93+
this.rotationHorizontal = Tween<double>(begin: -1.0, end: 1.0).animate(
94+
CurvedAnimation(
95+
parent: animCtrl,
96+
curve: Interval(0.0, 0.50, curve: Curves.linear)));
97+
this.rotationVertical = Tween<double>(begin: -1.0, end: 1.0).animate(
98+
CurvedAnimation(
99+
parent: animCtrl,
100+
curve: Interval(0.50, 1.0, curve: Curves.linear)));
101+
break;
102+
}
103+
104+
return animCtrl;
105+
}
106+
45107
@override
46108
Widget build(BuildContext context) {
109+
if (animationType == "half_flip") {
110+
return buildFullFlipper(context);
111+
} else {
112+
return buildHalfFlipper(context);
113+
}
114+
}
115+
116+
Widget buildHalfFlipper(BuildContext context) {
47117
return new AnimatedBuilder(
48118
animation: controller,
49119
builder: (BuildContext context, Widget child) {
@@ -57,15 +127,15 @@ class _FlipLoaderState extends State<FlipLoader>
57127
child: Container(
58128
decoration: BoxDecoration(
59129
borderRadius: new BorderRadius.all(const Radius.circular(8.0)),
60-
color: Colors.redAccent,
130+
color: loaderColor,
61131
),
62132
width: 40.0,
63133
height: 40.0,
64134
child: new RotationTransition(
65135
turns: rotationHorizontal.value == 1.0 ? rotationVertical : rotationHorizontal,
66136
child: Icon(
67-
Icons.sync,
68-
color: Colors.white,
137+
icon,
138+
color: iconColor,
69139
size: 20.0,
70140
),
71141
)
@@ -75,4 +145,34 @@ class _FlipLoaderState extends State<FlipLoader>
75145
},
76146
);
77147
}
148+
149+
Widget buildFullFlipper(BuildContext context) {
150+
return new AnimatedBuilder(
151+
animation: controller,
152+
builder: (BuildContext context, Widget child) {
153+
return Container(
154+
child: new Transform(
155+
transform: Matrix4.identity()
156+
..setEntry(3, 2, 0.006)
157+
..rotateX((pi * rotationVertical.value))
158+
..rotateY((pi * rotationHorizontal.value)),
159+
alignment: Alignment.center,
160+
child: Container(
161+
decoration: BoxDecoration(
162+
borderRadius: new BorderRadius.all(const Radius.circular(8.0)),
163+
color: loaderColor,
164+
),
165+
width: 40.0,
166+
height: 40.0,
167+
child: new Center(
168+
child: Icon(
169+
icon, color: iconColor
170+
),
171+
),
172+
),
173+
),
174+
);
175+
},
176+
);
177+
}
78178
}

‎lib/loaders/flip_loader_2.dart

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎lib/loaders/flip_loader_3.dart

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎lib/main.dart

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
2-
import 'loaders/color_loader_2.dart';
2+
import 'loaders/color_loader.dart';
3+
import 'loaders/flip_loader.dart';
34

45
void main() => runApp(new MyApp());
56

@@ -24,6 +25,14 @@ class MyHomePage extends StatefulWidget {
2425

2526
class _MyHomePageState extends State<MyHomePage> {
2627

28+
List<Color> colors = [
29+
Colors.red,
30+
Colors.green,
31+
Colors.indigo,
32+
Colors.pinkAccent,
33+
Colors.blue
34+
];
35+
2736
@override
2837
Widget build(BuildContext context) {
2938
return Scaffold(
@@ -33,7 +42,15 @@ class _MyHomePageState extends State<MyHomePage> {
3342
padding: const EdgeInsets.only(top: 100.0),
3443
child: new Column(
3544
children: <Widget>[
36-
new Center(child: ColorLoader2())
45+
Divider(height: 200.0, color: Colors.white,),
46+
ColorLoader(
47+
colors: colors,
48+
duration: Duration(milliseconds: 1200)
49+
),
50+
Divider(height: 150.0, color: Colors.white,),
51+
FlipLoader(loaderBackground: Colors.black, iconColor: Colors.red, icon: Icons.strikethrough_s, animationType: "full_flip"),
52+
Divider(height: 150.0, color: Colors.white),
53+
FlipLoader(loaderBackground: Colors.blueAccent, iconColor: Colors.orangeAccent, icon: Icons.subway, animationType: "half_flip"),
3754
],
3855
),
3956
),

‎pubspec.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,4 +367,4 @@ packages:
367367
source: hosted
368368
version: "2.1.13"
369369
sdks:
370-
dart: ">=2.0.0-dev.52.0 <=2.0.0-dev.54.0.flutter-46ab040e58"
370+
dart: ">=2.0.0-dev.52.0 <=2.0.0-dev.58.0.flutter-f981f09760"

0 commit comments

Comments
 (0)