Skip to content

Commit 1bb8594

Browse files
samarthagarwalsamarthagarwal
committed
Added Loaders
- ColorLoader - FlipLoader - FlipLoader2
1 parent fc72471 commit 1bb8594

File tree

7 files changed

+412
-170
lines changed

7 files changed

+412
-170
lines changed

‎.idea/workspace.xml

Lines changed: 93 additions & 149 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,49 @@ A collection of Login Screens with attractive UIs built with Flutter ready to be
44

55
## Screenshots And Usage
66

7-
### Last Update: Added Buttons
7+
#### Last Update: Added Loaders
8+
9+
##Loaders
10+
11+
![Screenshots on iOS](./screenshots/loaders_1.gif)
12+
13+
`ColorLoader` requires `colors` and `duration` as mandatory parameters. `FlipLoader` and `FlipLoader2` do not require any parameters.
14+
15+
#### Color Loader
16+
```
17+
List<Color> colors = [
18+
Colors.red,
19+
Colors.green,
20+
Colors.indigo,
21+
Colors.pinkAccent,
22+
Colors.blue
23+
];
24+
25+
26+
//Use in widget tree
27+
ColorLoader(
28+
colors: colors,
29+
duration: Duration(milliseconds: 1200)
30+
),
31+
```
32+
33+
#### Flip Loader
34+
```
35+
FlipLoader() // No parameters required
36+
```
37+
If you want to change the icon, size or color, as of now, please edit the file `lib/loaders/flip_loader.dart`.
38+
39+
#### Flip Loader 2
40+
```
41+
FlipLoader1() // No parameters required
42+
```
43+
If you want to change the icon, size or color, as of now, please edit the file `lib/loaders/flip_loader_2.dart`.
44+
45+
___
46+
###### I am working on more loaders. These loaders will also be updated and will be parameterized for easy usage and customization.
47+
___
48+
49+
## Buttons
850

951
![Screenshots on iOS](./screenshots/buttons1.png)
1052

