From c2ced77bca8ab1ada2e12b2fe7df7b3c1501eceb Mon Sep 17 00:00:00 2001 From: devmirza121 Date: Mon, 24 Jan 2022 14:57:08 +0300 Subject: [PATCH] shimmer --- lib/ui/landing/dashboard.dart | 193 +++++++++------------------------- pubspec.lock | 17 ++- pubspec.yaml | 1 + 3 files changed, 64 insertions(+), 147 deletions(-) diff --git a/lib/ui/landing/dashboard.dart b/lib/ui/landing/dashboard.dart index 2c8367a..ac427d1 100644 --- a/lib/ui/landing/dashboard.dart +++ b/lib/ui/landing/dashboard.dart @@ -8,7 +8,9 @@ import 'package:mohem_flutter_app/extensions/int_extensions.dart'; import 'package:mohem_flutter_app/extensions/string_extensions.dart'; import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; import 'package:mohem_flutter_app/generated/locale_keys.g.dart'; +import 'package:mohem_flutter_app/theme/colors.dart'; import 'package:mohem_flutter_app/widgets/circular_avatar.dart'; +import 'package:shimmer/shimmer.dart'; class Dashboard extends StatefulWidget { Dashboard({Key? key}) : super(key: key); @@ -32,34 +34,14 @@ class _DashboardState extends State { @override Widget build(BuildContext context) { - List names = [ - LocaleKeys.workList.tr(), - LocaleKeys.missingSwipes.tr(), - LocaleKeys.leaveBalance.tr(), - LocaleKeys.ticketBalance.tr() - ]; + List names = [LocaleKeys.workList.tr(), LocaleKeys.missingSwipes.tr(), LocaleKeys.leaveBalance.tr(), LocaleKeys.ticketBalance.tr()]; List namesInt = [118, 02, 18.5, 03]; List namesColor = [0xff125765, 0xff239D8F, 0xff2BB8A8, 0xff1D92AA]; - 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 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" - ]; + List namesD = ["Nostalgia Perfume Perfume", "Al Nafoura", "AlJadi", "Nostalgia Perfume"]; return Scaffold( body: Column( @@ -72,8 +54,7 @@ class _DashboardState extends State { CircularAvatar( width: 34, height: 34, - url: - "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", + url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", ), 8.width, SvgPicture.asset("assets/images/side_nav.svg"), @@ -103,9 +84,7 @@ class _DashboardState extends State { top: 0, child: Container( padding: const EdgeInsets.only(left: 5, right: 5), - decoration: BoxDecoration( - color: MyColors.redColor, - borderRadius: BorderRadius.circular(17)), + decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)), child: "3".toText12(color: Colors.white), ), ) @@ -121,9 +100,7 @@ class _DashboardState extends State { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - LocaleKeys.goodMorning - .tr() - .toText14(color: MyColors.grey77Color), + LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), "Mahmoud Shrouf".toText24(isBold: true), 16.height, Row( @@ -134,41 +111,27 @@ class _DashboardState extends State { 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, - ]), + 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/"), + // SvgPicture.asset("assets/images/"), Column( - crossAxisAlignment: - CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Column( mainAxisSize: MainAxisSize.min, - crossAxisAlignment: - CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - LocaleKeys.markAttendance - .tr() - .toText14( - color: Colors.white, - isBold: true), + 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), + "07:55:12".toText14(color: Colors.white, isBold: true), + LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), 9.height, const ClipRRect( borderRadius: BorderRadius.all( @@ -177,50 +140,33 @@ class _DashboardState extends State { child: LinearProgressIndicator( value: 0.7, minHeight: 8, - valueColor: - const AlwaysStoppedAnimation< - Color>(Colors.white), - backgroundColor: - const Color(0xff196D73), + valueColor: const AlwaysStoppedAnimation(Colors.white), + backgroundColor: const Color(0xff196D73), ), ), ], - ).paddingOnly( - top: 12, right: 15, left: 12), + ).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 - ], + 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), + padding: const EdgeInsets.only(left: 14, right: 14), decoration: const BoxDecoration( color: Color(0xff259EA4), borderRadius: BorderRadius.only( - bottomRight: - Radius.circular(15), + bottomRight: Radius.circular(15), ), ), - child: SvgPicture.asset( - "assets/images/stop.svg"), + child: SvgPicture.asset("assets/images/stop.svg"), ), ], ), @@ -229,8 +175,7 @@ class _DashboardState extends State { ], ), ).onPress(() { - Navigator.pushNamed( - context, AppRoutes.todayAttendance); + Navigator.pushNamed(context, AppRoutes.todayAttendance); }), ), ), @@ -240,12 +185,7 @@ class _DashboardState extends State { shrinkWrap: true, primary: false, physics: const NeverScrollableScrollPhysics(), - gridDelegate: - const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, - childAspectRatio: 2 / 2, - crossAxisSpacing: 9, - mainAxisSpacing: 9), + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9), padding: EdgeInsets.zero, itemCount: 4, itemBuilder: (BuildContext context, int index) { @@ -255,31 +195,22 @@ class _DashboardState extends State { borderRadius: BorderRadius.circular(10), ), child: Column( - mainAxisAlignment: - MainAxisAlignment.spaceBetween, + mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ names[index].toText12(color: Colors.white), Row( children: [ Expanded( - child: namesInt[index] - .toStringAsFixed(1) - .toText16( - color: Colors.white, - isBold: true), + child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true), ), - SvgPicture.asset( - "assets/images/arrow_next.svg", - color: Colors.white) + SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white) ], ) ], - ).paddingOnly( - left: 10, right: 10, bottom: 6, top: 6), + ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6), ).onPress(() { - Navigator.pushNamed( - context, AppRoutes.workList); + Navigator.pushNamed(context, AppRoutes.workList); }); }, ), @@ -300,9 +231,7 @@ class _DashboardState extends State { ], ), ), - LocaleKeys.viewAllServices - .tr() - .toText12(isUnderLine: true), + LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true), ], ), ], @@ -312,8 +241,7 @@ class _DashboardState extends State { child: ListView.separated( shrinkWrap: true, physics: const BouncingScrollPhysics(), - padding: const EdgeInsets.only( - left: 21, right: 21, top: 13, bottom: 13), + padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13), scrollDirection: Axis.horizontal, itemBuilder: (cxt, index) { return AspectRatio( @@ -324,8 +252,7 @@ class _DashboardState extends State { borderRadius: BorderRadius.circular(15), boxShadow: [ BoxShadow( - color: - const Color(0xff000000).withOpacity(.05), + color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3), ), @@ -340,17 +267,13 @@ class _DashboardState extends State { crossAxisAlignment: CrossAxisAlignment.end, children: [ Expanded( - child: - namesT[index].toText11(isBold: true), + child: namesT[index].toText11(isBold: true), ), - SvgPicture.asset( - "assets/images/arrow_next.svg") - .paddingOnly(bottom: 4) + SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4) ], ) ], - ).paddingOnly( - left: 10, right: 10, bottom: 10, top: 12), + ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12), ), ); }, @@ -363,11 +286,8 @@ class _DashboardState extends State { 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), + borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(50)), + border: Border.all(color: MyColors.lightGreyEDColor, width: 1), ), child: Column( mainAxisSize: MainAxisSize.min, @@ -383,29 +303,21 @@ class _DashboardState extends State { LocaleKeys.offers.tr().toText12(), Row( children: [ - LocaleKeys.discounts - .tr() - .toText24(isBold: true), + LocaleKeys.discounts.tr().toText24(isBold: true), 6.width, Container( - padding: const EdgeInsets.only( - left: 8, right: 8), + padding: const EdgeInsets.only(left: 8, right: 8), decoration: BoxDecoration( color: MyColors.yellowColor, - borderRadius: - BorderRadius.circular(10), + borderRadius: BorderRadius.circular(10), ), - child: LocaleKeys.newString - .tr() - .toText10(isBold: true)), + child: LocaleKeys.newString.tr().toText10(isBold: true)), ], ), ], ), ), - LocaleKeys.viewAllOffers - .tr() - .toText12(isUnderLine: true), + LocaleKeys.viewAllOffers.tr().toText12(isUnderLine: true), ], ).paddingOnly(left: 21, right: 21), SizedBox( @@ -413,8 +325,7 @@ class _DashboardState extends State { child: ListView.separated( shrinkWrap: true, physics: const BouncingScrollPhysics(), - padding: const EdgeInsets.only( - left: 21, right: 21, top: 13), + padding: const EdgeInsets.only(left: 21, right: 21, top: 13), scrollDirection: Axis.horizontal, itemBuilder: (cxt, index) { return SizedBox( @@ -429,9 +340,7 @@ class _DashboardState extends State { borderRadius: const BorderRadius.all( Radius.circular(100), ), - border: Border.all( - color: MyColors.lightGreyEDColor, - width: 1), + border: Border.all(color: MyColors.lightGreyEDColor, width: 1), ), child: ClipRRect( borderRadius: const BorderRadius.all( @@ -445,8 +354,8 @@ class _DashboardState extends State { ), 4.height, Expanded( - child: namesD[6 % (index + 1)].toText12( - isCenter: true, maxLine: 2)), + child: namesD[6 % (index + 1)].toText12(isCenter: true, maxLine: 2), + ), ], ), ); diff --git a/pubspec.lock b/pubspec.lock index 56d2f3f..1ae9d08 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -14,7 +14,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.8.1" + version: "2.8.2" boolean_selector: dependency: transitive description: @@ -28,7 +28,7 @@ packages: name: characters url: "https://pub.dartlang.org" source: hosted - version: "1.1.0" + version: "1.2.0" charcode: dependency: transitive description: @@ -202,7 +202,7 @@ packages: name: matcher url: "https://pub.dartlang.org" source: hosted - version: "0.12.10" + version: "0.12.11" meta: dependency: transitive description: @@ -392,6 +392,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "2.0.3" + shimmer: + dependency: "direct main" + description: + name: shimmer + url: "https://pub.dartlang.org" + source: hosted + version: "2.0.0" sizer: dependency: "direct main" description: @@ -445,7 +452,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.4.2" + version: "0.4.3" typed_data: dependency: transitive description: @@ -466,7 +473,7 @@ packages: name: vector_math url: "https://pub.dartlang.org" source: hosted - version: "2.1.0" + version: "2.1.1" win32: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index dfbb0eb..868012d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -44,6 +44,7 @@ dependencies: sizer: ^2.0.15 local_auth: ^1.1.9 fluttertoast: ^8.0.8 + shimmer: ^2.0.0 dev_dependencies: