Skip to content

Commit afcd756

Browse files
mitesh77mitesh77
committed
introduction animation template done
1 parent eb8d3f8 commit afcd756

21 files changed

+961
-8
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
# Best-Flutter-UI-Templates
2+
23
completely free for everyone. Its build-in Flutter Dart.
34

5+
![Image](best_flutter_ui_templates/assets/introduction_animation/introduction_animation.png)
46
![Image](best_flutter_ui_templates/assets/hotel/hotel_booking.png)
57
![Image](best_flutter_ui_templates/assets/fitness_app/fitness_app.png)
68
![Image](images/custom_drawer.png)
79
![Image](best_flutter_ui_templates/assets/design_course/design_course.png)
810

911
### Some Screenshots
1012

11-
<img src="images/hotel_booking.gif" height="300em"><img src="images/custom_drawer.gif" height="300em"><img src="images/fitness_app.gif" height="300em" /> <img src="images/design_course.gif" height="300em" />
13+
<img src="images/introduction_animation.gif" height="300em"><img src="images/hotel_booking.gif" height="300em"><img src="images/custom_drawer.gif" height="300em"><img src="images/fitness_app.gif" height="300em" /> <img src="images/design_course.gif" height="300em" />

‎best_flutter_ui_templates/assets/introduction_animation/care_image.png

42 KB
Loading

‎best_flutter_ui_templates/assets/introduction_animation/introduction_animation.png

411 KB
Loading

‎best_flutter_ui_templates/assets/introduction_animation/introduction_image.png

58.6 KB
Loading

‎best_flutter_ui_templates/assets/introduction_animation/mood_dairy_image.png

61.6 KB
Loading

‎best_flutter_ui_templates/assets/introduction_animation/relax_image.png

64.3 KB
Loading

‎best_flutter_ui_templates/assets/introduction_animation/welcome.png

68.1 KB
Loading

