Skip to content

Commit d10144d

Browse files
dvmjoshidvmjoshi
committed
animation added
1 parent 54c4549 commit d10144d

File tree

2 files changed

+170
-10
lines changed

2 files changed

+170
-10
lines changed

‎lib/homepage.dart

+165-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,65 @@
1+
import 'dart:ui';
2+
13
import 'package:flutter/material.dart';
4+
5+
import 'detailpage.dart';
26
class HomePage extends StatefulWidget {
37
@override
48
_HomePageState createState() => _HomePageState();
59
}
610

7-
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
11+
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
812
AnimationController _controller;
913
Animation _animation;
10-
@override
14+
AnimationController _colorController;
15+
Animatable<Color> background = TweenSequence<Color>([
16+
TweenSequenceItem(
17+
weight: 1.0,
18+
tween: ColorTween(
19+
begin: Colors.red,
20+
end: Colors.green,
21+
),
22+
),
23+
TweenSequenceItem(
24+
weight: 1.0,
25+
tween: ColorTween(
26+
begin: Colors.green,
27+
end: Colors.blue,
28+
),
29+
),
30+
TweenSequenceItem(
31+
weight: 1.0,
32+
tween: ColorTween(
33+
begin: Colors.blue,
34+
end: Colors.pink,
35+
),
36+
),
37+
TweenSequenceItem(
38+
weight: 1.0,
39+
tween: ColorTween(
40+
begin: Colors.pink,
41+
end: Colors.red,
42+
),
43+
),]);
44+
@override
1145
void initState() {
1246
// TODO: implement initState
1347
super.initState();
1448
_controller=AnimationController(vsync: this,
15-
duration: Duration(milliseconds: 1200));
49+
duration: Duration(milliseconds: 1200));
1650
_animation=CurvedAnimation(parent: _controller, curve:Curves.easeIn);
51+
setState(() {
52+
_colorController = AnimationController(vsync: this,duration: const Duration(seconds: 5),)
53+
..addListener(() {
54+
setState(() {
55+
56+
});
57+
})..addStatusListener((status) {
58+
if(status == AnimationStatus.completed){
59+
_colorController.forward(from: 0.0);
60+
}
61+
})..forward();
62+
});
1763
}
1864
@override
1965
void dispose() {
@@ -23,13 +69,125 @@ class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin
2369
}
2470
@override
2571
Widget build(BuildContext context) {
72+
var textTheme = Theme.of(context).textTheme;
2673
return Scaffold(
74+
backgroundColor: Color(0xff242424),
2775
appBar: AppBar(
76+
backgroundColor: Color(0xff242424),
2877
title: Text("Animations"),
2978
),
30-
body: Center(child: FadeTransition(
31-
opacity: _animation,
32-
child: Image.network("https://cdn.dribbble.com/users/3281732/screenshots/7421960/media/9dd2e5490681a75e42c7f2c39bfeb905.jpeg"))),
79+
body: Column(
80+
children: [
81+
Center(child: FadeTransition(
82+
opacity: _animation,
83+
child:Padding(
84+
padding: const EdgeInsets.all(8.0),
85+
child: GestureDetector(
86+
onTap: () {
87+
Navigator.push(
88+
context,
89+
MaterialPageRoute(
90+
builder: (context) => HeroDetail()),
91+
);
92+
},
93+
child: Stack(
94+
children: [
95+
Hero(
96+
tag: "photo",
97+
child: Container(
98+
height: 340,
99+
width: 567,
100+
decoration: BoxDecoration(
101+
image: DecorationImage(
102+
image: AssetImage("images/joker.jpg"),
103+
fit: BoxFit.cover,
104+
),
105+
borderRadius: BorderRadius.circular(11),
106+
),
107+
),
108+
),
109+
Positioned(
110+
height: 100,
111+
width: 567,
112+
bottom: 0,
113+
child: ClipRRect(
114+
borderRadius: BorderRadius.only(
115+
bottomLeft: Radius.circular(11),
116+
bottomRight: Radius.circular(11),
117+
),
118+
child: BackdropFilter(
119+
filter: ImageFilter.blur(
120+
sigmaX: 16,
121+
sigmaY: 16,
122+
),
123+
child: Container(
124+
color: Colors.grey[600].withOpacity(0.5),
125+
),
126+
),
127+
),
128+
),
129+
Positioned(
130+
bottom: 30,
131+
child: Padding(
132+
padding: const EdgeInsets.all(8.0),
133+
child: Column(
134+
crossAxisAlignment: CrossAxisAlignment.start,
135+
children: [
136+
Text(
137+
'JOKER ARRIVES IN FLUTTER WORLD',
138+
style: textTheme.subtitle1.copyWith(
139+
color: Colors.white,
140+
fontFamily: 'WorkSans',
141+
fontWeight: FontWeight.w600,
142+
),
143+
),
144+
//Ymargin(4),
145+
Container(
146+
height: 30,
147+
width: MediaQuery.of(context).size.width,
148+
child: Text(
149+
150+
'Smile, because it confuses people. Smile, because it’s easier than explaining what is killing you inside. ',
151+
style: textTheme.caption.copyWith(
152+
color: Colors.white,
153+
fontFamily: 'WorkSans',
154+
),
155+
maxLines: 2,
156+
),
157+
),
158+
],
159+
),
160+
),
161+
),
162+
],
163+
),
164+
),
165+
)
166+
//Image.network("https://cdn.dribbble.com/users/3281732/screenshots/7421960/media/9dd2e5490681a75e42c7f2c39bfeb905.jpeg")
167+
)),
168+
Padding(
169+
padding: const EdgeInsets.all(10.0),
170+
child: Row(
171+
children: [
172+
Container(
173+
width: 3.5,
174+
height: 22,
175+
color: background.evaluate(AlwaysStoppedAnimation(_colorController.value)),
176+
),
177+
SizedBox(width: 4,),
178+
Text(
179+
'DARK SIDE',
180+
style: TextStyle(
181+
color: Colors.white,
182+
fontSize: 20,
183+
letterSpacing: 3
184+
),
185+
)
186+
],
187+
),
188+
),
189+
],
190+
),
33191
floatingActionButtonLocation:
34192
FloatingActionButtonLocation.centerFloat,
35193
floatingActionButton: FloatingActionButton(
@@ -43,3 +201,4 @@ class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin
43201
);
44202
}
45203
}
204+

‎pubspec.yaml

+5-4
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,12 @@ flutter:
4343
# included with your application, so that you can use the icons in
4444
# the material Icons class.
4545
uses-material-design: true
46-
46+
assets:
47+
- images/flutter.png
48+
- images/joker.jpg
4749
# To add assets to your application, add an assets section, like this:
48-
# assets:
49-
# - images/a_dot_burr.jpeg
50-
# - images/a_dot_ham.jpeg
50+
51+
5152

5253
# An image asset can refer to one or more resolution-specific "variants", see
5354
# https://flutter.dev/assets-and-images/#resolution-aware.

0 commit comments

Comments
 (0)