Skip to content

Commit e460bce

Browse files
TheAlphamercTheAlphamerc
committed
Make favourite icon clickable on pokemon detail.
1 parent 0930f0d commit e460bce

File tree

3 files changed

+727
-459
lines changed

3 files changed

+727
-459
lines changed

‎lib/pages/homePageBody.dart‎

Lines changed: 142 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -7,73 +7,75 @@ class HomePageBody extends StatefulWidget {
77
class _HomePageBodyState extends State<HomePageBody> {
88
bool isViewAll = false;
99
double viewAllHeight = 0;
10-
10+
bool isSearchFieldEnable = false;
1111
Widget _getCategoryCard(String title, Color color, Color seondaryColor) {
1212
return InkWell(
13-
onTap: (){ Navigator.of(context).pushNamed('/pokemonList');},
13+
onTap: () {
14+
Navigator.of(context).pushNamed('/pokemonList');
15+
},
1416
child: Stack(
15-
children: <Widget>[
16-
Container(
17-
padding: EdgeInsets.only(left: 20, top: 25, bottom: 20),
18-
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
19-
width: MediaQuery.of(context).size.width / 2 - 30,
20-
height: 70,
21-
decoration: BoxDecoration(
22-
color: color, borderRadius: BorderRadius.circular(10)),
23-
child: Text(
24-
title,
25-
style: TextStyle(color: Colors.white, fontSize: 18),
17+
children: <Widget>[
18+
Container(
19+
padding: EdgeInsets.only(left: 20, top: 25, bottom: 20),
20+
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
21+
width: MediaQuery.of(context).size.width / 2 - 30,
22+
height: 70,
23+
decoration: BoxDecoration(
24+
color: color, borderRadius: BorderRadius.circular(10)),
25+
child: Text(
26+
title,
27+
style: TextStyle(color: Colors.white, fontSize: 18),
28+
),
2629
),
27-
),
28-
Positioned(
29-
top: -15,
30-
left: -20,
31-
child: Container(
32-
margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
33-
child: ClipRRect(
34-
borderRadius: BorderRadius.only(),
35-
child: Align(
36-
alignment: Alignment.topLeft,
37-
heightFactor: 1,
38-
widthFactor: 1,
39-
child: Container( height: 30,
40-
width: 30,
41-
decoration: BoxDecoration(
42-
color: seondaryColor,
43-
borderRadius: BorderRadius.only(
44-
topLeft: Radius.circular(10.0),
45-
topRight: Radius.circular(0.0),
46-
bottomRight: Radius.circular(40.0),
47-
bottomLeft: Radius.circular(0.0),
48-
))
49-
,)
50-
),
30+
Positioned(
31+
top: -15,
32+
left: -20,
33+
child: Container(
34+
margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
35+
child: ClipRRect(
36+
borderRadius: BorderRadius.only(),
37+
child: Align(
38+
alignment: Alignment.topLeft,
39+
heightFactor: 1,
40+
widthFactor: 1,
41+
child: Container(
42+
height: 30,
43+
width: 30,
44+
decoration: BoxDecoration(
45+
color: seondaryColor,
46+
borderRadius: BorderRadius.only(
47+
topLeft: Radius.circular(10.0),
48+
topRight: Radius.circular(0.0),
49+
bottomRight: Radius.circular(40.0),
50+
bottomLeft: Radius.circular(0.0),
51+
)),
52+
)),
53+
),
54+
),
5155
),
52-
),
53-
),
54-
Container(
55-
alignment: FractionalOffset.topRight,
56-
width: 165,
57-
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
58-
child: ClipRRect(
59-
borderRadius: BorderRadius.only(
60-
topRight: Radius.circular(10),
61-
bottomRight: Radius.circular(10)),
62-
child: Align(
63-
alignment: FractionalOffset.centerLeft,
64-
heightFactor: .87,
65-
widthFactor: .7,
66-
child: Transform.rotate(
67-
angle: 0,
68-
child: Image.asset(
69-
'assets/images/pokeball.png',
70-
color: seondaryColor,
71-
),
72-
)),
56+
Container(
57+
alignment: FractionalOffset.topRight,
58+
width: 165,
59+
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
60+
child: ClipRRect(
61+
borderRadius: BorderRadius.only(
62+
topRight: Radius.circular(10),
63+
bottomRight: Radius.circular(10)),
64+
child: Align(
65+
alignment: FractionalOffset.centerLeft,
66+
heightFactor: .87,
67+
widthFactor: .7,
68+
child: Transform.rotate(
69+
angle: 0,
70+
child: Image.asset(
71+
'assets/images/pokeball.png',
72+
color: seondaryColor,
73+
),
74+
)),
75+
),
7376
),
74-
),
75-
],
76-
),
77+
],
78+
),
7779
);
7880
}
7981

@@ -91,24 +93,27 @@ class _HomePageBodyState extends State<HomePageBody> {
9193

9294
Widget _searchBox() {
9395
return Container(
94-
height: 40,
95-
padding: EdgeInsets.symmetric(horizontal: 15),
96-
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 30),
97-
decoration: BoxDecoration(
98-
color: Color(0xfff6f6f6), borderRadius: BorderRadius.circular(50)),
99-
child: Row(
100-
children: <Widget>[
101-
Icon(Icons.search),
102-
SizedBox(
103-
width: 20,
104-
),
105-
Text(
106-
'Search Pokemon, Move, Ability',
107-
style: TextStyle(color: Colors.black38),
108-
),
109-
],
110-
),
111-
);
96+
height: 40,
97+
padding: EdgeInsets.symmetric(horizontal: 15),
98+
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 30),
99+
decoration: BoxDecoration(
100+
color: Color(0xfff6f6f6), borderRadius: BorderRadius.circular(50)),
101+
child: Stack(
102+
children: <Widget>[
103+
Positioned(
104+
top: 10,
105+
child: Icon(
106+
Icons.search,
107+
),
108+
),
109+
TextField(
110+
onTap: (){
111+
isViewAll = false;
112+
},
113+
decoration: InputDecoration(contentPadding: EdgeInsets.only(left: 30,top: 12), border:InputBorder.none , disabledBorder: InputBorder.none, hintText: 'Search Pokemon, Move, Ability'),
114+
)
115+
],
116+
));
112117
}
113118

114119
Widget _pokemonNews() {
@@ -149,9 +154,11 @@ class _HomePageBodyState extends State<HomePageBody> {
149154
_getNewsTile('assets/images/pokimon_1.png'),
150155
Divider(),
151156
_getNewsTile('assets/images/pokimon_2.png'),
152-
Divider(),
153-
_getNewsTile('assets/images/pokimon_3.png'), Divider(),
154-
_getNewsTile('assets/images/pokimon_4.png'), Divider(),
157+
Divider(),
158+
_getNewsTile('assets/images/pokimon_3.png'),
159+
Divider(),
160+
_getNewsTile('assets/images/pokimon_4.png'),
161+
Divider(),
155162
_getNewsTile('assets/images/pokimon_5.png'),
156163
],
157164
),
@@ -162,51 +169,53 @@ class _HomePageBodyState extends State<HomePageBody> {
162169
@override
163170
Widget build(BuildContext context) {
164171
return Container(
165-
width: MediaQuery.of(context).size.width,
166-
height: MediaQuery.of(context).size.height,
167-
child: Stack(children: <Widget>[
168-
Container(
169-
decoration: BoxDecoration(
170-
color: Colors.white,
171-
borderRadius: BorderRadius.only(
172-
bottomLeft: Radius.circular(30),
173-
bottomRight: Radius.circular(30))),
174-
width: MediaQuery.of(context).size.width,
175-
padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
176-
child: Stack(
177-
children: <Widget>[
178-
Positioned(
172+
width: MediaQuery.of(context).size.width,
173+
height: MediaQuery.of(context).size.height,
174+
child: Stack(children: <Widget>[
175+
Container(
176+
decoration: BoxDecoration(
177+
color: Colors.white,
178+
borderRadius: BorderRadius.only(
179+
bottomLeft: Radius.circular(30),
180+
bottomRight: Radius.circular(30))),
181+
width: MediaQuery.of(context).size.width,
182+
padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
183+
child: Stack(
184+
children: <Widget>[
185+
Positioned(
179186
right: 0,
180187
top: 0,
181188
child: Align(
182-
heightFactor: .75,
183-
widthFactor: .7 ,
184-
alignment: Alignment.bottomLeft,
185-
child:Hero(
186-
tag: "pokeball",
187-
child: Image.asset(
188-
'assets/images/pokeball.png',
189-
color: Color(0xffe3e3e3),
190-
height: 250,
191-
),)
192-
)),
193-
Container(
194-
padding:EdgeInsets.only(top: MediaQuery.of(context).padding.top),
195-
margin:EdgeInsets.only(top: MediaQuery.of(context).padding.top + 50),
196-
child: Column(
197-
mainAxisSize: MainAxisSize.min,
198-
mainAxisAlignment: MainAxisAlignment.start,
199-
crossAxisAlignment: CrossAxisAlignment.start,
200-
children: <Widget>[
189+
heightFactor: .75,
190+
widthFactor: .7,
191+
alignment: Alignment.bottomLeft,
192+
child: Hero(
193+
tag: "pokeball",
194+
child: Image.asset(
195+
'assets/images/pokeball.png',
196+
color: Color(0xffe3e3e3),
197+
height: 250,
198+
),
199+
))),
200+
Container(
201+
padding: EdgeInsets.only(
202+
top: MediaQuery.of(context).padding.top),
203+
margin: EdgeInsets.only(
204+
top: MediaQuery.of(context).padding.top + 50),
205+
child: Column(
206+
mainAxisSize: MainAxisSize.min,
207+
mainAxisAlignment: MainAxisAlignment.start,
208+
crossAxisAlignment: CrossAxisAlignment.start,
209+
children: <Widget>[
201210
Text(
202211
'What pokemon',
203-
style:
204-
TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
212+
style: TextStyle(
213+
fontSize: 30, fontWeight: FontWeight.w600),
205214
),
206215
Text(
207216
'are you loking for ?',
208-
style:
209-
TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
217+
style: TextStyle(
218+
fontSize: 30, fontWeight: FontWeight.w600),
210219
),
211220
_searchBox(),
212221
AnimatedContainer(
@@ -215,8 +224,8 @@ class _HomePageBodyState extends State<HomePageBody> {
215224
height: isViewAll ? 0 : 100,
216225
child: Row(
217226
children: <Widget>[
218-
_getCategoryCard(
219-
'Pokedex', Color(0xff4dc2a6), Color(0xff65d4bc)),
227+
_getCategoryCard('Pokedex', Color(0xff4dc2a6),
228+
Color(0xff65d4bc)),
220229
_getCategoryCard(
221230
'Moves', Color(0xfff77769), Color(0xfff88a7d))
222231
],
@@ -228,8 +237,8 @@ class _HomePageBodyState extends State<HomePageBody> {
228237
height: isViewAll ? 0 : 100,
229238
child: Row(
230239
children: <Widget>[
231-
_getCategoryCard(
232-
'Abilities', Color(0xff59a9f4), Color(0xff6fc1f9)),
240+
_getCategoryCard('Abilities', Color(0xff59a9f4),
241+
Color(0xff6fc1f9)),
233242
_getCategoryCard(
234243
'Item', Color(0xffffce4a), Color(0xffffd858))
235244
],
@@ -241,21 +250,19 @@ class _HomePageBodyState extends State<HomePageBody> {
241250
height: isViewAll ? 0 : 100,
242251
child: Row(
243252
children: <Widget>[
244-
_getCategoryCard(
245-
'Location', Color(0xff7b528c), Color(0xff9569a5)),
246-
_getCategoryCard(
247-
'Type Charts', Color(0xffb1726c), Color(0xffc1877e))
253+
_getCategoryCard('Location', Color(0xff7b528c),
254+
Color(0xff9569a5)),
255+
_getCategoryCard('Type Charts', Color(0xffb1726c),
256+
Color(0xffc1877e))
248257
],
249258
),
250259
),
251260
],
252-
),
253-
)
254-
],
255-
)
256-
),
257-
_pokemonNews()
258-
])
259-
);
261+
),
262+
)
263+
],
264+
)),
265+
_pokemonNews()
266+
]));
260267
}
261268
}

0 commit comments

Comments
 (0)