‎best_flutter_ui_templates/lib/home_screen.dart

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,11 @@ class HomeListView extends StatelessWidget {
201201
child: Stack(
202202
alignment: AlignmentDirectional.center,
203203
children: <Widget>[
204-
Image.asset(
205-
listData!.imagePath,
206-
fit: BoxFit.cover,
204+
Positioned.fill(
205+
child: Image.asset(
206+
listData!.imagePath,
207+
fit: BoxFit.cover,
208+
),
207209
),
208210
Material(
209211
color: Colors.transparent,

‎best_flutter_ui_templates/lib/introduction_animation/components/care_view.dart

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import 'package:flutter/material.dart';
2+
3+
class CareView extends StatelessWidget {
4+
final AnimationController animationController;
5+
6+
const CareView({Key? key, required this.animationController})
7+
: super(key: key);
8+
9+
@override
10+
Widget build(BuildContext context) {
11+
final _firstHalfAnimation =
12+
Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
13+
.animate(CurvedAnimation(
14+
parent: animationController,
15+
curve: Interval(
16+
0.2,
17+
0.4,
18+
curve: Curves.fastOutSlowIn,
19+
),
20+
));
21+
final _secondHalfAnimation =
22+
Tween<Offset>(begin: Offset(0, 0), end: Offset(-1, 0))
23+
.animate(CurvedAnimation(
24+
parent: animationController,
25+
curve: Interval(
26+
0.4,
27+
0.6,
28+
curve: Curves.fastOutSlowIn,
29+
),
30+
));
31+
final _relaxFirstHalfAnimation =
32+
Tween<Offset>(begin: Offset(2, 0), end: Offset(0, 0))
33+
.animate(CurvedAnimation(
34+
parent: animationController,
35+
curve: Interval(
36+
0.2,
37+
0.4,
38+
curve: Curves.fastOutSlowIn,
39+
),
40+
));
41+
final _relaxSecondHalfAnimation =
42+
Tween<Offset>(begin: Offset(0, 0), end: Offset(-2, 0))
43+
.animate(CurvedAnimation(
44+
parent: animationController,
45+
curve: Interval(
46+
0.4,
47+
0.6,
48+
curve: Curves.fastOutSlowIn,
49+
),
50+
));
51+
52+
final _imageFirstHalfAnimation =
53+
Tween<Offset>(begin: Offset(4, 0), end: Offset(0, 0))
54+
.animate(CurvedAnimation(
55+
parent: animationController,
56+
curve: Interval(
57+
0.2,
58+
0.4,
59+
curve: Curves.fastOutSlowIn,
60+
),
61+
));
62+
final _imageSecondHalfAnimation =
63+
Tween<Offset>(begin: Offset(0, 0), end: Offset(-4, 0))
64+
.animate(CurvedAnimation(
65+
parent: animationController,
66+
curve: Interval(
67+
0.4,
68+
0.6,
69+
curve: Curves.fastOutSlowIn,
70+
),
71+
));
72+
73+
return SlideTransition(
74+
position: _firstHalfAnimation,
75+
child: SlideTransition(
76+
position: _secondHalfAnimation,
77+
child: Padding(
78+
padding: const EdgeInsets.only(bottom: 100),
79+
child: Column(
80+
mainAxisAlignment: MainAxisAlignment.center,
81+
children: [
82+
SlideTransition(
83+
position: _imageFirstHalfAnimation,
84+
child: SlideTransition(
85+
position: _imageSecondHalfAnimation,
86+
child: Container(
87+
constraints: BoxConstraints(maxWidth: 350, maxHeight: 250),
88+
child: Image.asset(
89+
'assets/introduction_animation/care_image.png',
90+
fit: BoxFit.contain,
91+
),
92+
),
93+
),
94+
),
95+
SlideTransition(
96+
position: _relaxFirstHalfAnimation,
97+
child: SlideTransition(
98+
position: _relaxSecondHalfAnimation,
99+
child: Text(
100+
"Care",
101+
style:
102+
TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold),
103+
),
104+
),
105+
),
106+
Padding(
107+
padding:
108+
EdgeInsets.only(left: 64, right: 64, bottom: 16, top: 16),
109+
child: Text(
110+
"Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore",
111+
textAlign: TextAlign.center,
112+
),
113+
),
114+
],
115+
),
116+
),
117+
),
118+
);
119+
}
120+
}

‎best_flutter_ui_templates/lib/introduction_animation/components/center_next_button.dart

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import 'package:animations/animations.dart';
2+
import 'package:flutter/material.dart';
3+
4+
class CenterNextButton extends StatelessWidget {
5+
final AnimationController animationController;
6+
final VoidCallback onNextClick;
7+
const CenterNextButton(
8+
{Key? key, required this.animationController, required this.onNextClick})
9+
: super(key: key);
10+
11+
@override
12+
Widget build(BuildContext context) {
13+
final _topMoveAnimation =
14+
Tween<Offset>(begin: Offset(0, 5), end: Offset(0, 0))
15+
.animate(CurvedAnimation(
16+
parent: animationController,
17+
curve: Interval(
18+
0.0,
19+
0.2,
20+
curve: Curves.fastOutSlowIn,
21+
),
22+
));
23+
final _signUpMoveAnimation =
24+
Tween<double>(begin: 0, end: 1.0).animate(CurvedAnimation(
25+
parent: animationController,
26+
curve: Interval(
27+
0.6,
28+
0.8,
29+
curve: Curves.fastOutSlowIn,
30+
),
31+
));
32+
final _loginTextMoveAnimation =
33+
Tween<Offset>(begin: Offset(0, 5), end: Offset(0, 0))
34+
.animate(CurvedAnimation(
35+
parent: animationController,
36+
curve: Interval(
37+
0.6,
38+
0.8,
39+
curve: Curves.fastOutSlowIn,
40+
),
41+
));
42+
43+
return Padding(
44+
padding:
45+
EdgeInsets.only(bottom: 16 + MediaQuery.of(context).padding.bottom),
46+
child: Column(
47+
mainAxisAlignment: MainAxisAlignment.end,
48+
crossAxisAlignment: CrossAxisAlignment.center,
49+
children: [
50+
SlideTransition(
51+
position: _topMoveAnimation,
52+
child: AnimatedBuilder(
53+
animation: animationController,
54+
builder: (context, child) => AnimatedOpacity(
55+
opacity: animationController.value >= 0.2 &&
56+
animationController.value <= 0.6
57+
? 1
58+
: 0,
59+
duration: Duration(milliseconds: 480),
60+
child: _pageView(),
61+
),
62+
),
63+
),
64+
SlideTransition(
65+
position: _topMoveAnimation,
66+
child: AnimatedBuilder(
67+
animation: animationController,
68+
builder: (context, child) => Padding(
69+
padding: EdgeInsets.only(
70+
bottom: 38 - (38 * _signUpMoveAnimation.value)),
71+
child: Container(
72+
height: 58,
73+
width: 58 + (200 * _signUpMoveAnimation.value),
74+
decoration: BoxDecoration(
75+
borderRadius: BorderRadius.circular(
76+
8 + 32 * (1 - _signUpMoveAnimation.value)),
77+
color: Color(0xff132137),
78+
),
79+
child: PageTransitionSwitcher(
80+
duration: Duration(milliseconds: 480),
81+
reverse: _signUpMoveAnimation.value < 0.7,
82+
transitionBuilder: (
83+
Widget child,
84+
Animation<double> animation,
85+
Animation<double> secondaryAnimation,
86+
) {
87+
return SharedAxisTransition(
88+
fillColor: Colors.transparent,
89+
child: child,
90+
animation: animation,
91+
secondaryAnimation: secondaryAnimation,
92+
transitionType: SharedAxisTransitionType.vertical,
93+
);
94+
},
95+
child: _signUpMoveAnimation.value > 0.7
96+
? InkWell(
97+
key: ValueKey('Sign Up button'),
98+
onTap: onNextClick,
99+
child: Padding(
100+
padding: EdgeInsets.only(left: 16.0, right: 16.0),
101+
child: Row(
102+
mainAxisAlignment:
103+
MainAxisAlignment.spaceBetween,
104+
children: [
105+
Text(
106+
'Sign Up',
107+
style: TextStyle(
108+
color: Colors.white,
109+
fontSize: 18,
110+
fontWeight: FontWeight.w500,
111+
),
112+
),
113+
Icon(Icons.arrow_forward_rounded,
114+
color: Colors.white),
115+
],
116+
),
117+
),
118+
)
119+
: InkWell(
120+
key: ValueKey('next button'),
121+
onTap: onNextClick,
122+
child: Padding(
123+
padding: EdgeInsets.all(16.0),
124+
child: Icon(Icons.arrow_forward_ios_rounded,
125+
color: Colors.white),
126+
),
127+
),
128+
),
129+
),
130+
),
131+
),
132+
),
133+
Padding(
134+
padding: const EdgeInsets.only(top: 8),
135+
child: SlideTransition(
136+
position: _loginTextMoveAnimation,
137+
child: Row(
138+
mainAxisAlignment: MainAxisAlignment.center,
139+
children: [
140+
Text(
141+
'Already have an account? ',
142+
style: TextStyle(
143+
color: Colors.grey,
144+
fontSize: 14,
145+
fontWeight: FontWeight.normal,
146+
),
147+
),
148+
Text(
149+
'Login',
150+
style: TextStyle(
151+
color: Color(0xff132137),
152+
fontSize: 16,
153+
fontWeight: FontWeight.bold,
154+
),
155+
),
156+
],
157+
),
158+
),
159+
),
160+
],
161+
),
162+
);
163+
}
164+
165+
Widget _pageView() {
166+
int _selectedIndex = 0;
167+
168+
if (animationController.value >= 0.7) {
169+
_selectedIndex = 3;
170+
} else if (animationController.value >= 0.5) {
171+
_selectedIndex = 2;
172+
} else if (animationController.value >= 0.3) {
173+
_selectedIndex = 1;
174+
} else if (animationController.value >= 0.1) {
175+
_selectedIndex = 0;
176+
}
177+
178+
return Padding(
179+
padding: const EdgeInsets.only(bottom: 16),
180+
child: Row(
181+
mainAxisSize: MainAxisSize.min,
182+
children: [
183+
for (var i = 0; i < 4; i++)
184+
Padding(
185+
padding: const EdgeInsets.all(4),
186+
child: AnimatedContainer(
187+
duration: Duration(milliseconds: 480),
188+
decoration: BoxDecoration(
189+
borderRadius: BorderRadius.circular(32),
190+
color: _selectedIndex == i
191+
? Color(0xff132137)
192+
: Color(0xffE3E4E4),
193+
),
194+
width: 10,
195+
height: 10,
196+
),
197+
)
198+
],
199+
),
200+
);
201+
}
202+
}

0 commit comments

Comments
 (0)