apksel-dev/apskel-owner-flutter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: order shimmer

Browse Source
This commit is contained in:
efrilm 2025-08-19 11:44:50 +07:00
parent 5b91b5978f
commit 9b51bf2bee
1 changed files with 126 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
lib/presentation/pages/order/order_list/order_page.dart
View File

@ -4,6 +4,7 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:line_icons/line_icons.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../application/order/order_loader/order_loader_bloc.dart';
import '../../../../common/theme/theme.dart';
@ -76,6 +77,104 @@ class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
super.dispose();
}
Widget _buildShimmerOrderCard() {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 120,
height: 16,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 60,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
),
],
),
const SizedBox(height: 8),
Container(
width: double.infinity,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 6),
Container(
width: 200,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 80,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 100,
height: 16,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
],
),
),
);
}
Widget _buildShimmerList() {
return ListView.builder(
itemCount: 5, // Show 5 shimmer cards
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
itemBuilder: (context, index) => _buildShimmerOrderCard(),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -180,7 +279,7 @@ class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
child: Column(
children: [
// Show filtered transaction count
if (state.status != 'all')
if (state.status != 'all' && !state.isFetching)
Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Row(
@ -196,14 +295,17 @@ class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
),
),
// Transaction List
state.orders.isEmpty
? EmptyWidget(
// Order List with Shimmer Loading
if (state.isFetching)
_buildShimmerList()
else if (state.orders.isEmpty)
EmptyWidget(
title: 'Order',
message:
'No ${state.status.toLowerCase()} orders found',
)
: ListView.builder(
else
ListView.builder(
itemCount: state.orders.length,
shrinkWrap: true,
physics:
@ -236,5 +338,3 @@ class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
);
}
}
// Custom delegate for pinned filter header