Skip to content

Commit

Permalink
Fixes in product favs: layout, rounded borders, padding.
Browse files Browse the repository at this point in the history
  • Loading branch information
@4seer
4seer committed Feb 24, 2020
1 parent 6d33750 commit 623bc7d
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 96 deletions.
66 changes: 43 additions & 23 deletions lib/screens/favorites/views/listView/favourites_list_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// Date: 2020-02-17

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:openflutterecommerce/config/theme.dart';
import 'package:openflutterecommerce/repos/models/product.dart';
import 'package:openflutterecommerce/screens/product_details/productDetails_screen.dart';
Expand All @@ -26,7 +27,10 @@ class FavouritesListCard extends StatelessWidget {
Container(
padding: EdgeInsets.all(10.0),
child: Container(
color: AppColors.white,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(AppSizes.imageRadius),
color: AppColors.white,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down Expand Up @@ -55,11 +59,17 @@ class FavouritesListCard extends StatelessWidget {
children: <Widget>[
Text(product.categoryTitle,
style: _theme.textTheme.bodyText1),
Text(product.title,
Padding(
padding:
EdgeInsets.only(top: AppSizes.linePadding*2 ),
child: Text(product.title,
style: _theme.textTheme.headline6
.copyWith(fontSize: 16)),
.copyWith(fontSize: 16))
),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
padding:
EdgeInsets.only(left: AppSizes.linePadding,
top: AppSizes.linePadding*2 ),
),
Row(
children: <Widget>[
Expand All @@ -72,7 +82,8 @@ class FavouritesListCard extends StatelessWidget {
),
Padding(
padding:
EdgeInsets.only(left: AppSizes.linePadding),
EdgeInsets.only(left: AppSizes.linePadding,
top: AppSizes.linePadding*2 ),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
Expand Down Expand Up @@ -121,10 +132,14 @@ class FavouritesListCard extends StatelessWidget {

buildRating(Product product, ThemeData _theme) {
return Container(
padding: EdgeInsets.only(
top: AppSizes.linePadding, bottom: AppSizes.linePadding),
child: OpenFlutterProductRating(
rating: product.rating, ratingCount: product.ratingCount));
padding: EdgeInsets.only(
top: AppSizes.linePadding, bottom: AppSizes.linePadding),
child: OpenFlutterProductRating(
rating: product.rating,
ratingCount: product.ratingCount,
iconSize: 14
)
);
}

getDiscountPrice(Product product) {
Expand Down Expand Up @@ -191,20 +206,25 @@ class FavouritesListCard extends StatelessWidget {

buildCartButton(Product product, ThemeData theme) {
return Positioned(
bottom: 0,
right: AppSizes.sidePadding / 4,
child: Container(
height: 40.0,
width: 40.0,
padding: EdgeInsets.all(5.0),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(AppSizes.buttonRadius),
color: AppColors.red,
image: new DecorationImage(
fit: BoxFit.scaleDown,
colorFilter:
ColorFilter.mode(Colors.white, BlendMode.srcIn),
image: AssetImage("assets/icons/favourites/bag.png")))));
bottom: 0,
right: AppSizes.sidePadding / 4,
child: Container(
height: 40.0,
width: 40.0,
padding: EdgeInsets.all(5.0),
child: SvgPicture.asset("assets/icons/favourites/fav_cart.svg"),

decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(AppSizes.buttonRadius),
color: AppColors.red,
/*image: new DecorationImage(
fit: BoxFit.scaleDown,
colorFilter:
ColorFilter.mode(Colors.white, BlendMode.srcIn),
image: AssetImage("assets/icons/favourites/fav_cart.png",))*/
)
)
);
}

buildRemoveButton(Product product) {
Expand Down
154 changes: 82 additions & 72 deletions lib/screens/favorites/views/tileView/favourites_tile_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// Date: 2020-02-17

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:openflutterecommerce/config/theme.dart';
import 'package:openflutterecommerce/repos/models/product.dart';
import 'package:openflutterecommerce/screens/product_details/productDetails_screen.dart';
Expand All @@ -24,64 +25,72 @@ class FavouritesTileItem extends StatelessWidget {
MaterialPageRoute(builder: (context) => ProductDetailsScreen())),
child: Stack(
children: <Widget>[
Container(
color: AppColors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: width * 0.50,
child: Container(
height: width * 0.50,
decoration: new BoxDecoration(
borderRadius:
BorderRadius.circular(AppSizes.imageRadius),
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(product.image))),
child: Container())),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
buildRating(product, _theme),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
Text(product.categoryTitle,
style: _theme.textTheme.bodyText1),
Text(product.title,
style: _theme.textTheme.headline6
.copyWith(fontSize: 14)),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
Row(
children: <Widget>[
buildColor(product, _theme),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
buildSize(product, _theme),
],
),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
buildPrice(product, _theme),
],
),
)
]),
Padding(
padding: EdgeInsets.all(AppSizes.sidePadding/2),
child:Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(AppSizes.imageRadius),
//color: AppColors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: width * 0.50,
child: Container(
height: width * 0.50,
decoration: new BoxDecoration(
borderRadius:
BorderRadius.circular(AppSizes.imageRadius),
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(product.image))),
child: Container())),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
buildRating(product, _theme),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
Text(product.categoryTitle,
style: _theme.textTheme.bodyText1),
Text(product.title,
style: _theme.textTheme.headline6
.copyWith(fontSize: 14)),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
Row(
children: <Widget>[
buildColor(product, _theme),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
buildSize(product, _theme),
],
),
Padding(
padding: EdgeInsets.all(AppSizes.linePadding),
),
buildPrice(product, _theme),
],
),
)
]),
),

),
buildTopLabel(product, _theme),
buildCartButton(product, _theme),
buildRemoveButton(product)
],
));
)
);
}

