-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Skeletons): Add a user bookings skeleton loader
Signed-off-by: arafaysaleem <a.rafaysaleem@gmail.com>
- Loading branch information
1 parent
a2ca4be
commit 74982f5
Showing
4 changed files
with
244 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| //Helpers | ||
| import '../../helper/utils/constants.dart'; | ||
|
|
||
| //Widgets | ||
| import '../widgets/common/shimmer_loader.dart'; | ||
|
|
||
| class UserBookingsSkeletonLoader extends StatelessWidget { | ||
| const UserBookingsSkeletonLoader(); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ShimmerLoader( | ||
| child: ListView.separated( | ||
| itemCount: 4, | ||
| physics: const NeverScrollableScrollPhysics(), | ||
| separatorBuilder: (ctx,i) => const SizedBox(height: 20), | ||
| itemBuilder: (ctx,i) => const _UserBookingSkeleton(), | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class _UserBookingSkeleton extends StatelessWidget { | ||
| const _UserBookingSkeleton({ | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return SizedBox( | ||
| height: 140, | ||
| child: Stack( | ||
| alignment: Alignment.bottomCenter, | ||
| children: [ | ||
| //Booking overview | ||
| SizedBox( | ||
| height: 120, | ||
| child: Row( | ||
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | ||
| children: const [ | ||
| //Booking details | ||
| _BookingDetailsSkeleton(), | ||
|
|
||
| //No of seats | ||
| SizedBox( | ||
| height: double.infinity, | ||
| width: 45, | ||
| child: DecoratedBox( | ||
| decoration: BoxDecoration( | ||
| color: Constants.darkSkeletonColor, | ||
| borderRadius: BorderRadius.only( | ||
| topRight: Radius.circular(15), | ||
| bottomRight: Radius.circular(15), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
|
|
||
| //Movie Image | ||
| const Positioned( | ||
| bottom: 13, | ||
| left: 13, | ||
| child: SizedBox( | ||
| height: 125, | ||
| width: 100, | ||
| child: DecoratedBox( | ||
| decoration: BoxDecoration( | ||
| color: Constants.darkSkeletonColor, | ||
| borderRadius: BorderRadius.all(Radius.circular(10)), | ||
| ), | ||
| child: Center( | ||
| child: Icon( | ||
| Icons.movie_creation_rounded, | ||
| color: Constants.lightSkeletonColor, | ||
| size: 40, | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class _BookingDetailsSkeleton extends StatelessWidget { | ||
| const _BookingDetailsSkeleton({ | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Expanded( | ||
| child: Container( | ||
| decoration: const BoxDecoration( | ||
| color: Constants.lightSkeletonColor, | ||
| borderRadius: BorderRadius.only( | ||
| topLeft: Radius.circular(15), | ||
| bottomLeft: Radius.circular(15), | ||
| ), | ||
| ), | ||
| padding: const EdgeInsets.fromLTRB(125, 10, 10, 13), | ||
| child: Column( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: const [ | ||
| //Movie data | ||
| SizedBox( | ||
| height: 25, | ||
| width: double.infinity, | ||
| child: DecoratedBox( | ||
| decoration: BoxDecoration( | ||
| color: Constants.darkSkeletonColor, | ||
| borderRadius: BorderRadius.all( | ||
| Radius.circular(6), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
|
|
||
| SizedBox(height: 10), | ||
|
|
||
| //Show details | ||
| Expanded( | ||
| child: SizedBox( | ||
| width: double.infinity, | ||
| child: DecoratedBox( | ||
| decoration: BoxDecoration( | ||
| color: Constants.darkSkeletonColor, | ||
| borderRadius: BorderRadius.all( | ||
| Radius.circular(8), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
48 changes: 48 additions & 0 deletions
48
lib/views/widgets/user_bookings/user_bookings_history.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_hooks/flutter_hooks.dart'; | ||
| import 'package:hooks_riverpod/hooks_riverpod.dart'; | ||
|
|
||
| //Helpers | ||
| import '../../../helper/extensions/context_extensions.dart'; | ||
|
|
||
| //Providers | ||
| import '../../../providers/bookings_provider.dart'; | ||
|
|
||
| //Services | ||
| import '../../../services/networking/network_exception.dart'; | ||
|
|
||
| //Skeletons | ||
| import '../../skeletons/user_bookings_skeleton_loader.dart'; | ||
|
|
||
| //Widgets | ||
| import '../common/custom_error_widget.dart'; | ||
| import 'user_bookings_list.dart'; | ||
|
|
||
| class UserBookingsHistory extends HookWidget { | ||
| const UserBookingsHistory(); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final userBookingsFuture = useProvider(userBookingsProvider); | ||
| return AnimatedSwitcher( | ||
| duration: const Duration(milliseconds: 600), | ||
| switchOutCurve: Curves.easeInBack, | ||
| child: userBookingsFuture.when( | ||
| data: (bookings) => UserBookingsList(bookings: bookings), | ||
| loading: () => const UserBookingsSkeletonLoader(), | ||
| error: (error, st) { | ||
| if (error is NetworkException) { | ||
| return CustomErrorWidget.dark( | ||
| error: error, | ||
| retryCallback: () => context.refresh(userBookingsProvider), | ||
| height: context.screenHeight * 0.5, | ||
| ); | ||
| } | ||
| debugPrint(error.toString()); | ||
| debugPrint(st.toString()); | ||
| return const SizedBox.shrink(); | ||
| }, | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters