renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-10-24 14:07:22 +07:00
parent c4272f9a21
commit fbeaa3c9e8
5 changed files with 387 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.claude/agents/flutter-widget-expert.md
View File

@@ -77,6 +77,8 @@ You are a Flutter widget specialist with deep expertise in:
- Use `ListView.builder` for long lists - Use `ListView.builder` for long lists
- Use 'spacing' properties for layout spacing in Column, Row
## Responsive Design: ## Responsive Design:

390
lib/features/home/presentation/pages/home_page.dart
View File

@@ -39,121 +39,111 @@ class HomePage extends ConsumerWidget {
final promotionsAsync = ref.watch(promotionsProvider); final promotionsAsync = ref.watch(promotionsProvider);
return Scaffold( return Scaffold(
backgroundColor: AppColors.grey50, backgroundColor: const Color(0xFFF4F6F8), // --background-gray from CSS
body: RefreshIndicator( body: CustomScrollView(
onRefresh: () async { slivers: [
// Refresh both member card and promotions // Add top padding for status bar
await Future.wait<void>([ SliverPadding(
ref.read(memberCardProvider.notifier).refresh(), padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
ref.read(promotionsProvider.notifier).refresh(), ),
]);
},
child: CustomScrollView(
slivers: [
// Add top padding for status bar
SliverPadding(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
),
// Member Card Section // Member Card Section
SliverToBoxAdapter( SliverToBoxAdapter(
child: memberCardAsync.when( child: memberCardAsync.when(
data: (memberCard) => MemberCardWidget(memberCard: memberCard), data: (memberCard) => MemberCardWidget(memberCard: memberCard),
loading: () => Container( loading: () => Container(
margin: const EdgeInsets.all(16), margin: const EdgeInsets.all(16),
height: 200, height: 200,
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.grey100, color: AppColors.grey100,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
),
child: const Center(child: CircularProgressIndicator()),
), ),
error: (error, stack) => Container( child: const Center(child: CircularProgressIndicator()),
margin: const EdgeInsets.all(16), ),
padding: const EdgeInsets.all(16), error: (error, stack) => Container(
decoration: BoxDecoration( margin: const EdgeInsets.all(16),
color: AppColors.danger.withValues(alpha: 0.1), padding: const EdgeInsets.all(16),
borderRadius: BorderRadius.circular(16), decoration: BoxDecoration(
), color: AppColors.danger.withValues(alpha: 0.1),
child: Column( borderRadius: BorderRadius.circular(16),
mainAxisSize: MainAxisSize.min, ),
children: [ child: Column(
const Icon( mainAxisSize: MainAxisSize.min,
Icons.error_outline, children: [
const Icon(
Icons.error_outline,
color: AppColors.danger,
size: 48,
),
const SizedBox(height: 8),
Text(
l10n.error,
style: const TextStyle(
color: AppColors.danger, color: AppColors.danger,
size: 48, fontWeight: FontWeight.w600,
), ),
const SizedBox(height: 8), ),
Text( const SizedBox(height: 4),
l10n.error, Text(
style: const TextStyle( error.toString(),
color: AppColors.danger, style: const TextStyle(
fontWeight: FontWeight.w600, color: AppColors.grey500,
), fontSize: 12,
), ),
const SizedBox(height: 4), textAlign: TextAlign.center,
Text( ),
error.toString(), ],
style: const TextStyle(
color: AppColors.grey500,
fontSize: 12,
),
textAlign: TextAlign.center,
),
],
),
), ),
), ),
), ),
),
// Promotions Section // Promotions Section
SliverToBoxAdapter( SliverToBoxAdapter(
child: promotionsAsync.when( child: promotionsAsync.when(
data: (promotions) => promotions.isNotEmpty data: (promotions) => promotions.isNotEmpty
? Padding( ? PromotionSlider(
padding: const EdgeInsets.symmetric(vertical: 8), promotions: promotions,
child: PromotionSlider( onPromotionTap: (promotion) {
promotions: promotions, // TODO: Navigate to promotion details
onPromotionTap: (promotion) { ScaffoldMessenger.of(context).showSnackBar(
// TODO: Navigate to promotion details SnackBar(
ScaffoldMessenger.of(context).showSnackBar( content: Text(
SnackBar( '${l10n.viewDetails}: ${promotion.title}',
content: Text( ),
'${l10n.viewDetails}: ${promotion.title}', ),
), );
), },
); )
}, : const SizedBox.shrink(),
), loading: () => const Padding(
) padding: EdgeInsets.all(16),
: const SizedBox.shrink(), child: Center(child: CircularProgressIndicator()),
loading: () => const Padding(
padding: EdgeInsets.all(16),
child: Center(child: CircularProgressIndicator()),
),
error: (error, stack) => const SizedBox.shrink(),
), ),
error: (error, stack) => const SizedBox.shrink(),
), ),
),
// Quick Action Sections // Quick Action Sections
SliverToBoxAdapter( SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column( child: Column(
children: [ children: [
const SizedBox(height: 8),
// Products & Cart Section // Products & Cart Section
QuickActionSection( QuickActionSection(
title: '${l10n.products} & ${l10n.cart}', title: 'Sản phẩm & Giỏ hàng',
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.grid_view, icon: Icons.grid_view,
label: l10n.products, label: 'Sản phẩm',
onTap: () => context.pushNamed(RouteNames.products), onTap: () => context.pushNamed(RouteNames.products),
), ),
QuickAction( QuickAction(
icon: Icons.shopping_cart, icon: Icons.shopping_cart,
label: l10n.cart, label: 'Giỏ hàng',
badge: '3', badge: '3',
onTap: () => _showComingSoon(context, l10n.cart, l10n), onTap: () => _showComingSoon(context, 'Giỏ hàng', l10n),
), ),
QuickAction( QuickAction(
icon: Icons.favorite, icon: Icons.favorite,
@@ -166,70 +156,55 @@ class HomePage extends ConsumerWidget {
// Loyalty Section // Loyalty Section
QuickActionSection( QuickActionSection(
title: l10n.loyalty, title: 'Khách hàng thân thiết',
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.card_giftcard, icon: Icons.add_circle_outline,
label: l10n.redeemReward, label: 'Ghi nhận điểm',
onTap: () => onTap: () =>
_showComingSoon(context, l10n.redeemReward, l10n), _showComingSoon(context, 'Ghi nhận điểm', l10n),
),
QuickAction(
icon: Icons.card_giftcard,
label: 'Đổi quà',
onTap: () => _showComingSoon(context, 'Đổi quà', l10n),
), ),
QuickAction( QuickAction(
icon: Icons.history, icon: Icons.history,
label: l10n.pointsHistory, label: 'Lịch sử điểm',
onTap: () => onTap: () =>
_showComingSoon(context, l10n.pointsHistory, l10n), _showComingSoon(context, 'Lịch sử điểm', l10n),
),
QuickAction(
icon: Icons.person_add,
label: l10n.referral,
onTap: () =>
_showComingSoon(context, l10n.referral, l10n),
),
],
),
// Quote Requests Section
QuickActionSection(
title: l10n.quotes,
actions: [
QuickAction(
icon: Icons.description,
label: l10n.quotes,
onTap: () =>
_showComingSoon(context, l10n.quotes, l10n),
),
QuickAction(
icon: Icons.receipt_long,
label: l10n.quotes,
onTap: () =>
_showComingSoon(context, l10n.quotes, l10n),
), ),
], ],
), ),
// Orders & Payments Section // Orders & Payments Section
QuickActionSection( QuickActionSection(
title: '${l10n.orders} & ${l10n.payments}', title: 'Đơn hàng & thanh toán',
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.inventory_2, icon: Icons.description,
label: l10n.orders, label: 'Yêu cầu báo giá',
onTap: () => onTap: () =>
_showComingSoon(context, l10n.orders, l10n), _showComingSoon(context, 'Yêu cầu báo giá', l10n),
), ),
QuickAction( QuickAction(
icon: Icons.payment, icon: Icons.inventory_2,
label: l10n.payments, label: 'Đơn hàng',
onTap: () => _showComingSoon(context, 'Đơn hàng', l10n),
),
QuickAction(
icon: Icons.receipt_long,
label: 'Thanh toán',
onTap: () => onTap: () =>
_showComingSoon(context, l10n.payments, l10n), _showComingSoon(context, 'Thanh toán', l10n),
), ),
], ],
), ),
// Sample Houses & News Section // Sample Houses & News Section
QuickActionSection( QuickActionSection(
title: l10n.projects, title: 'Nhà mẫu, dự án & tin tức',
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.home_work, icon: Icons.home_work,
@@ -238,9 +213,9 @@ class HomePage extends ConsumerWidget {
), ),
QuickAction( QuickAction(
icon: Icons.business, icon: Icons.business,
label: l10n.projects, label: 'Đăng ký dự án',
onTap: () => onTap: () =>
_showComingSoon(context, l10n.projects, l10n), _showComingSoon(context, 'Đăng ký dự án', l10n),
), ),
QuickAction( QuickAction(
icon: Icons.article, icon: Icons.article,
@@ -250,62 +225,119 @@ class HomePage extends ConsumerWidget {
], ],
), ),
// Bottom Padding (for FAB clearance) // Bottom Padding (for FAB and bottom nav clearance)
const SizedBox(height: 80), const SizedBox(height: 100),
], ],
), ),
), ),
], ),
],
),
// Floating Action Button (Chat) - positioned like HTML: bottom: 90px
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 20), // 90px - 70px (bottom nav)
child: FloatingActionButton(
onPressed: () => _showComingSoon(context, l10n.chat, l10n),
backgroundColor: AppColors.accentCyan,
elevation: 8,
child: const Icon(Icons.chat_bubble, size: 24, color: Colors.white),
), ),
), ),
// Floating Action Button (Chat)
floatingActionButton: FloatingActionButton(
onPressed: () => _showComingSoon(context, l10n.chat, l10n),
backgroundColor: AppColors.accentCyan,
child: const Icon(Icons.chat_bubble),
),
// Bottom Navigation Bar // Bottom Navigation Bar
bottomNavigationBar: BottomNavigationBar( bottomNavigationBar: Container(
type: BottomNavigationBarType.fixed, decoration: BoxDecoration(
currentIndex: 0, color: Colors.white,
items: [ boxShadow: [
BottomNavigationBarItem( BoxShadow(
icon: const Icon(Icons.home), color: Colors.black.withValues(alpha: 0.05),
label: l10n.home, blurRadius: 10,
), offset: const Offset(0, -2),
BottomNavigationBarItem( ),
icon: const Icon(Icons.loyalty), ],
label: l10n.loyalty, ),
), child: SafeArea(
BottomNavigationBarItem( child: SizedBox(
icon: const Icon(Icons.local_offer), height: 70,
label: l10n.promotions, child: BottomNavigationBar(
), type: BottomNavigationBarType.fixed,
BottomNavigationBarItem( backgroundColor: Colors.white,
icon: const Badge( selectedItemColor: AppColors.primaryBlue,
label: Text('5'), unselectedItemColor: const Color(0xFF666666),
child: Icon(Icons.notifications), selectedFontSize: 11,
unselectedFontSize: 11,
iconSize: 24,
currentIndex: 0,
elevation: 0,
items: [
BottomNavigationBarItem(
icon: const Icon(Icons.home),
label: 'Trang chủ',
),
BottomNavigationBarItem(
icon: const Icon(Icons.loyalty),
label: 'Hội viên',
),
BottomNavigationBarItem(
icon: const Icon(Icons.local_offer),
label: 'Khuyến mãi',
),
BottomNavigationBarItem(
icon: Stack(
clipBehavior: Clip.none,
children: [
const Icon(Icons.notifications),
Positioned(
top: -4,
right: -4,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColors.danger,
borderRadius: BorderRadius.circular(12),
),
constraints: const BoxConstraints(
minWidth: 20,
minHeight: 20,
),
child: const Text(
'5',
style: TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.center,
),
),
),
],
),
label: 'Thông báo',
),
BottomNavigationBarItem(
icon: const Icon(Icons.account_circle),
label: 'Cài đặt',
),
],
onTap: (index) {
// TODO: Implement navigation
final labels = [
'Trang chủ',
'Hội viên',
'Khuyến mãi',
'Thông báo',
'Cài đặt',
];
_showComingSoon(context, labels[index], l10n);
},
), ),
label: l10n.notifications,
), ),
BottomNavigationBarItem( ),
icon: const Icon(Icons.account_circle),
label: l10n.settings,
),
],
onTap: (index) {
// TODO: Implement navigation
final labels = [
l10n.home,
l10n.loyalty,
l10n.promotions,
l10n.notifications,
l10n.settings,
];
_showComingSoon(context, labels[index], l10n);
},
), ),
); );
} }