buildPrice(Product product, ThemeData _theme) {
Expand Down Expand Up @@ -110,7 +119,9 @@ class FavouritesTileItem extends StatelessWidget {
return Container(
padding: EdgeInsets.only(top: AppSizes.linePadding),
child: OpenFlutterProductRating(
rating: product.rating, ratingCount: product.ratingCount));
rating: product.rating, ratingCount: product.ratingCount,
iconSize: 14,
alignment: MainAxisAlignment.start,));
}

getDiscountPrice(Product product) {
Expand All @@ -120,8 +131,8 @@ class FavouritesTileItem extends StatelessWidget {

buildTopLabel(Product product, ThemeData theme) {
return Positioned(
top: 5,
left: AppSizes.sidePadding / 3,
top: 5 + AppSizes.sidePadding/2,
left: AppSizes.sidePadding / 3+ AppSizes.sidePadding/2,
child: product.isNew
? Container(
padding: EdgeInsets.all(AppSizes.linePadding * 1.5),
Expand Down Expand Up @@ -177,26 +188,25 @@ class FavouritesTileItem extends StatelessWidget {

buildCartButton(Product product, ThemeData theme) {
return Positioned(
bottom: height * 0.15,
right: AppSizes.sidePadding / 3,
child: Container(
height: 40.0,
width: 40.0,
padding: EdgeInsets.all(5.0),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(AppSizes.buttonRadius),
color: AppColors.red,
image: new DecorationImage(
fit: BoxFit.scaleDown,
colorFilter:
ColorFilter.mode(Colors.white, BlendMode.srcIn),
image: AssetImage("assets/icons/favourites/bag.png")))));
bottom: height * 0.20,
right: AppSizes.sidePadding / 3,
child: Container(
height: 40.0,
width: 40.0,
padding: EdgeInsets.all(5.0),
child: SvgPicture.asset("assets/icons/favourites/fav_cart.svg"),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(AppSizes.buttonRadius),
color: AppColors.red,
)
)
);
}

buildRemoveButton(Product product) {
return Positioned(
top: -5,
right: -10,
top: AppSizes.sidePadding/2-10,
right: AppSizes.sidePadding/2-10,
child: IconButton(
icon: Icon(Icons.close),
color: AppColors.lightGray,
Expand Down
3 changes: 2 additions & 1 deletion lib/widgets/product_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ class OpenFlutterProductTile extends StatelessWidget {
OpenFlutterProductRating(
rating: product.rating,
ratingCount: product.ratingCount,
iconSize: 14
iconSize: 14,
alignment: MainAxisAlignment.start,
),
Padding(padding: EdgeInsets.only(top: AppSizes.linePadding)),
Text('\$'+product.price.toStringAsFixed(2),
Expand Down

0 comments on commit 623bc7d

Please sign in to comment.