From 3c971223088b7cc91eb2167a238b4301b1248f89 Mon Sep 17 00:00:00 2001 From: hussam al-habibeh Date: Thu, 25 Nov 2021 09:41:23 +0200 Subject: [PATCH] pharmacy home dsign --- lib/pages/landing/landing_page_pharmcy.dart | 7 +- .../screens/pharmacy_module_page.dart | 2 +- .../pharmacies/widgets/ProductTileItem.dart | 369 +++++++++--------- .../widgets/home/BestSellerWidget.dart | 2 +- .../widgets/home/MostViewedWidget.dart | 7 +- .../widgets/home/RecentlyViewedWidget.dart | 2 +- .../widgets/home/ViewAllHomeWidget.dart | 3 +- 7 files changed, 205 insertions(+), 187 deletions(-) diff --git a/lib/pages/landing/landing_page_pharmcy.dart b/lib/pages/landing/landing_page_pharmcy.dart index c90a317a..05c20dd8 100644 --- a/lib/pages/landing/landing_page_pharmcy.dart +++ b/lib/pages/landing/landing_page_pharmcy.dart @@ -90,7 +90,9 @@ class _LandingPagePharmacyState extends State { try { String barcode = result; GifLoaderDialogUtils.showMyDialog(context); - await BaseAppClient().getPharmacy("$GET_PHARMACY_PRODUCTs_BY_SKU$barcode", onSuccess: (dynamic response, int statusCode) { + await BaseAppClient() + .getPharmacy("$GET_PHARMACY_PRODUCTs_BY_SKU$barcode", + onSuccess: (dynamic response, int statusCode) { print(response); var product = PharmacyProduct.fromJson(response["products"][0]); GifLoaderDialogUtils.hideDialog(context); @@ -100,7 +102,8 @@ class _LandingPagePharmacyState extends State { AppToast.showErrorToast(message: "Product not found"); }); } catch (apiEx) { - AppToast.showErrorToast(message: "Something went wrong, please try again"); + AppToast.showErrorToast( + message: "Something went wrong, please try again"); } } catch (barcodeEx) {} } diff --git a/lib/pages/pharmacies/screens/pharmacy_module_page.dart b/lib/pages/pharmacies/screens/pharmacy_module_page.dart index 1f90f454..8f500064 100644 --- a/lib/pages/pharmacies/screens/pharmacy_module_page.dart +++ b/lib/pages/pharmacies/screens/pharmacy_module_page.dart @@ -48,7 +48,7 @@ class _PharmacyPageState extends State { isMainPharmacyPages: true, isPharmacy: true, isShowPharmacyAppbar: true, - backgroundColor: Colors.white, + backgroundColor: Color(0xffFEFEFE), body: Container( width: double.infinity, child: SingleChildScrollView( diff --git a/lib/pages/pharmacies/widgets/ProductTileItem.dart b/lib/pages/pharmacies/widgets/ProductTileItem.dart index fcdb0ad6..f16aca03 100644 --- a/lib/pages/pharmacies/widgets/ProductTileItem.dart +++ b/lib/pages/pharmacies/widgets/ProductTileItem.dart @@ -77,202 +77,210 @@ class ProductTileItem extends StatelessWidget { @override Widget build(BuildContext context) { ProjectViewModel projectProvider = Provider.of(context); - return InkWell( - onTap: () => productOnClick(context), - splashColor: Theme.of(context).primaryColor, - child: Container( - margin: EdgeInsets.all(7), - decoration: BoxDecoration( - border: Border.all(color: Colors.grey.shade300, width: 0.5), - borderRadius: BorderRadius.circular(8)), - padding: EdgeInsets.symmetric(horizontal: 4), - width: MediaQuery.of(context).size.width / 2.8, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // Stack( - // children: [ - // Container( - // margin: EdgeInsets.fromLTRB(0, 0, 0, 0), - // alignment: Alignment.center, - // child: (item.images != null && item.images.length > 0) - // ? Image.network( - // item.images[0].src, - // fit: BoxFit.cover, - // height: itemHeight / 2, - // ) - // : Image.asset( - // "assets/images/no_image.png", - // fit: BoxFit.cover, - // height: itemHeight / 2, - // ), - // ), - // ], - // ), + return Container( + margin: EdgeInsets.all(7), + decoration: BoxDecoration( + border: Border.all(color: Colors.grey.shade300, width: 0.2), + borderRadius: BorderRadius.circular(10), + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Color(0xffF1F1F1), + spreadRadius: 4, + blurRadius: 5.5, + offset: Offset(0, 3), // changes position of shadow + ), + ], + ), + padding: EdgeInsets.symmetric(horizontal: 4), + width: MediaQuery.of(context).size.width / 2.8, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Stack( + // children: [ + // Container( + // margin: EdgeInsets.fromLTRB(0, 0, 0, 0), + // alignment: Alignment.center, + // child: (item.images != null && item.images.length > 0) + // ? Image.network( + // item.images[0].src, + // fit: BoxFit.cover, + // height: itemHeight / 2, + // ) + // : Image.asset( + // "assets/images/no_image.png", + // fit: BoxFit.cover, + // height: itemHeight / 2, + // ), + // ), + // ], + // ), - Container( + Container( + width: double.infinity, + height: MediaQuery.of(context).size.width * 0.3, + padding: EdgeInsets.only(left: 10, right: 10, top: 7, bottom: 7), + color: Colors.white, + child: Container( width: double.infinity, - height: MediaQuery.of(context).size.width * 0.3, - padding: - EdgeInsets.only(left: 20, right: 20, top: 14, bottom: 14), - color: Colors.white, - child: InkWell( - onTap: () {}, - child: Container( - width: double.infinity, - height: double.infinity, - clipBehavior: Clip.antiAlias, - decoration: containerRadiusWithGradientServices(33, - lightColor: Colors.transparent, - darkColor: Colors.transparent), - child: Stack( - children: [ - Container( - width: double.infinity, - height: double.infinity, - //clipBehavior: Clip.antiAlias, - // decoration: projectProvider.isArabic - // ? containerBottomRightRadiusWithGradientForAr(0, lightColor: Colors.transparent, darkColor: Colors.transparent) - // : containerBottomRightRadiusWithGradient(0, lightColor: Colors.red, darkColor: CustomColors.green), - child: Stack( - children: [ - Container( - margin: EdgeInsets.fromLTRB(0, 0, 0, 0), - alignment: Alignment.center, - child: (item.images != null && - item.images.length > 0) - ? Image.network( - item.images[0].src, - fit: BoxFit.cover, - height: itemHeight / 2, - ) - : Image.asset( - "assets/images/no_image.png", - fit: BoxFit.cover, - height: itemHeight / 2, - ), + height: double.infinity, + clipBehavior: Clip.antiAlias, + decoration: containerRadiusWithGradientServices(0, + lightColor: Colors.transparent, + darkColor: Colors.transparent), + child: Stack( + children: [ + Container( + width: double.infinity, + height: double.infinity, + //clipBehavior: Clip.antiAlias, + // decoration: projectProvider.isArabic + // ? containerBottomRightRadiusWithGradientForAr(0, lightColor: Colors.transparent, darkColor: Colors.transparent) + // : containerBottomRightRadiusWithGradient(0, lightColor: Colors.red, darkColor: CustomColors.green), + child: Stack( + children: [ + Container( + decoration: BoxDecoration( + border: Border.all( + color: Colors.grey.shade300, width: 1.1), + borderRadius: BorderRadius.only( + topRight: Radius.circular( + item.rxMessage != null && + projectProvider.isArabic + ? 20 + : 8), + bottomLeft: Radius.circular(8), + bottomRight: Radius.circular(8), + topLeft: Radius.circular(item.rxMessage != null && + !projectProvider.isArabic + ? 25 + : 8), ), - ], + ), + margin: EdgeInsets.fromLTRB(0, 0, 0, 0), + alignment: Alignment.center, + child: (item.images != null && item.images.length > 0) + ? Padding( + padding: EdgeInsets.all(12.0), + child: Image.network( + item.images[0].src, + fit: BoxFit.cover, + height: itemHeight / 2, + ), + ) + : Image.asset( + "assets/images/no_image.png", + fit: BoxFit.cover, + height: itemHeight / 2, + ), ), - ), - if (item.rxMessage != null) - projectProvider.isArabic - ? Positioned( - right: -16, - top: 2, - child: Transform.rotate( - angle: math.pi / 4, - child: Container( - padding: EdgeInsets.only( - left: 18, right: 18, top: 6, bottom: 3), - color: CustomColors.accentColor, - child: Padding( - padding: EdgeInsets.all(2.0), - child: Text( - "الوصفة\n مطلوبة", - style: TextStyle( - color: Colors.white, - fontSize: 7.5, - height: 0.8, - fontWeight: FontWeight.bold, - letterSpacing: -0.27, - ), - ), + ], + ), + ), + if (item.rxMessage != null) + projectProvider.isArabic + ? Positioned( + right: -16, + top: 2, + child: Transform.rotate( + angle: math.pi / 4, + child: Container( + padding: EdgeInsets.only( + left: 18, right: 18, top: 6, bottom: 3), + color: CustomColors.accentColor, + child: Padding( + padding: EdgeInsets.all(2.0), + child: Text( + "الوصفة\n مطلوبة", + style: TextStyle( + color: Colors.white, + fontSize: 7.5, + height: 0.8, + fontWeight: FontWeight.bold, + letterSpacing: -0.27, ), ), ), - ) - : Positioned( - left: -24, - top: 2, - child: Transform.rotate( - angle: -math.pi / 4, - child: Container( - padding: EdgeInsets.only( - left: 18, right: 18, top: 6, bottom: 3), - color: CustomColors.accentColor, - child: Text( - "\n E-Prescription \n Is required", - style: TextStyle( - color: Colors.white, - fontSize: 7.5, - //letterSpacing: -0.27, - height: 1.2, - fontWeight: FontWeight.w600, - ), - ), + ), + ), + ) + : Positioned( + left: -24, + top: 2, + child: Transform.rotate( + angle: -math.pi / 4, + child: Container( + padding: EdgeInsets.only( + left: 18, right: 18, top: 6, bottom: 3), + color: CustomColors.accentColor, + child: Text( + "\n E-Prescription \n Is required", + style: TextStyle( + color: Colors.white, + fontSize: 7.5, + //letterSpacing: -0.27, + height: 1.2, + fontWeight: FontWeight.w600, ), ), ), - ], - ), - ), + ), + ), + ], ), ), - - // Padding( - // padding: EdgeInsets.fromLTRB(1, 1, 1, 1), - // child: Container( - // width: item.rxMessage != null - // ? MediaQuery.of(context).size.width / 1.0 - // : 0, - // padding: EdgeInsets.fromLTRB(8, 2, 8, 2), - // decoration: BoxDecoration( - // color: Color(0xffb23838), - // ), - // child: item.rxMessage != null - // ? Texts( - // projectProvider.isArabic - // ? item.rxMessagen - // : item.rxMessage, - // color: Colors.white, - // regular: true, - // fontSize: 10, - // fontWeight: FontWeight.w400, - // ) - // : Texts(""), - // ), - // ), - // SizedBox(height: 4,), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 4.0), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 10.0), + child: Container( + height: MediaQuery.of(context).size.height * 0.075, child: Texts( projectProvider.isArabic ? item.namen : item.name, - regular: true, - fontSize: 12, - fontWeight: FontWeight.w400, + //regular: true, + fontSize: 10, + color: Color(0xff2B353E), + fontWeight: FontWeight.w500, ), ), - Expanded( - child: Container( - margin: EdgeInsets.symmetric( - horizontal: 4, - vertical: 0, - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.end, - children: [ - Padding( - padding: const EdgeInsets.only(top: 2, bottom: 2), - child: Texts( - "SAR ${item.price}", - fontWeight: FontWeight.w600, - fontSize: 14, - ), + ), + SizedBox( + height: 7.0, + ), + Expanded( + child: Container( + margin: EdgeInsets.symmetric( + horizontal: 4, + vertical: 0, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + //mainAxisAlignment: MainAxisAlignment.end, + children: [ + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 10, vertical: 2), + child: Texts( + "SAR ${item.price}", + fontWeight: FontWeight.bold, + fontSize: 11, + color: Color(0xff2B353E), ), - Row( + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 5), + child: Row( children: [ // Expanded( RatingBar.readOnly( initialRating: item.approvedRatingSum.toDouble(), size: 15.0, - filledColor: Color(0xffD02127), - emptyColor: Colors.grey[500], + filledColor: Color(0XFFD02127), + emptyColor: Color(0XFFD02127), isHalfAllowed: true, halfFilledIcon: Icons.star_half, filledIcon: Icons.star, - emptyIcon: Icons.star, + emptyIcon: Icons.star_border, ), Texts( "(${item.approvedTotalReviews})", @@ -282,11 +290,12 @@ class ProductTileItem extends StatelessWidget { ), SizedBox( - width: 20.0, + width: 10.0, ), Icon( Icons.arrow_forward, - size: 18, + size: 15, + color: Color(0xff2D2F39), ), // StarRating( @@ -299,15 +308,15 @@ class ProductTileItem extends StatelessWidget { // ), ], ), - ], - ), + ), + ], ), ), - SizedBox( - height: 5, - ), - ], - ), + ), + SizedBox( + height: 1, + ), + ], ), ); } diff --git a/lib/pages/pharmacies/widgets/home/BestSellerWidget.dart b/lib/pages/pharmacies/widgets/home/BestSellerWidget.dart index 780adba9..2fcab506 100644 --- a/lib/pages/pharmacies/widgets/home/BestSellerWidget.dart +++ b/lib/pages/pharmacies/widgets/home/BestSellerWidget.dart @@ -29,7 +29,7 @@ class BestSellerWidget extends StatelessWidget { )), if (model.state != ViewState.BusyLocal) Container( - height: MediaQuery.of(context).size.height / 3 + 20, + height: MediaQuery.of(context).size.height / 3 + 1, child: ListView.builder( itemBuilder: (ctx, i) => ProductTileItem( model.bestSellerProduct[i], diff --git a/lib/pages/pharmacies/widgets/home/MostViewedWidget.dart b/lib/pages/pharmacies/widgets/home/MostViewedWidget.dart index de34863d..a1ce0bc4 100644 --- a/lib/pages/pharmacies/widgets/home/MostViewedWidget.dart +++ b/lib/pages/pharmacies/widgets/home/MostViewedWidget.dart @@ -31,7 +31,12 @@ class MostViewedWidget extends StatelessWidget { )), if (model.state != ViewState.BusyLocal) Container( - height: MediaQuery.of(context).size.height / 3 + 20, + decoration: BoxDecoration( + border: Border.all( + color: Colors.grey.shade300, width: 0.1), + borderRadius: BorderRadius.circular(8), + ), + height: MediaQuery.of(context).size.height / 3 + 1, child: ListView.builder( itemBuilder: (ctx, i) => ProductTileItem( model.mostViewedProducts[i], diff --git a/lib/pages/pharmacies/widgets/home/RecentlyViewedWidget.dart b/lib/pages/pharmacies/widgets/home/RecentlyViewedWidget.dart index 3c2cb710..f03c384d 100644 --- a/lib/pages/pharmacies/widgets/home/RecentlyViewedWidget.dart +++ b/lib/pages/pharmacies/widgets/home/RecentlyViewedWidget.dart @@ -31,7 +31,7 @@ class RecentlyViewedWidget extends StatelessWidget { if (model.state != ViewState.BusyLocal) Container( height: model.lastVisitedProducts.length > 0 - ? MediaQuery.of(context).size.height / 3 + 20 + ? MediaQuery.of(context).size.height / 3 + 1 : 0, child: ListView.builder( itemBuilder: (ctx, i) => ProductTileItem( diff --git a/lib/pages/pharmacies/widgets/home/ViewAllHomeWidget.dart b/lib/pages/pharmacies/widgets/home/ViewAllHomeWidget.dart index 1289e733..9d56deff 100644 --- a/lib/pages/pharmacies/widgets/home/ViewAllHomeWidget.dart +++ b/lib/pages/pharmacies/widgets/home/ViewAllHomeWidget.dart @@ -18,8 +18,9 @@ class ViewAllHomeWidget extends StatelessWidget { children: [ Texts( title, + color: Color(0xff2E303A), bold: true, - fontSize: 16, + fontSize: 19, ), InkWell( onTap: () {