Skip to content

Commit

Permalink
Make favourite icon clickable on pokemon detail.
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheAlphamerc
TheAlphamerc committed Aug 5, 2019
1 parent 0930f0d commit e460bce
Show file tree
Hide file tree
Showing 3 changed files with 727 additions and 459 deletions.
277 changes: 142 additions & 135 deletions lib/pages/homePageBody.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,73 +7,75 @@ class HomePageBody extends StatefulWidget {
class _HomePageBodyState extends State<HomePageBody> {
bool isViewAll = false;
double viewAllHeight = 0;

bool isSearchFieldEnable = false;
Widget _getCategoryCard(String title, Color color, Color seondaryColor) {
return InkWell(
onTap: (){ Navigator.of(context).pushNamed('/pokemonList');},
onTap: () {
Navigator.of(context).pushNamed('/pokemonList');
},
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 20, top: 25, bottom: 20),
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
width: MediaQuery.of(context).size.width / 2 - 30,
height: 70,
decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.circular(10)),
child: Text(
title,
style: TextStyle(color: Colors.white, fontSize: 18),
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 20, top: 25, bottom: 20),
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
width: MediaQuery.of(context).size.width / 2 - 30,
height: 70,
decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.circular(10)),
child: Text(
title,
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
Positioned(
top: -15,
left: -20,
child: Container(
margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: ClipRRect(
borderRadius: BorderRadius.only(),
child: Align(
alignment: Alignment.topLeft,
heightFactor: 1,
widthFactor: 1,
child: Container( height: 30,
width: 30,
decoration: BoxDecoration(
color: seondaryColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(0.0),
bottomRight: Radius.circular(40.0),
bottomLeft: Radius.circular(0.0),
))
,)
),
Positioned(
top: -15,
left: -20,
child: Container(
margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: ClipRRect(
borderRadius: BorderRadius.only(),
child: Align(
alignment: Alignment.topLeft,
heightFactor: 1,
widthFactor: 1,
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: seondaryColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(0.0),
bottomRight: Radius.circular(40.0),
bottomLeft: Radius.circular(0.0),
)),
)),
),
),
),
),
),
Container(
alignment: FractionalOffset.topRight,
width: 165,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
child: Align(
alignment: FractionalOffset.centerLeft,
heightFactor: .87,
widthFactor: .7,
child: Transform.rotate(
angle: 0,
child: Image.asset(
'assets/images/pokeball.png',
color: seondaryColor,
),
)),
Container(
alignment: FractionalOffset.topRight,
width: 165,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
child: Align(
alignment: FractionalOffset.centerLeft,
heightFactor: .87,
widthFactor: .7,
child: Transform.rotate(
angle: 0,
child: Image.asset(
'assets/images/pokeball.png',
color: seondaryColor,
),
)),
),
),
),
],
),
],
),
);
}

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

Widget _searchBox() {
return Container(
height: 40,
padding: EdgeInsets.symmetric(horizontal: 15),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 30),
decoration: BoxDecoration(
color: Color(0xfff6f6f6), borderRadius: BorderRadius.circular(50)),
child: Row(
children: <Widget>[
Icon(Icons.search),
SizedBox(
width: 20,
),
Text(
'Search Pokemon, Move, Ability',
style: TextStyle(color: Colors.black38),
),
],
),
);
height: 40,
padding: EdgeInsets.symmetric(horizontal: 15),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 30),
decoration: BoxDecoration(
color: Color(0xfff6f6f6), borderRadius: BorderRadius.circular(50)),
child: Stack(
children: <Widget>[
Positioned(
top: 10,
child: Icon(
Icons.search,
),
),
TextField(
onTap: (){
isViewAll = false;
},
decoration: InputDecoration(contentPadding: EdgeInsets.only(left: 30,top: 12), border:InputBorder.none , disabledBorder: InputBorder.none, hintText: 'Search Pokemon, Move, Ability'),
)
],
));
}

Widget _pokemonNews() {
Expand Down Expand Up @@ -149,9 +154,11 @@ class _HomePageBodyState extends State<HomePageBody> {
_getNewsTile('assets/images/pokimon_1.png'),
Divider(),
_getNewsTile('assets/images/pokimon_2.png'),
Divider(),
_getNewsTile('assets/images/pokimon_3.png'), Divider(),
_getNewsTile('assets/images/pokimon_4.png'), Divider(),
Divider(),
_getNewsTile('assets/images/pokimon_3.png'),
Divider(),
_getNewsTile('assets/images/pokimon_4.png'),
Divider(),
_getNewsTile('assets/images/pokimon_5.png'),
],
),
Expand All @@ -162,51 +169,53 @@ class _HomePageBodyState extends State<HomePageBody> {
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
child: Stack(
children: <Widget>[
Positioned(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
child: Stack(
children: <Widget>[
Positioned(
right: 0,
top: 0,
child: Align(
heightFactor: .75,
widthFactor: .7 ,
alignment: Alignment.bottomLeft,
child:Hero(
tag: "pokeball",
child: Image.asset(
'assets/images/pokeball.png',
color: Color(0xffe3e3e3),
height: 250,
),)
)),
Container(
padding:EdgeInsets.only(top: MediaQuery.of(context).padding.top),
margin:EdgeInsets.only(top: MediaQuery.of(context).padding.top + 50),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
heightFactor: .75,
widthFactor: .7,
alignment: Alignment.bottomLeft,
child: Hero(
tag: "pokeball",
child: Image.asset(
'assets/images/pokeball.png',
color: Color(0xffe3e3e3),
height: 250,
),
))),
Container(
padding: EdgeInsets.only(
top: MediaQuery.of(context).padding.top),
margin: EdgeInsets.only(
top: MediaQuery.of(context).padding.top + 50),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'What pokemon',
style:
TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w600),
),
Text(
'are you loking for ?',
style:
TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w600),
),
_searchBox(),
AnimatedContainer(
Expand All @@ -215,8 +224,8 @@ class _HomePageBodyState extends State<HomePageBody> {
height: isViewAll ? 0 : 100,
child: Row(
children: <Widget>[
_getCategoryCard(
'Pokedex', Color(0xff4dc2a6), Color(0xff65d4bc)),
_getCategoryCard('Pokedex', Color(0xff4dc2a6),
Color(0xff65d4bc)),
_getCategoryCard(
'Moves', Color(0xfff77769), Color(0xfff88a7d))
],
Expand All @@ -228,8 +237,8 @@ class _HomePageBodyState extends State<HomePageBody> {
height: isViewAll ? 0 : 100,
child: Row(
children: <Widget>[
_getCategoryCard(
'Abilities', Color(0xff59a9f4), Color(0xff6fc1f9)),
_getCategoryCard('Abilities', Color(0xff59a9f4),
Color(0xff6fc1f9)),
_getCategoryCard(
'Item', Color(0xffffce4a), Color(0xffffd858))
],
Expand All @@ -241,21 +250,19 @@ class _HomePageBodyState extends State<HomePageBody> {
height: isViewAll ? 0 : 100,
child: Row(
children: <Widget>[
_getCategoryCard(
'Location', Color(0xff7b528c), Color(0xff9569a5)),
_getCategoryCard(
'Type Charts', Color(0xffb1726c), Color(0xffc1877e))
_getCategoryCard('Location', Color(0xff7b528c),
Color(0xff9569a5)),
_getCategoryCard('Type Charts', Color(0xffb1726c),
Color(0xffc1877e))
],
),
),
],
),
)
],
)
),
_pokemonNews()
])
);
),
)
],
)),
_pokemonNews()
]));
}
}
Loading

0 comments on commit e460bce

Please sign in to comment.