From de3f091ef1bbdb454399ebeafc76435888cb79f5 Mon Sep 17 00:00:00 2001 From: aamir-csol Date: Thu, 2 Apr 2026 16:27:13 +0300 Subject: [PATCH] dashboard --- lib/ui/landing/dashboard_screen.dart | 34 +-- .../shimmer/dashboard_shimmer_widget.dart | 221 +++++------------- 2 files changed, 72 insertions(+), 183 deletions(-) diff --git a/lib/ui/landing/dashboard_screen.dart b/lib/ui/landing/dashboard_screen.dart index 0aafcef..ea0d8d2 100644 --- a/lib/ui/landing/dashboard_screen.dart +++ b/lib/ui/landing/dashboard_screen.dart @@ -431,32 +431,22 @@ class _DashboardScreenState extends State with WidgetsBindingOb return const GreetingCardShimmer(); } else if (model.isDisplayEidGreetings && model.greetingCardsList != null && model.greetingCardsList!.isNotEmpty) { return SizedBox( - height: 140, - child: ListView.separated( - shrinkWrap: true, - scrollDirection: Axis.horizontal, - padding: const EdgeInsets.symmetric(horizontal: 0), - itemCount: model.greetingCardsList!.length, - separatorBuilder: (context, index) => const SizedBox(width: 24), - itemBuilder: (context, index) { - var card = model.greetingCardsList![index]; - return SvgPicture.network( - AppState().isArabic(context) - ? (card.backgroundImageUrlAr ?? "https://www.hmg.com/Lists/CS_Greeting_Cards/Attachments/5/CS_Ramadan_26.jpg") - : (card.backgroundImageUrlEn ?? "https://www.hmg.com/Lists/CS_Greeting_Cards/Attachments/5/CS_Ramadan_26.jpg"), - fit: BoxFit.contain, - placeholderBuilder: (context) => ClipRRect(borderRadius: BorderRadius.circular(18), child: Container(height: 80, color: Colors.white).toShimmer()), - ).onPress(() { - launchUrl(Uri.parse(AppState().isArabic(context) ? card.urlAr! : card.urlEn!)); - }); - }, - ), - ).paddingOnly(bottom: 0); + width: double.infinity, + child: SvgPicture.network( + AppState().isArabic(context) + ? (model.greetingCardsList!.first.backgroundImageUrlAr ?? "https://www.hmg.com/Lists/CS_Greeting_Cards/Attachments/5/CS_Ramadan_26.jpg") + : (model.greetingCardsList!.first.backgroundImageUrlEn ?? "https://www.hmg.com/Lists/CS_Greeting_Cards/Attachments/5/CS_Ramadan_26.jpg"), + fit: BoxFit.cover, + placeholderBuilder: (context) => ClipRRect(borderRadius: BorderRadius.circular(18), child: Container(height: 80, color: Colors.white).toShimmer()), + ).onPress(() { + launchUrl(Uri.parse(AppState().isArabic(context) ? model.greetingCardsList!.first.urlAr! : model.greetingCardsList!.first.urlEn!)); + }), + ); } else { return const SizedBox(); } }, - ).paddingOnly(bottom: 24), + ).paddingOnly(bottom: 24, left: 24, right: 24), // eventActivityWidget(context), if (isDisplayMazaya) ...[ Column( diff --git a/lib/widgets/shimmer/dashboard_shimmer_widget.dart b/lib/widgets/shimmer/dashboard_shimmer_widget.dart index 7d59899..4da9751 100644 --- a/lib/widgets/shimmer/dashboard_shimmer_widget.dart +++ b/lib/widgets/shimmer/dashboard_shimmer_widget.dart @@ -19,13 +19,7 @@ class GetAttendanceTrackingShimmer extends StatelessWidget { decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), - boxShadow: [ - BoxShadow( - color: const Color(0xff000000).withOpacity(.05), - blurRadius: 26, - offset: const Offset(0, -3), - ), - ], + boxShadow: [BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3))], ), child: Stack( alignment: Alignment.center, @@ -46,15 +40,8 @@ class GetAttendanceTrackingShimmer extends StatelessWidget { LocaleKeys.timeLeftToday.tr().toText10(color: Colors.white).toShimmer(), 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), - ), + borderRadius: BorderRadius.all(Radius.circular(20)), + child: LinearProgressIndicator(value: 0.7, minHeight: 8, valueColor: const AlwaysStoppedAnimation(Colors.white), backgroundColor: const Color(0xff196D73)), ).toShimmer(), ], ).paddingOnly(top: 12, right: 15, left: 12), @@ -65,9 +52,7 @@ class GetAttendanceTrackingShimmer extends StatelessWidget { child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, - children: [ - LocaleKeys.checkIn.tr().toText12(color: Colors.white).toShimmer(), - ], + children: [LocaleKeys.checkIn.tr().toText12(color: Colors.white).toShimmer()], ).paddingOnly(left: 12), ), Container( @@ -96,13 +81,7 @@ class MenuShimmer extends StatelessWidget { decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), - boxShadow: [ - BoxShadow( - color: const Color(0xff000000).withOpacity(.05), - blurRadius: 26, - offset: const Offset(0, -3), - ), - ], + boxShadow: [BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3))], ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -111,14 +90,11 @@ class MenuShimmer extends StatelessWidget { LocaleKeys.workList.tr().toText12(color: Colors.white).toShimmer(), Row( children: [ - Expanded( - flex: 3, - child: 123.toString().toText10(color: Colors.white, isBold: true).toShimmer(), - ), + Expanded(flex: 3, child: 123.toString().toText10(color: Colors.white, isBold: true).toShimmer()), 12.width, - SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white).toShimmer() + SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white).toShimmer(), ], - ) + ), ], ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6), ); @@ -137,11 +113,7 @@ class ServicesHeaderShimmer extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, - children: [ - LocaleKeys.otherCharges.tr().toText10().toShimmer(), - 6.height, - LocaleKeys.services.tr().toText12(isBold: true).toShimmer(), - ], + children: [LocaleKeys.otherCharges.tr().toText10().toShimmer(), 6.height, LocaleKeys.services.tr().toText12(isBold: true).toShimmer()], ), ), LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true).toShimmer(), @@ -159,13 +131,7 @@ class ServicesMenuShimmer extends StatelessWidget { decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), - boxShadow: [ - BoxShadow( - color: const Color(0xff000000).withOpacity(.05), - blurRadius: 26, - offset: const Offset(0, -3), - ), - ], + boxShadow: [BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3))], ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -181,15 +147,13 @@ class ServicesMenuShimmer extends StatelessWidget { Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ - Expanded( - child: LocaleKeys.attendance.tr().toText11(isBold: false).toShimmer(), - ), + Expanded(child: LocaleKeys.attendance.tr().toText11(isBold: false).toShimmer()), 6.width, - SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4).toShimmer() + SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4).toShimmer(), ], ), ], - ) + ), ], ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12), ); @@ -202,69 +166,35 @@ class GreetingCardShimmer extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - height: 100, - decoration: BoxDecoration( - color: const Color(0xFFFAF4E7), - border: Border.all(width: 2, color: const Color(0xFFE7E7E7)), - borderRadius: BorderRadius.circular(20), - ), + height: 140, + decoration: BoxDecoration(color: const Color(0xFFFAF4E7), border: Border.all(width: 2, color: const Color(0xFFE7E7E7)), borderRadius: BorderRadius.circular(20)), child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - width: 65, - height: 81, - decoration: BoxDecoration( - color: Colors.grey[300], - borderRadius: BorderRadius.circular(10), - ), - ).toShimmer(), + const SizedBox(width: 10), + Container(width: 65, height: 100, decoration: BoxDecoration(color: Colors.grey[300], borderRadius: BorderRadius.circular(10))).toShimmer().paddingOnly(top: 10), const SizedBox(width: 10), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ - Container( - width: 150, - height: 16, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(4), - ), - ).toShimmer(), + Container(width: 150, height: 16, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))).toShimmer(), const SizedBox(height: 8), - Container( - width: 120, - height: 16, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(4), - ), - ).toShimmer(), + Container(width: 120, height: 16, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))).toShimmer(), ], ).expanded, Column( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end, - children: [ - Container( - width: 60, - height: 12, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(4), - ), - ).toShimmer(), - ], + children: [Container(width: 60, height: 12, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))).toShimmer()], ), ], ).paddingOnly(left: 8, right: 8, top: 6, bottom: 12), - ).paddingOnly(left: 21, right: 21, top: 14, bottom: 14); + ).paddingOnly( top: 14, bottom: 14); } } - class MarathonBannerShimmer extends StatelessWidget { const MarathonBannerShimmer({Key? key}) : super(key: key); @@ -274,13 +204,7 @@ class MarathonBannerShimmer extends StatelessWidget { decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), - boxShadow: [ - BoxShadow( - color: const Color(0xff000000).withOpacity(.05), - blurRadius: 26, - offset: const Offset(0, -3), - ), - ], + boxShadow: [BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3))], ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -296,15 +220,13 @@ class MarathonBannerShimmer extends StatelessWidget { Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ - Expanded( - child: LocaleKeys.attendance.tr().toText11(isBold: false).toShimmer(), - ), + Expanded(child: LocaleKeys.attendance.tr().toText11(isBold: false).toShimmer()), 6.width, - SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4).toShimmer() + SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4).toShimmer(), ], ), ], - ) + ), ], ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12), ); @@ -320,66 +242,43 @@ class ChatHomeShimmer extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - width: double.infinity, - padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), - child: Column( - mainAxisSize: MainAxisSize.max, - children: [ - Expanded( - child: Shimmer.fromColors( - baseColor: Colors.white, - highlightColor: Colors.grey.shade100, - child: ListView.builder( - itemBuilder: (_, __) => Padding( - padding: const EdgeInsets.only(bottom: 8.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (!isDetailedScreen) - Container( - width: 48.0, - height: 48.0, - decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(40))), - ), - if (!isDetailedScreen) - const Padding( - padding: EdgeInsets.symmetric(horizontal: 8.0), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - width: double.infinity, - height: 20.0, - color: Colors.white, - ), - const Padding( - padding: EdgeInsets.symmetric(vertical: 2.0), - ), - Container( - width: double.infinity, - height: 15.0, - color: Colors.white, - ), - const Padding( - padding: EdgeInsets.symmetric(vertical: 2.0), - ), - Container( - width: 40.0, - height: 10.0, - color: Colors.white, - ), - ], - ).expanded - ], + width: double.infinity, + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0), + child: Column( + mainAxisSize: MainAxisSize.max, + children: [ + Expanded( + child: Shimmer.fromColors( + baseColor: Colors.white, + highlightColor: Colors.grey.shade100, + child: ListView.builder( + itemBuilder: + (_, __) => Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (!isDetailedScreen) Container(width: 48.0, height: 48.0, decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(40)))), + if (!isDetailedScreen) const Padding(padding: EdgeInsets.symmetric(horizontal: 8.0)), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container(width: double.infinity, height: 20.0, color: Colors.white), + const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)), + Container(width: double.infinity, height: 15.0, color: Colors.white), + const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)), + Container(width: 40.0, height: 10.0, color: Colors.white), + ], + ).expanded, + ], + ), ), - ), - itemCount: 6, - ), + itemCount: 6, ), ), - ], - )); + ), + ], + ), + ); } } -