138
lib/features/home/presentation/widgets/promotion_slider.dart
View File

@@ -14,17 +14,17 @@ import 'package:worker/features/home/domain/entities/promotion.dart';
/// Displays a horizontal scrollable list of promotion cards. /// Displays a horizontal scrollable list of promotion cards.
/// Each card shows an image, title, and brief description. /// Each card shows an image, title, and brief description.
class PromotionSlider extends StatelessWidget { class PromotionSlider extends StatelessWidget {
/// List of promotions to display
final List<Promotion> promotions;
/// Callback when a promotion is tapped
final void Function(Promotion promotion)? onPromotionTap;
const PromotionSlider({ const PromotionSlider({
super.key, super.key,
required this.promotions, required this.promotions,
this.onPromotionTap, this.onPromotionTap,
}); });
/// List of promotions to display
final List<Promotion> promotions;
/// Callback when a promotion is tapped
final void Function(Promotion promotion)? onPromotionTap;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -32,49 +32,54 @@ class PromotionSlider extends StatelessWidget {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
return Column( return Padding(
crossAxisAlignment: CrossAxisAlignment.start, padding: const EdgeInsets.only(bottom: 8),
children: [ child: Column(
const Padding( crossAxisAlignment: CrossAxisAlignment.start,
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), children: [
child: Text( const Padding(
'Chương trình ưu đãi', padding: EdgeInsets.symmetric(horizontal: 16),
style: TextStyle( child: Text(
fontSize: 20, 'Chương trình ưu đãi',
fontWeight: FontWeight.bold, style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Color(0xFF212121), // --text-dark
),
), ),
), ),
), const SizedBox(height: 12),
SizedBox( SizedBox(
height: 230, height: 210, // 140px image + 54px text area
child: ListView.builder( child: ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12), padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: promotions.length, itemCount: promotions.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
return _PromotionCard( return _PromotionCard(
promotion: promotions[index], promotion: promotions[index],
onTap: onPromotionTap != null onTap: onPromotionTap != null
? () => onPromotionTap!(promotions[index]) ? () => onPromotionTap!(promotions[index])
: null, : null,
); );
}, },
),
), ),
), ],
], ),
); );
} }
} }
/// Individual Promotion Card /// Individual Promotion Card
class _PromotionCard extends StatelessWidget { class _PromotionCard extends StatelessWidget {
final Promotion promotion;
final VoidCallback? onTap;
const _PromotionCard({ const _PromotionCard({
required this.promotion, required this.promotion,
this.onTap, this.onTap,
}); });
final Promotion promotion;
final VoidCallback? onTap;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -82,13 +87,13 @@ class _PromotionCard extends StatelessWidget {
onTap: onTap, onTap: onTap,
child: Container( child: Container(
width: 280, width: 280,
margin: const EdgeInsets.symmetric(horizontal: 4), margin: const EdgeInsets.only(right: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.1), color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8, blurRadius: 8,
offset: const Offset(0, 2), offset: const Offset(0, 2),
), ),
@@ -96,6 +101,7 @@ class _PromotionCard extends StatelessWidget {
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Promotion Image // Promotion Image
ClipRRect( ClipRRect(
@@ -104,7 +110,7 @@ class _PromotionCard extends StatelessWidget {
child: CachedNetworkImage( child: CachedNetworkImage(
imageUrl: promotion.imageUrl, imageUrl: promotion.imageUrl,
height: 140, height: 140,
width: double.infinity, width: 280,
fit: BoxFit.cover, fit: BoxFit.cover,
placeholder: (context, url) => Container( placeholder: (context, url) => Container(
height: 140, height: 140,
@@ -126,35 +132,39 @@ class _PromotionCard extends StatelessWidget {
), ),
// Promotion Info // Promotion Info
Expanded( Container(
child: Padding( padding: const EdgeInsets.all(12),
padding: const EdgeInsets.all(12), decoration: const BoxDecoration(
child: Column( color: Colors.white,
crossAxisAlignment: CrossAxisAlignment.start, borderRadius: BorderRadius.vertical(
mainAxisAlignment: MainAxisAlignment.center, bottom: Radius.circular(12),
children: [
Text(
promotion.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
promotion.description,
style: TextStyle(
fontSize: 12,
color: AppColors.grey500,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
), ),
), ),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
promotion.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF212121),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Text(
promotion.description,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF666666), // --text-muted
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
), ),
], ],
), ),

133
lib/features/home/presentation/widgets/quick_action_item.dart
View File

@@ -34,74 +34,85 @@ class QuickActionItem extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return InkWell( return Material(
onTap: onTap, color: Colors.white,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
child: Container( child: InkWell(
padding: const EdgeInsets.all(12), onTap: onTap,
child: Column( borderRadius: BorderRadius.circular(12),
mainAxisSize: MainAxisSize.min, child: Container(
children: [ decoration: BoxDecoration(
// Icon with optional badge color: Colors.white,
Stack( borderRadius: BorderRadius.circular(12),
clipBehavior: Clip.none, boxShadow: [
children: [ BoxShadow(
Container( color: Colors.black.withValues(alpha: 0.05),
padding: const EdgeInsets.all(16), blurRadius: 8,
decoration: BoxDecoration( offset: const Offset(0, 2),
color: AppColors.primaryBlue.withOpacity(0.1), ),
borderRadius: BorderRadius.circular(12), ],
), ),
child: Icon( padding: const EdgeInsets.all(16),
child: Stack(
alignment: Alignment.center, // Center the column within the stack
clipBehavior: Clip.none,
children: [
Column(
mainAxisSize: MainAxisSize.max, // Take all available space
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Icon
Icon(
icon, icon,
size: 20, size: 32,
color: AppColors.primaryBlue, color: AppColors.primaryBlue,
), ),
), const SizedBox(height: 8),
// Badge // Label
if (badge != null && badge!.isNotEmpty) Text(
Positioned( label,
top: -4, style: const TextStyle(
right: -4, fontSize: 16,
child: Container( fontWeight: FontWeight.w500,
padding: const EdgeInsets.symmetric( color: Color(0xFF212121), // --text-dark
horizontal: 6, ),
vertical: 2, textAlign: TextAlign.center,
), maxLines: 1,
decoration: BoxDecoration( overflow: TextOverflow.ellipsis,
color: AppColors.danger, ),
borderRadius: BorderRadius.circular(10), ],
), ),
constraints: const BoxConstraints( // Badge (positioned absolute like HTML)
minWidth: 20, if (badge != null && badge!.isNotEmpty)
minHeight: 20, Positioned(
), top: -4,
child: Text( right: -4,
badge!, child: Container(
style: const TextStyle( padding: const EdgeInsets.symmetric(
color: Colors.white, horizontal: 8,
fontSize: 11, vertical: 4,
fontWeight: FontWeight.bold, ),
), decoration: BoxDecoration(
textAlign: TextAlign.center, color: AppColors.danger,
borderRadius: BorderRadius.circular(12),
),
constraints: const BoxConstraints(
minWidth: 20,
),
child: Text(
badge!,
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.w700,
), ),
textAlign: TextAlign.center,
), ),
), ),
], ),
), ],
const SizedBox(height: 8), ),
// Label
Text(
label,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
), ),
), ),
); );

41
lib/features/home/presentation/widgets/quick_action_section.dart
View File

@@ -41,24 +41,41 @@ class QuickActionSection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.07),
blurRadius: 15,
offset: const Offset(0, 4),
),
],
),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: 16,
children: [ children: [
// Section Title // Section Title
Text( Text(
title, title,
style: const TextStyle( style: const TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w700,
color: Color(0xFF212121), // --text-dark
height: 1.0, // Reduce line height to minimize spacing
), ),
), ),
const SizedBox(height: 12), // Action Grid (always 3 columns to match HTML)
// Action Grid // Using Transform to remove spacing between title and grid
_buildActionGrid(), Transform.translate(
offset: const Offset(0, -4),
child: _buildActionGrid(),
),
], ],
), ),
), ),
@@ -66,17 +83,15 @@ class QuickActionSection extends StatelessWidget {
} }
Widget _buildActionGrid() { Widget _buildActionGrid() {
// Determine grid layout based on number of items
final int crossAxisCount = actions.length <= 2 ? 2 : 3;
return GridView.builder( return GridView.builder(
padding: EdgeInsets.zero, // Remove default GridView padding
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount, crossAxisCount: 3, // Always 3 columns to match HTML
childAspectRatio: 1.0, childAspectRatio: 1.0,
crossAxisSpacing: 4, crossAxisSpacing: 8,
mainAxisSpacing: 4, mainAxisSpacing: 8,
), ),
itemCount: actions.length, itemCount: actions.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {