From f16b3c5c79d804dbf20718a426658712811c206d Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Wed, 22 Dec 2021 15:56:18 +0300 Subject: [PATCH] dashboard ui added. --- assets/langs/ar-SA.json | 1 + assets/langs/en-US.json | 1 + lib/classes/colors.dart | 4 +- lib/dialogs/otp_dialog.dart | 4 +- lib/extensions/string_extensions.dart | 28 +- lib/ui/dashboard.dart | 490 +++++++++++++++----------- lib/ui/login/verify_login_screen.dart | 2 +- 7 files changed, 314 insertions(+), 216 deletions(-) diff --git a/assets/langs/ar-SA.json b/assets/langs/ar-SA.json index 5419919..ba920a8 100644 --- a/assets/langs/ar-SA.json +++ b/assets/langs/ar-SA.json @@ -35,6 +35,7 @@ "viewAllOffers": "View All Offers", "offers": "Offers & ", "discounts": "Discounts", + "newString": "New", "title": "Title", "home": "Home", "mySalary": "My Salary", diff --git a/assets/langs/en-US.json b/assets/langs/en-US.json index 5419919..ba920a8 100644 --- a/assets/langs/en-US.json +++ b/assets/langs/en-US.json @@ -35,6 +35,7 @@ "viewAllOffers": "View All Offers", "offers": "Offers & ", "discounts": "Discounts", + "newString": "New", "title": "Title", "home": "Home", "mySalary": "My Salary", diff --git a/lib/classes/colors.dart b/lib/classes/colors.dart index 79b0d31..e8b8b2a 100644 --- a/lib/classes/colors.dart +++ b/lib/classes/colors.dart @@ -10,7 +10,9 @@ class MyColors { static const Color grey57Color = Color(0xff575757); static const Color grey77Color = Color(0xff777777); static const Color grey98Color = Color(0xff989898); - static const Color lightGreyColor = Color(0xffEFEFEF); + static const Color lightGreyEFColor = Color(0xffEFEFEF); + static const Color lightGreyEDColor = Color(0xffEDEDED); static const Color darkWhiteColor = Color(0xffE0E0E0); static const Color redColor = Color(0xffD02127); + static const Color yellowColor = Color(0xffF4E31C); } diff --git a/lib/dialogs/otp_dialog.dart b/lib/dialogs/otp_dialog.dart index 6a14d63..f589211 100644 --- a/lib/dialogs/otp_dialog.dart +++ b/lib/dialogs/otp_dialog.dart @@ -3,10 +3,10 @@ import 'dart:async'; import 'package:easy_localization/src/public_ext.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; -import 'package:mohem_flutter_app/generated/locale_keys.g.dart'; import 'package:mohem_flutter_app/classes/colors.dart'; import 'package:mohem_flutter_app/extensions/int_extensions.dart'; import 'package:mohem_flutter_app/extensions/string_extensions.dart'; +import 'package:mohem_flutter_app/generated/locale_keys.g.dart'; import 'package:mohem_flutter_app/widgets/otp_widget.dart'; class OtpDialog { @@ -86,7 +86,7 @@ class OtpDialog { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ SvgPicture.asset( - type == 1 ? "assets/images/verify_sms.svg" : "assets/images/verify_whatsapp.svg", + type == 1 ? "assets/images/login/verify_sms.svg" : "assets/images/login/verify_whatsapp.svg", height: 50, width: 50, ), diff --git a/lib/extensions/string_extensions.dart b/lib/extensions/string_extensions.dart index 9ba31c8..d77bbff 100644 --- a/lib/extensions/string_extensions.dart +++ b/lib/extensions/string_extensions.dart @@ -5,9 +5,9 @@ import 'package:mohem_flutter_app/classes/colors.dart'; extension EmailValidator on String { Widget get toWidget => Text(this); - Widget toText10({Color? color}) => Text( + Widget toText10({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), + style: TextStyle(fontSize: 10, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), ); Widget toText11({Color? color, bool isUnderLine = false, bool isBold = false}) => Text( @@ -20,24 +20,26 @@ extension EmailValidator on String { decoration: isUnderLine ? TextDecoration.underline : null), ); - Widget toText12({Color? color, bool isUnderLine = false, bool isBold = false}) => Text( - this, - style: TextStyle( - fontSize: 12, - fontWeight: isBold ? FontWeight.bold : FontWeight.w600, - color: color ?? MyColors.darkTextColor, - letterSpacing: -0.72, - decoration: isUnderLine ? TextDecoration.underline : null), - ); + Widget toText12({Color? color, bool isUnderLine = false, bool isBold = false, bool isCenter = false, int maxLine = 0}) => Text( + this, + textAlign: isCenter ? TextAlign.center : null, + maxLines: (maxLine > 0) ? maxLine : null, + style: TextStyle( + fontSize: 12, + fontWeight: isBold ? FontWeight.bold : FontWeight.w600, + color: color ?? MyColors.darkTextColor, + letterSpacing: -0.72, + decoration: isUnderLine ? TextDecoration.underline : null), + ); Widget toText13({Color? color, bool isUnderLine = false}) => Text( this, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.52, decoration: isUnderLine ? TextDecoration.underline : null), ); - Widget toText14({Color? color,bool isBold = false}) => Text( + Widget toText14({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(color: color ?? MyColors.darkTextColor, fontSize: 14, letterSpacing: -0.48, fontWeight: isBold ? FontWeight.bold :FontWeight.w600), + style: TextStyle(color: color ?? MyColors.darkTextColor, fontSize: 14, letterSpacing: -0.48, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), ); Widget toText16({Color? color, bool isBold = false}) => Text( diff --git a/lib/ui/dashboard.dart b/lib/ui/dashboard.dart index 65d4cfd..2c9cf50 100644 --- a/lib/ui/dashboard.dart +++ b/lib/ui/dashboard.dart @@ -38,235 +38,327 @@ class _DashboardState extends State { List namesT = [LocaleKeys.monthlyAttendance.tr(), LocaleKeys.workFromHome.tr(), LocaleKeys.ticketRequest.tr(), LocaleKeys.monthlyAttendance.tr()]; List iconT = ["assets/images/monthly_attendance.svg", "assets/images/work_from_home.svg", "assets/images/ticket_request.svg", "assets/images/work_from_home.svg"]; + List namesD = ["Nostalgia Perfume Perfume", "Al Nafoura", "AlJadi", "Nostalgia Perfume"]; + return Scaffold( body: Column( children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, + Row( children: [ Row( + mainAxisSize: MainAxisSize.min, children: [ - Row( - mainAxisSize: MainAxisSize.min, - children: [ - CircularAvatar( - width: 34, - height: 34, - url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", - ), - 8.width, - SvgPicture.asset("assets/images/side_nav.svg"), - ], - ).onPress(() {}), - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.min, - children: [ - //AppLogo(), - 8.width, - LocaleKeys.mohemm.tr().toText14() - ], - ), + CircularAvatar( + width: 34, + height: 34, + url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", ), - SizedBox( - width: 36, - height: 36, - child: Stack( - alignment: Alignment.centerLeft, - children: [ - SvgPicture.asset("assets/images/announcements.svg"), - Positioned( - right: 0, - top: 0, - child: Container( - padding: const EdgeInsets.only(left: 5, right: 5), - decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)), - child: "3".toText12(color: Colors.white), - ), - ) - ], - ), - ) + 8.width, + SvgPicture.asset("assets/images/side_nav.svg"), ], + ).onPress(() {}), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + //AppLogo(), + 8.width, + LocaleKeys.mohemm.tr().toText14() + ], + ), ), - 14.height, - LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), - "Mahmoud Shrouf".toText24(isBold: true), - 16.height, - Row( - children: [ - Expanded( - child: AspectRatio( - aspectRatio: 159 / 159, + SizedBox( + width: 36, + height: 36, + child: Stack( + alignment: Alignment.centerLeft, + children: [ + SvgPicture.asset("assets/images/announcements.svg"), + Positioned( + right: 0, + top: 0, child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(15), - gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [ - MyColors.gradiantEndColor, - MyColors.gradiantStartColor, - ]), - ), - child: Stack( - alignment: Alignment.center, - children: [ - SvgPicture.asset("assets/images/"), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Column( - mainAxisSize: MainAxisSize.min, + padding: const EdgeInsets.only(left: 5, right: 5), + decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)), + child: "3".toText12(color: Colors.white), + ), + ) + ], + ), + ) + ], + ).paddingOnly(left: 21, right: 21, top: 48, bottom: 7), + Expanded( + child: ListView( + padding: EdgeInsets.zero, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), + "Mahmoud Shrouf".toText24(isBold: true), + 16.height, + Row( + children: [ + Expanded( + child: AspectRatio( + aspectRatio: 159 / 159, + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ]), + ), + child: Stack( + alignment: Alignment.center, + children: [ + SvgPicture.asset("assets/images/"), + Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true), - 9.height, - "07:55:12".toText14(color: Colors.white, isBold: true), - LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), - 9.height, - ClipRRect( - borderRadius: const BorderRadius.all( - Radius.circular(20), - ), - child: LinearProgressIndicator( - value: 0.7, - minHeight: 8, - valueColor: const AlwaysStoppedAnimation(Colors.white), - backgroundColor: const Color(0xff196D73), - ), + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true), + 9.height, + "07:55:12".toText14(color: Colors.white, isBold: true), + LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), + 9.height, + const ClipRRect( + borderRadius: BorderRadius.all( + Radius.circular(20), + ), + child: LinearProgressIndicator( + value: 0.7, + minHeight: 8, + valueColor: const AlwaysStoppedAnimation(Colors.white), + backgroundColor: const Color(0xff196D73), + ), + ), + ], + ).paddingOnly(top: 12, right: 15, left: 12), + ), + Row( + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [LocaleKeys.checkIn.tr().toText12(color: Colors.white), "09:00".toText14(color: Colors.white, isBold: true), 4.height], + ).paddingOnly(left: 12), + ), + Container( + width: 45, + height: 45, + padding: const EdgeInsets.only(left: 14, right: 14), + decoration: const BoxDecoration( + color: Color(0xff259EA4), + borderRadius: BorderRadius.only( + bottomRight: Radius.circular(15), + ), + ), + child: SvgPicture.asset("assets/images/stop.svg"), + ), + ], ), ], - ).paddingOnly(top: 12, right: 15, left: 12), + ), + ], + ), + ), + ), + ), + 9.width, + Expanded( + child: GridView.builder( + shrinkWrap: true, + primary: false, + physics: const NeverScrollableScrollPhysics(), + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9), + padding: EdgeInsets.zero, + itemCount: 4, + itemBuilder: (BuildContext context, int index) { + return Container( + decoration: BoxDecoration( + color: Color(namesColor[index]), + borderRadius: BorderRadius.circular(10), ), - Row( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded( - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [LocaleKeys.checkIn.tr().toText12(color: Colors.white), "09:00".toText14(color: Colors.white, isBold: true), 4.height], - ).paddingOnly(left: 12), - ), - Container( - width: 45, - height: 45, - padding: const EdgeInsets.only(left: 14, right: 14), - decoration: const BoxDecoration( - color: Color(0xff259EA4), - borderRadius: BorderRadius.only( - bottomRight: Radius.circular(15), + names[index].toText12(color: Colors.white), + Row( + children: [ + Expanded( + child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true), ), - ), - child: SvgPicture.asset("assets/images/stop.svg"), - ), + SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white) + ], + ) ], - ), - ], - ), - ], + ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6), + ); + }, + ), ), - ), + ], ), - ), - 9.width, - Expanded( - child: GridView.builder( - shrinkWrap: true, - primary: false, - physics: const NeverScrollableScrollPhysics(), - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9), - padding: EdgeInsets.zero, - itemCount: 4, - itemBuilder: (BuildContext context, int index) { - return Container( - decoration: BoxDecoration( - color: Color(namesColor[index]), - borderRadius: BorderRadius.circular(10), - ), + 20.height, + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, children: [ - names[index].toText12(color: Colors.white), - Row( - children: [ - Expanded( - child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true), - ), - SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white) - ], - ) + LocaleKeys.other.tr().toText12(), + LocaleKeys.services.tr().toText24(isBold: true), ], - ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6), - ); - }, - ), - ), - ], - ), - 20.height, - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - LocaleKeys.other.tr().toText12(), - LocaleKeys.services.tr().toText24(isBold: true), + ), + ), + LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true), ], ), + ], + ).paddingOnly(left: 21, right: 21, top: 7), + SizedBox( + height: 105 + 26, + child: ListView.separated( + shrinkWrap: true, + physics: const BouncingScrollPhysics(), + padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13), + scrollDirection: Axis.horizontal, + itemBuilder: (cxt, index) { + return AspectRatio( + aspectRatio: 105 / 105, + child: Container( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(15), + boxShadow: [ + BoxShadow( + color: const Color(0xff000000).withOpacity(.05), + blurRadius: 26, + offset: const Offset(0, -3), + ), + ], + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SvgPicture.asset(iconT[index]), + Row( + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Expanded( + child: namesT[index].toText11(isBold: true), + ), + SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4) + ], + ) + ], + ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12), + ), + ); + }, + separatorBuilder: (cxt, index) => 9.width, + itemCount: 4), + ), + 8.height, + Container( + width: double.infinity, + padding: EdgeInsets.only(top: 31), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(50)), + border: Border.all(color: MyColors.lightGreyEDColor, width: 1), ), - LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true), - ], - ), - ], - ).paddingOnly(left: 21, right: 21, top: 48), - SizedBox( - height: 105 + 26, - child: ListView.separated( - shrinkWrap: true, - physics: const BouncingScrollPhysics(), - padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13), - scrollDirection: Axis.horizontal, - itemBuilder: (cxt, index) { - return AspectRatio( - aspectRatio: 105 / 105, - child: Container( - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(15), - boxShadow: [ - BoxShadow( - color: const Color(0xff000000).withOpacity(.05), - blurRadius: 26, - offset: const Offset(0, -3), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + LocaleKeys.offers.tr().toText12(), + Row( + children: [ + LocaleKeys.discounts.tr().toText24(isBold: true), + 6.width, + Container( + padding: const EdgeInsets.only(left: 8, right: 8), + decoration: BoxDecoration( + color: MyColors.yellowColor, + borderRadius: BorderRadius.circular(10), + ), + child: LocaleKeys.newString.tr().toText10(isBold: true)), + ], + ), + ], + ), ), + LocaleKeys.viewAllOffers.tr().toText12(isUnderLine: true), ], + ).paddingOnly(left: 21, right: 21), + SizedBox( + height: 103 + 33, + child: ListView.separated( + shrinkWrap: true, + physics: const BouncingScrollPhysics(), + padding: const EdgeInsets.only(left: 21, right: 21, top: 13), + scrollDirection: Axis.horizontal, + itemBuilder: (cxt, index) { + return SizedBox( + width: 73, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + width: 73, + height: 73, + decoration: BoxDecoration( + borderRadius: const BorderRadius.all( + Radius.circular(100), + ), + border: Border.all(color: MyColors.lightGreyEDColor, width: 1), + ), + child: ClipRRect( + borderRadius: const BorderRadius.all( + Radius.circular(50), + ), + child: Image.network( + "https://play-lh.googleusercontent.com/NPo88ojmhah4HDiposucJmfQIop4z4xc8kqJK9ITO9o-yCab2zxIp7PPB_XPj2iUojo", + fit: BoxFit.cover, + ), + ), + ), + 4.height, + Expanded(child: namesD[6 % (index + 1)].toText12(isCenter: true,maxLine: 2)), + ], + ), + ); + }, + separatorBuilder: (cxt, index) => 8.width, + itemCount: 6), ), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SvgPicture.asset(iconT[index]), - Row( - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - Expanded( - child: namesT[index].toText11(isBold: true), - ), - SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4) - ], - ) - ], - ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12), - ), - ); - }, - separatorBuilder: (cxt, index) => 9.width, - itemCount: 4), + ], + ), + ) + ], + ), ) ], ), diff --git a/lib/ui/login/verify_login_screen.dart b/lib/ui/login/verify_login_screen.dart index 249fa52..54be916 100644 --- a/lib/ui/login/verify_login_screen.dart +++ b/lib/ui/login/verify_login_screen.dart @@ -641,7 +641,7 @@ class _VerifyLoginScreenState extends State { decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), color: isDisable ? Colors.grey.withOpacity(0.3) : Colors.white, - border: Border.all(color: MyColors.lightGreyColor, width: 1), + border: Border.all(color: MyColors.lightGreyEFColor, width: 1), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start,