459 lines
14 KiB
Dart
459 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:marco/helpers/widgets/my_card.dart';
|
|
import 'package:marco/helpers/widgets/my_spacing.dart';
|
|
import 'package:marco/helpers/utils/my_shadow.dart';
|
|
|
|
class SkeletonLoaders {
|
|
static Widget buildLoadingSkeleton() {
|
|
return SizedBox(
|
|
height: 360,
|
|
child: Column(
|
|
children: List.generate(5, (index) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 6),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: List.generate(6, (i) {
|
|
return Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 4),
|
|
width: 48,
|
|
height: 16,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Date Skeleton Loader
|
|
static Widget dateSkeletonLoader() {
|
|
return Container(
|
|
height: 14,
|
|
width: 90,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Employee List - Card Style
|
|
static Widget employeeListSkeletonLoader() {
|
|
return Column(
|
|
children: List.generate(4, (index) {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 12,
|
|
paddingAll: 10,
|
|
margin: MySpacing.bottom(12),
|
|
shadow: MyShadow(elevation: 3),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Avatar
|
|
Container(
|
|
width: 41,
|
|
height: 41,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
MySpacing.width(16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
height: 14,
|
|
width: 100,
|
|
color: Colors.grey.shade300),
|
|
MySpacing.width(8),
|
|
Container(
|
|
height: 12, width: 60, color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
MySpacing.height(8),
|
|
Row(
|
|
children: [
|
|
Icon(Icons.email,
|
|
size: 16, color: Colors.grey.shade300),
|
|
MySpacing.width(4),
|
|
Container(
|
|
height: 10,
|
|
width: 140,
|
|
color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
MySpacing.height(8),
|
|
Row(
|
|
children: [
|
|
Icon(Icons.phone,
|
|
size: 16, color: Colors.grey.shade300),
|
|
MySpacing.width(4),
|
|
Container(
|
|
height: 10,
|
|
width: 100,
|
|
color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
|
|
// Employee List - Compact Collapsed Style
|
|
static Widget employeeListCollapsedSkeletonLoader() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
paddingAll: 8,
|
|
child: Column(
|
|
children: List.generate(4, (index) {
|
|
return Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 8),
|
|
child: Row(
|
|
children: [
|
|
// Avatar
|
|
Container(
|
|
width: 31,
|
|
height: 31,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
MySpacing.width(16),
|
|
// Name, Designation & Buttons
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
height: 12,
|
|
width: 100,
|
|
color: Colors.grey.shade300),
|
|
MySpacing.height(8),
|
|
Container(
|
|
height: 10,
|
|
width: 80,
|
|
color: Colors.grey.shade300),
|
|
MySpacing.height(12),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
Container(
|
|
height: 28,
|
|
width: 60,
|
|
color: Colors.grey.shade300),
|
|
MySpacing.width(8),
|
|
Container(
|
|
height: 28,
|
|
width: 60,
|
|
color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (index != 3)
|
|
Divider(
|
|
color: Colors.grey.withOpacity(0.3),
|
|
thickness: 1,
|
|
height: 1,
|
|
),
|
|
],
|
|
);
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Daily Progress Report Header Loader
|
|
static Widget dailyProgressReportSkeletonLoader() {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 4,
|
|
border: Border.all(color: Colors.grey.withOpacity(0.2)),
|
|
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
|
paddingAll: 8,
|
|
child: Column(
|
|
children: List.generate(3, (index) {
|
|
return Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
height: 14, width: 120, color: Colors.grey.shade300),
|
|
Icon(Icons.add_circle, color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
if (index != 2) ...[
|
|
MySpacing.height(12),
|
|
Divider(color: Colors.grey.withOpacity(0.3), thickness: 1),
|
|
MySpacing.height(12),
|
|
],
|
|
],
|
|
);
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Daily Progress Planning (Collapsed View)
|
|
|
|
static Widget dailyProgressPlanningSkeletonCollapsedOnly() {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: List.generate(3, (index) {
|
|
return MyCard.bordered(
|
|
borderRadiusAll: 12,
|
|
paddingAll: 16,
|
|
margin: MySpacing.bottom(12),
|
|
shadow: MyShadow(elevation: 3),
|
|
child: Row(
|
|
children: [
|
|
// Icon placeholder
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
MySpacing.width(12),
|
|
// Text line
|
|
Expanded(
|
|
child: Container(height: 16, color: Colors.grey.shade300),
|
|
),
|
|
MySpacing.width(12),
|
|
// Expand button placeholder
|
|
Container(
|
|
width: 28,
|
|
height: 28,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.grey.shade300,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
|
|
static Widget expenseListSkeletonLoader() {
|
|
return ListView.separated(
|
|
padding: const EdgeInsets.fromLTRB(12, 12, 12, 80),
|
|
itemCount: 6, // Show 6 skeleton items
|
|
separatorBuilder: (_, __) =>
|
|
Divider(color: Colors.grey.shade300, height: 20),
|
|
itemBuilder: (context, index) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Title and Amount
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
height: 14,
|
|
width: 120,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
),
|
|
Container(
|
|
height: 14,
|
|
width: 80,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 6),
|
|
// Date and Status
|
|
Row(
|
|
children: [
|
|
Container(
|
|
height: 12,
|
|
width: 100,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Container(
|
|
height: 12,
|
|
width: 50,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
static Widget employeeSkeletonCard() {
|
|
return MyCard.bordered(
|
|
margin: MySpacing.only(bottom: 12),
|
|
paddingAll: 12,
|
|
borderRadiusAll: 12,
|
|
shadow: MyShadow(
|
|
elevation: 1.5,
|
|
position: MyShadowPosition.bottom,
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Avatar
|
|
Container(
|
|
height: 35,
|
|
width: 35,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
MySpacing.width(12),
|
|
|
|
// Name, org, email, phone
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(height: 12, width: 120, color: Colors.grey.shade300),
|
|
MySpacing.height(6),
|
|
Container(height: 10, width: 80, color: Colors.grey.shade300),
|
|
MySpacing.height(8),
|
|
|
|
// Email placeholder
|
|
Row(
|
|
children: [
|
|
Icon(Icons.email_outlined,
|
|
size: 14, color: Colors.grey.shade300),
|
|
MySpacing.width(4),
|
|
Container(
|
|
height: 10, width: 140, color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
MySpacing.height(8),
|
|
|
|
// Phone placeholder
|
|
Row(
|
|
children: [
|
|
Icon(Icons.phone_outlined,
|
|
size: 14, color: Colors.grey.shade300),
|
|
MySpacing.width(4),
|
|
Container(
|
|
height: 10, width: 100, color: Colors.grey.shade300),
|
|
MySpacing.width(8),
|
|
Container(
|
|
height: 16,
|
|
width: 16,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
MySpacing.height(8),
|
|
|
|
// Tags placeholder
|
|
Container(height: 8, width: 80, color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Arrow
|
|
Icon(Icons.arrow_forward_ios, size: 14, color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
static Widget contactSkeletonCard() {
|
|
return MyCard.bordered(
|
|
margin: MySpacing.only(bottom: 12),
|
|
paddingAll: 16,
|
|
borderRadiusAll: 16,
|
|
shadow: MyShadow(
|
|
elevation: 1.5,
|
|
position: MyShadowPosition.bottom,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
height: 40,
|
|
width: 40,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
MySpacing.width(12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
height: 12,
|
|
width: 100,
|
|
color: Colors.grey.shade300,
|
|
),
|
|
MySpacing.height(6),
|
|
Container(
|
|
height: 10,
|
|
width: 60,
|
|
color: Colors.grey.shade300,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
MySpacing.height(16),
|
|
Container(height: 10, width: 150, color: Colors.grey.shade300),
|
|
MySpacing.height(8),
|
|
Container(height: 10, width: 100, color: Colors.grey.shade300),
|
|
MySpacing.height(8),
|
|
Container(height: 10, width: 120, color: Colors.grey.shade300),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|