From 98929765263bfa2477361d501279e79169d85c08 Mon Sep 17 00:00:00 2001 From: enadhilal Date: Mon, 31 Aug 2020 11:11:41 +0300 Subject: [PATCH] improve design implementation in delivery_confirmed branch. --- lib/pages/delivery/information_page.dart | 124 ++++++++++-------- lib/widgets/delivery/customer_brief_card.dart | 120 ++++++++++------- .../delivery/delivery_action_button.dart | 4 +- 3 files changed, 140 insertions(+), 108 deletions(-) diff --git a/lib/pages/delivery/information_page.dart b/lib/pages/delivery/information_page.dart index d6c6502..f99dcff 100644 --- a/lib/pages/delivery/information_page.dart +++ b/lib/pages/delivery/information_page.dart @@ -1,4 +1,5 @@ import 'package:driverapp/pages/delivery/delivery_confirmed_page.dart'; +import 'package:driverapp/widgets/buttons/secondary_button.dart'; import 'package:driverapp/widgets/delivery/customer_brief_card.dart'; import 'package:driverapp/widgets/delivery/delivery_action_button.dart'; import 'package:driverapp/widgets/delivery/package_content.dart'; @@ -17,9 +18,9 @@ class InformationPage extends StatelessWidget { Widget build(BuildContext context) { return AppScaffold( body: Container( - color: Color(0xff41bdbb), + color: Color(0xff3ABBBA), child: Container( - color: Color(0xff41bdbb), + color: Color(0xff3ABBBA), child: ListView( children: [ Column( @@ -32,7 +33,7 @@ class InformationPage extends StatelessWidget { right: MediaQuery .of(context) .size - .width * 0.15, //50 + .width * 0.10, //50 ), child: IconButton( color: Colors.white, @@ -83,10 +84,10 @@ class InformationPage extends StatelessWidget { top: MediaQuery .of(context) .size - .width * 0.3, //100 + .width * 0.23, //100 ), decoration: BoxDecoration( - color: Colors.white, + color: Theme.of(context).scaffoldBackgroundColor, borderRadius: BorderRadius.only( topLeft: Radius.circular(45), topRight: Radius.circular(45)), @@ -98,13 +99,13 @@ class InformationPage extends StatelessWidget { height: MediaQuery .of(context) .size - .width * 0.2, //170, + .width * 0.4, //170, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - delivery_info_button( - btnColor: Color(0xfff44336), + deliveryInfoButton( + btnColor: Color(0xffED1C24), btnIcon: Icon( Icons.near_me, size: 30, @@ -115,8 +116,8 @@ class InformationPage extends StatelessWidget { .location, btnFunction: () {}, ), - delivery_info_button( - btnColor: Colors.green, + deliveryInfoButton( + btnColor: Color(0xFF61B260), btnIcon: Icon( Icons.whatshot, size: 30, @@ -125,8 +126,8 @@ class InformationPage extends StatelessWidget { btnName: 'Whatsapp', btnFunction: () {}, ), - delivery_info_button( - btnColor: Colors.orangeAccent, + deliveryInfoButton( + btnColor: Color(0xFFFCB657), btnIcon: Icon( Icons.mail_outline, size: 30, @@ -137,7 +138,7 @@ class InformationPage extends StatelessWidget { .sms, btnFunction: () {}, ), - delivery_info_button( + deliveryInfoButton( btnColor: Color(0xff41bdbb), btnIcon: Icon( Icons.phone, @@ -166,7 +167,7 @@ class InformationPage extends StatelessWidget { right: MediaQuery .of(context) .size - .width * 0.02, //15 + .width * 0.05, //15 ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -176,7 +177,7 @@ class InformationPage extends StatelessWidget { .of(context) .packageContent, style: TextStyle( - fontWeight: FontWeight.bold, + fontWeight: FontWeight.w900, fontSize: 20), ), SizedBox( @@ -194,7 +195,6 @@ class InformationPage extends StatelessWidget { .itemsQuantitiesList[index] .itemName .toString(), - //'Panadol Extra 50 tablet', packageCount: item .itemsQuantitiesList[index] .quantity @@ -217,47 +217,61 @@ class InformationPage extends StatelessWidget { .size .width * 0.1, //30, ), - FlatButton( - color: Color(0xff41bdbb), - padding: EdgeInsets.only( - right: MediaQuery - .of(context) - .size - .width * 0.3, //100, - left: MediaQuery - .of(context) - .size - .width * 0.3, //100, - bottom: MediaQuery - .of(context) - .size - .width * 0.035, //15, - top: MediaQuery - .of(context) - .size - .width * 0.035, //15 - ), - shape: RoundedRectangleBorder( - borderRadius: new BorderRadius.circular(30.0), - side: BorderSide(color: Color(0xff41bdbb)), - ), - child: Text( - TranslationBase - .of(context) - .clientReached, - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - fontSize: 16), + Container( + margin: EdgeInsets.all(10), +// height: MediaQuery.of(context).size.height *0.08, + child: SecondaryButton( + label: TranslationBase.of(context).clientReached, + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + DeliveryConfirmedPage(item))); + }, ), - onPressed: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => - DeliveryConfirmedPage(item))); - }, ), +// FlatButton( +// color: Color(0xff41bdbb), +// padding: EdgeInsets.only( +// right: MediaQuery +// .of(context) +// .size +// .width * 0.3, //100, +// left: MediaQuery +// .of(context) +// .size +// .width * 0.3, //100, +// bottom: MediaQuery +// .of(context) +// .size +// .width * 0.035, //15, +// top: MediaQuery +// .of(context) +// .size +// .width * 0.035, //15 +// ), +// shape: RoundedRectangleBorder( +// borderRadius: new BorderRadius.circular(30.0), +// side: BorderSide(color: Color(0xff41bdbb)), +// ), +// child: Text( +// TranslationBase +// .of(context) +// .clientReached, +// style: TextStyle( +// color: Colors.white, +// fontWeight: FontWeight.bold, +// fontSize: 16), +// ), +// onPressed: () { +// Navigator.push( +// context, +// MaterialPageRoute( +// builder: (context) => +// DeliveryConfirmedPage(item))); +// }, +// ), ], ), ), diff --git a/lib/widgets/delivery/customer_brief_card.dart b/lib/widgets/delivery/customer_brief_card.dart index f0006ca..2836779 100644 --- a/lib/widgets/delivery/customer_brief_card.dart +++ b/lib/widgets/delivery/customer_brief_card.dart @@ -32,10 +32,10 @@ class CustomerBrief extends StatelessWidget { decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( - topLeft: Radius.circular(45), - topRight: Radius.circular(45), - bottomRight: Radius.circular(45), - bottomLeft: Radius.circular(45)), + topLeft: Radius.circular(30), + topRight: Radius.circular(30), + bottomRight: Radius.circular(30), + bottomLeft: Radius.circular(30)), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.3), @@ -53,30 +53,27 @@ class CustomerBrief extends StatelessWidget { Row( children: [ Expanded( - child: Text('ID: ${itemId}'), + flex: 3, + child: Text('ID: ${itemId}', style: TextStyle( + color: Color(0xFFADACAD) + ),), ), Expanded( - child: Container( - margin: EdgeInsets.only(left: 83), - width: 10, - height: 60, - decoration: BoxDecoration( - border: Border.all( - width: 2.0, - color: Color(0xff41bdbb), - ), - borderRadius: BorderRadius.only( - topLeft: Radius.circular(45), - topRight: Radius.circular(45), - bottomRight: Radius.circular(45), - bottomLeft: Radius.circular(45), - ), - ), - child: Container( - margin: EdgeInsets.only(left: 12, top: 10), - child: Text( - '3 min away', - style: TextStyle(color: Color(0xff41bdbb)), + child: CircleAvatar( + backgroundColor: Colors.black45, + radius: 28.0, + child: CircleAvatar( + backgroundColor: Colors.white, + maxRadius: 25.1, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text( + '3 K.m \n away', + style: TextStyle( + color: Color(0xff30B7B9), + fontSize: 12.5, + fontWeight: FontWeight.w600), + ), ), ), ), @@ -85,24 +82,31 @@ class CustomerBrief extends StatelessWidget { ), Text( '${customerFirstName} ${customerLastName}', - style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), + style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900), ), Text( mobileNo, - style: TextStyle(color: Colors.lightBlue), + style: TextStyle(color: Color(0xFF50BDC5)), ), SizedBox( height: 10, ), Text( 'Olaya street, behind KFC resturant, next to kingdom towers 2ND floor ofice 277', - style: TextStyle(fontWeight: FontWeight.w600), + style: TextStyle(color: Color(0xFF464748),fontWeight: FontWeight.w600), ), SizedBox( height: 10, ), - Divider( - color: Colors.grey, + SizedBox( + height: 10.0, + child: Center( + child: Container( + margin: EdgeInsetsDirectional.only(start: 1.0, end: 1.0), + height: 1.0, + color: Colors.grey, + ), + ), ), SizedBox( height: 20, @@ -111,17 +115,24 @@ class CustomerBrief extends StatelessWidget { children: [ Row( children: [ - Text( - TranslationBase - .of(context) - .payment, + Expanded( + flex: 2, + child: Text( + TranslationBase + .of(context) + .payment, + textAlign: TextAlign.start, + ), ), SizedBox( width: 170, ), - Text( - totalPayment.toString(), //'SAR 70', - style: TextStyle(fontWeight: FontWeight.bold), + Expanded( + child: Text( + totalPayment.toString(), //'SAR 70', + textAlign: TextAlign.end, + style: TextStyle(fontWeight: FontWeight.w600), + ), ), ], ), @@ -130,21 +141,28 @@ class CustomerBrief extends StatelessWidget { ), Row( children: [ - Text( - TranslationBase - .of(context) - .delivryTime, + Expanded( + flex: 1, + child: Text( + TranslationBase + .of(context) + .delivryTime, + textAlign: TextAlign.start, + ), ), - SizedBox( - width: 50, +// SizedBox( +// width: 50, +// ), + Expanded( + child: Text( + '${DateUtil.getMonthDayYearDateFormatted( + DateUtil.convertStringToDate( + deliveryTime))} ${(DateUtil + .convertStringToHours(deliveryTime))}', + //'05 Aug 20 - 10:00 AM', + textAlign: TextAlign.end, + style: TextStyle(fontWeight: FontWeight.w600)), ), - Text( - '${DateUtil.getMonthDayYearDateFormatted( - DateUtil.convertStringToDate( - deliveryTime))} ${(DateUtil - .convertStringToHours(deliveryTime))}', - //'05 Aug 20 - 10:00 AM', - style: TextStyle(fontWeight: FontWeight.bold)), ], ) ], diff --git a/lib/widgets/delivery/delivery_action_button.dart b/lib/widgets/delivery/delivery_action_button.dart index 4e05314..adea467 100644 --- a/lib/widgets/delivery/delivery_action_button.dart +++ b/lib/widgets/delivery/delivery_action_button.dart @@ -1,12 +1,12 @@ import 'package:flutter/material.dart'; -class delivery_info_button extends StatelessWidget { +class deliveryInfoButton extends StatelessWidget { final Color btnColor; final Icon btnIcon; final Function btnFunction; final String btnName; - delivery_info_button( + deliveryInfoButton( {this.btnColor, this.btnIcon, this.btnFunction, this.btnName}); @override Widget build(BuildContext context) {