@@ -47,6 +89,7 @@ SimpleRoundOnlyIconButton(
4789
)
4890
```
4991
___
92+
##Login Screens
5093

5194
### Login Screen 1
5295

‎lib/loaders/color_loader.dart

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:async';
3+
4+
class ColorLoader extends StatefulWidget {
5+
final List<Color> colors;
6+
final Duration duration;
7+
8+
ColorLoader({this.colors, this.duration});
9+
10+
@override
11+
_ColorLoaderState createState() =>
12+
_ColorLoaderState(this.colors, this.duration);
13+
}
14+
15+
class _ColorLoaderState extends State<ColorLoader>
16+
with SingleTickerProviderStateMixin {
17+
final List<Color> colors;
18+
final Duration duration;
19+
20+
_ColorLoaderState(this.colors, this.duration);
21+
22+
//noSuchMethod(Invocation i) => super.noSuchMethod(i);
23+
24+
List<ColorTween> tweenAnimations = [];
25+
int tweenIndex = 0;
26+
27+
AnimationController controller;
28+
List<Animation<Color>> colorAnimations = [];
29+
30+
@override
31+
void initState() {
32+
super.initState();
33+
34+
35+
36+
controller = new AnimationController(
37+
vsync: this,
38+
duration: duration,
39+
);
40+
41+
for (int i = 0; i < colors.length - 1; i++) {
42+
tweenAnimations.add(ColorTween(begin: colors[i], end: colors[i + 1]));
43+
}
44+
45+
tweenAnimations
46+
.add(ColorTween(begin: colors[colors.length - 1], end: colors[0]));
47+
48+
for (int i = 0; i < colors.length; i++) {
49+
Animation<Color> animation = tweenAnimations[i].animate(CurvedAnimation(
50+
parent: controller,
51+
curve: Interval((1 / colors.length) * (i + 1) - 0.05,
52+
(1 / colors.length) * (i + 1),
53+
curve: Curves.linear)));
54+
55+
colorAnimations.add(animation);
56+
}
57+
58+
print(colorAnimations.length);
59+
60+
tweenIndex = 0;
61+
62+
Timer.periodic(duration, (Timer t) {
63+
setState(() {
64+
tweenIndex = (tweenIndex + 1) % colors.length;
65+
});
66+
});
67+
68+
controller.forward();
69+
}
70+
71+
@override
72+
Widget build(BuildContext context) {
73+
return Container(
74+
child: Center(
75+
child: CircularProgressIndicator(
76+
strokeWidth: 5.0,
77+
valueColor: colorAnimations[tweenIndex],
78+
),
79+
),
80+
);
81+
}
82+
83+
@override
84+
void dispose() {
85+
super.dispose();
86+
controller.dispose();
87+
}
88+
}

‎lib/loaders/flip_loader.dart

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:async';
3+
import 'dart:math';
4+
5+
class FlipLoader extends StatefulWidget {
6+
@override
7+
_FlipLoaderState createState() => _FlipLoaderState();
8+
}
9+
10+
class _FlipLoaderState extends State<FlipLoader>
11+
with SingleTickerProviderStateMixin {
12+
AnimationController controller;
13+
Animation<double> rotationHorizontal;
14+
Animation<double> rotationVertical;
15+
double verticalRotation = 0.0;
16+
double horizontalRotation = 0.0;
17+
18+
@override
19+
void initState() {
20+
super.initState();
21+
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+
33+
34+
controller.addStatusListener((status){
35+
if (status == AnimationStatus.completed) {
36+
setState(() {
37+
controller.repeat();
38+
});
39+
}
40+
});
41+
42+
controller.forward();
43+
}
44+
45+
@override
46+
Widget build(BuildContext context) {
47+
return new AnimatedBuilder(
48+
animation: controller,
49+
builder: (BuildContext context, Widget child) {
50+
return Container(
51+
child: new Transform(
52+
transform: Matrix4.identity()
53+
..setEntry(3, 2, 0.006)
54+
..rotateX(sin(pi * rotationVertical.value))
55+
..rotateY(sin(pi * rotationHorizontal.value)),
56+
alignment: Alignment.center,
57+
child: Container(
58+
decoration: BoxDecoration(
59+
borderRadius: new BorderRadius.all(const Radius.circular(8.0)),
60+
color: Colors.redAccent,
61+
),
62+
width: 40.0,
63+
height: 40.0,
64+
child: new RotationTransition(
65+
turns: rotationHorizontal.value == 1.0 ? rotationVertical : rotationHorizontal,
66+
child: Icon(
67+
Icons.sync,
68+
color: Colors.white,
69+
size: 20.0,
70+
),
71+
)
72+
),
73+
),
74+
);
75+
},
76+
);
77+
}
78+
}

‎lib/loaders/flip_loader_2.dart

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:async';
3+
import 'dart:math';
4+
5+
class FlipLoader2 extends StatefulWidget {
6+
@override
7+
_FlipLoader2State createState() => _FlipLoader2State();
8+
}
9+
10+
class _FlipLoader2State extends State<FlipLoader2>
11+
with SingleTickerProviderStateMixin {
12+
AnimationController controller;
13+
Animation<double> rotationHorizontal;
14+
Animation<double> rotationVertical;
15+
double verticalRotation = 0.0;
16+
double horizontalRotation = 0.0;
17+
18+
@override
19+
void initState() {
20+
super.initState();
21+
22+
controller = AnimationController(
23+
duration: const Duration(milliseconds: 2000), vsync: this);
24+
rotationHorizontal = Tween<double>(begin: 0.0, end: 1.0).animate(
25+
CurvedAnimation(
26+
parent: controller,
27+
curve: Interval(0.0, 0.50, curve: Curves.fastOutSlowIn)));
28+
rotationVertical = Tween<double>(begin: 0.0, end: 1.0).animate(
29+
CurvedAnimation(
30+
parent: controller,
31+
curve: Interval(0.50, 1.0, curve: Curves.fastOutSlowIn)));
32+
33+
controller.addStatusListener((status) {
34+
if (status == AnimationStatus.completed) {
35+
setState(() {
36+
controller.reverse();
37+
});
38+
}
39+
if (status == AnimationStatus.dismissed) {
40+
setState(() {
41+
controller.forward();
42+
});
43+
}
44+
});
45+
46+
controller.forward();
47+
}
48+
49+
@override
50+
Widget build(BuildContext context) {
51+
return new AnimatedBuilder(
52+
animation: controller,
53+
builder: (BuildContext context, Widget child) {
54+
return Container(
55+
child: new Transform(
56+
transform: Matrix4.identity()
57+
..setEntry(3, 2, 0.006)
58+
..rotateX((pi * rotationVertical.value))
59+
..rotateY((pi * rotationHorizontal.value)),
60+
alignment: Alignment.center,
61+
child: Container(
62+
decoration: BoxDecoration(
63+
borderRadius: new BorderRadius.all(const Radius.circular(8.0)),
64+
color: Colors.blueAccent,
65+
),
66+
width: 40.0,
67+
height: 40.0,
68+
child: new Center(
69+
child: Icon(
70+
Icons.wifi, color: Colors.white
71+
),
72+
),
73+
),
74+
),
75+
);
76+
},
77+
);
78+
}
79+
}

‎lib/main.dart

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_login_screens/Examples/buttons.dart';
3-
2+
import 'loaders/color_loader.dart';
3+
import 'loaders/flip_loader.dart';
4+
import 'loaders/flip_loader_2.dart';
45

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

@@ -24,28 +25,37 @@ class MyHomePage extends StatefulWidget {
2425
}
2526

2627
class _MyHomePageState extends State<MyHomePage> {
28+
29+
List<Color> colors = [
30+
Colors.red,
31+
Colors.green,
32+
Colors.indigo,
33+
Colors.pinkAccent,
34+
Colors.blue
35+
];
36+
2737
@override
2838
Widget build(BuildContext context) {
2939
return Scaffold(
3040
backgroundColor: Colors.white,
31-
body: new SingleChildScrollView(
32-
child: ButtonExample(),
33-
)
34-
// child: LoginScreen1(
35-
// primaryColor: Color(0xFF4aa0d5),
36-
// backgroundColor: Colors.white,
37-
// backgroundImage: new AssetImage("assets/images/full-bloom.png"),
38-
// ),
39-
// child: LoginScreen2(
40-
// backgroundColor1: Color(0xFF444152),
41-
// backgroundColor2: Color(0xFF6f6c7d),
42-
// highlightColor: Color(0xfff65aa3),
43-
// foregroundColor: Colors.white,
44-
// logo: new AssetImage("assets/images/full-bloom.png"),
45-
// ),
46-
// child: LoginScreen3()
41+
body: Container(
42+
child: new Padding(
43+
padding: const EdgeInsets.only(top: 100.0),
44+
child: new Column(
45+
children: <Widget>[
46+
Divider(height: 200.0, color: Colors.white,),
47+
ColorLoader(
48+
colors: colors,
49+
duration: Duration(milliseconds: 1200)
50+
),
51+
Divider(height: 150.0, color: Colors.white,),
52+
FlipLoader2(),
53+
Divider(height: 150.0, color: Colors.white,),
54+
FlipLoader()
55+
],
56+
),
57+
),
58+
),
4759
);
4860
}
4961
}
50-
51-

‎screenshots/loaders_1.gif

1.42 MB
Loading

0 commit comments

Comments
 (0)