This commit is contained in:
Phuoc Nguyen
2025-10-17 18:06:32 +07:00
parent 57bf73e4d1
commit e321e9a419
6 changed files with 445 additions and 231 deletions

View File

@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:worker/core/router/app_router.dart';
import 'package:worker/core/theme/app_theme.dart'; import 'package:worker/core/theme/app_theme.dart';
import 'package:worker/features/home/presentation/pages/home_page.dart';
import 'package:worker/generated/l10n/app_localizations.dart'; import 'package:worker/generated/l10n/app_localizations.dart';
/// Root application widget for Worker Mobile App /// Root application widget for Worker Mobile App
@@ -19,11 +19,15 @@ class WorkerApp extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return MaterialApp( return MaterialApp.router(
// ==================== App Configuration ==================== // ==================== App Configuration ====================
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
title: 'Worker App', title: 'Worker App',
// ==================== Router Configuration ====================
// Using go_router for declarative routing with deep linking support
routerConfig: AppRouter.router,
// ==================== Theme Configuration ==================== // ==================== Theme Configuration ====================
// Material 3 theme with brand colors (Primary Blue: #005B9A) // Material 3 theme with brand colors (Primary Blue: #005B9A)
theme: AppTheme.lightTheme(), theme: AppTheme.lightTheme(),
@@ -64,21 +68,6 @@ class WorkerApp extends ConsumerWidget {
return const Locale('vi', 'VN'); return const Locale('vi', 'VN');
}, },
// ==================== Navigation Configuration ====================
// TODO: Replace with actual router configuration when navigation is implemented
// Options:
// 1. Use go_router for declarative routing
// 2. Use Navigator 2.0 for imperative routing
// 3. Use auto_route for type-safe routing
//
// For now, we show the home screen directly
home: const HomePage(),
// Alternative: Use onGenerateRoute for custom routing
// onGenerateRoute: (settings) {
// return AppRouter.onGenerateRoute(settings);
// },
// ==================== Material App Configuration ==================== // ==================== Material App Configuration ====================
// Builder for additional context-dependent widgets // Builder for additional context-dependent widgets
builder: (context, child) { builder: (context, child) {

View File

@@ -0,0 +1,205 @@
/// App Router Configuration
///
/// Centralized routing configuration using go_router.
/// Defines all routes, navigation guards, and deep linking.
library;
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:worker/features/home/presentation/pages/home_page.dart';
/// App Router
///
/// Handles navigation throughout the app using declarative routing.
/// Features:
/// - Named routes for type-safe navigation
/// - Authentication guards (TODO: implement when auth is ready)
/// - Deep linking support
/// - Transition animations
class AppRouter {
/// Router configuration
static final GoRouter router = GoRouter(
// Initial route
initialLocation: RouteNames.home,
// Route definitions
routes: [
// Home Route
GoRoute(
path: RouteNames.home,
name: RouteNames.home,
pageBuilder: (context, state) => MaterialPage(
key: state.pageKey,
child: const HomePage(),
),
),
// TODO: Add more routes as features are implemented
// Example:
// GoRoute(
// path: RouteNames.products,
// name: RouteNames.products,
// pageBuilder: (context, state) => MaterialPage(
// key: state.pageKey,
// child: const ProductsPage(),
// ),
// ),
],
// Error page for unknown routes
errorPageBuilder: (context, state) => MaterialPage(
key: state.pageKey,
child: Scaffold(
appBar: AppBar(
title: const Text('Không tìm thấy trang'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.error_outline,
size: 64,
color: Colors.red,
),
const SizedBox(height: 16),
const Text(
'Trang không tồn tại',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
state.uri.toString(),
style: const TextStyle(color: Colors.grey),
),
const SizedBox(height: 24),
ElevatedButton.icon(
onPressed: () => context.go(RouteNames.home),
icon: const Icon(Icons.home),
label: const Text('Về trang chủ'),
),
],
),
),
),
),
// Redirect logic for authentication (TODO: implement when auth is ready)
// redirect: (context, state) {
// final isLoggedIn = false; // TODO: Get from auth provider
// final isOnLoginPage = state.matchedLocation == RouteNames.login;
//
// if (!isLoggedIn && !isOnLoginPage) {
// return RouteNames.login;
// }
//
// if (isLoggedIn && isOnLoginPage) {
// return RouteNames.home;
// }
//
// return null;
// },
// Debug logging (disable in production)
debugLogDiagnostics: true,
);
}
/// Route Names
///
/// Centralized route name constants for type-safe navigation.
/// Use these constants instead of hardcoded strings.
///
/// Example:
/// ```dart
/// context.go(RouteNames.home);
/// context.push(RouteNames.products);
/// ```
class RouteNames {
// Private constructor to prevent instantiation
RouteNames._();
// Main Routes
static const String home = '/';
static const String products = '/products';
static const String productDetail = '/products/:id';
static const String cart = '/cart';
static const String checkout = '/checkout';
static const String orderSuccess = '/order-success';
// Loyalty Routes
static const String loyalty = '/loyalty';
static const String rewards = '/loyalty/rewards';
static const String pointsHistory = '/loyalty/points-history';
static const String myGifts = '/loyalty/gifts';
static const String referral = '/loyalty/referral';
// Orders & Payments Routes
static const String orders = '/orders';
static const String orderDetail = '/orders/:id';
static const String payments = '/payments';
// Projects & Quotes Routes
static const String projects = '/projects';
static const String projectDetail = '/projects/:id';
static const String projectCreate = '/projects/create';
static const String quotes = '/quotes';
static const String quoteDetail = '/quotes/:id';
static const String quoteCreate = '/quotes/create';
// Account Routes
static const String account = '/account';
static const String profile = '/account/profile';
static const String addresses = '/account/addresses';
static const String addressForm = '/account/addresses/form';
static const String changePassword = '/account/change-password';
static const String settings = '/account/settings';
// Promotions & Notifications Routes
static const String promotions = '/promotions';
static const String promotionDetail = '/promotions/:id';
static const String notifications = '/notifications';
// Chat Route
static const String chat = '/chat';
// Authentication Routes (TODO: implement when auth feature is ready)
static const String login = '/login';
static const String otpVerification = '/otp-verification';
static const String register = '/register';
}
/// Route Extensions
///
/// Helper extensions for common navigation patterns.
extension GoRouterExtension on BuildContext {
/// Navigate to home page
void goHome() => go(RouteNames.home);
/// Navigate to products page
void goProducts() => go(RouteNames.products);
/// Navigate to cart page
void goCart() => go(RouteNames.cart);
/// Navigate to loyalty page
void goLoyalty() => go(RouteNames.loyalty);
/// Navigate to orders page
void goOrders() => go(RouteNames.orders);
/// Navigate to projects page
void goProjects() => go(RouteNames.projects);
/// Navigate to account page
void goAccount() => go(RouteNames.account);
/// Navigate to promotions page
void goPromotions() => go(RouteNames.promotions);
/// Navigate to notifications page
void goNotifications() => go(RouteNames.notifications);
/// Navigate to chat page
void goChat() => go(RouteNames.chat);
}

View File

@@ -12,6 +12,7 @@ import 'package:worker/features/home/presentation/providers/promotions_provider.
import 'package:worker/features/home/presentation/widgets/member_card_widget.dart'; import 'package:worker/features/home/presentation/widgets/member_card_widget.dart';
import 'package:worker/features/home/presentation/widgets/promotion_slider.dart'; import 'package:worker/features/home/presentation/widgets/promotion_slider.dart';
import 'package:worker/features/home/presentation/widgets/quick_action_section.dart'; import 'package:worker/features/home/presentation/widgets/quick_action_section.dart';
import 'package:worker/generated/l10n/app_localizations.dart';
/// Home Page /// Home Page
/// ///
@@ -27,6 +28,8 @@ class HomePage extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final l10n = AppLocalizations.of(context);
// Watch member card state // Watch member card state
final memberCardAsync = ref.watch(memberCardProvider); final memberCardAsync = ref.watch(memberCardProvider);
@@ -34,224 +37,230 @@ class HomePage extends ConsumerWidget {
final promotionsAsync = ref.watch(promotionsProvider); final promotionsAsync = ref.watch(promotionsProvider);
return Scaffold( return Scaffold(
extendBodyBehindAppBar: true, // allow body to render behind status bar
backgroundColor: AppColors.grey50, backgroundColor: AppColors.grey50,
body: RefreshIndicator( body: MediaQuery.removePadding(
onRefresh: () async { context: context,
// Refresh both member card and promotions removeTop: true,
await Future.wait<void>([ child: RefreshIndicator(
ref.read(memberCardProvider.notifier).refresh(), onRefresh: () async {
ref.read(promotionsProvider.notifier).refresh(), // Refresh both member card and promotions
]); await Future.wait<void>([
}, ref.read(memberCardProvider.notifier).refresh(),
child: CustomScrollView( ref.read(promotionsProvider.notifier).refresh(),
slivers: [ ]);
// App Bar },
const SliverAppBar( child: CustomScrollView(
floating: true, slivers: [
snap: true, // App Bar
backgroundColor: AppColors.primaryBlue, // SliverAppBar(
title: Text('Trang ch<63>'), // floating: true,
centerTitle: true, // snap: true,
), // backgroundColor: AppColors.primaryBlue,
// title: Text(l10n.home),
// centerTitle: true,
// ),
// 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(),
),
), ),
child: const Center( error: (error, stack) => Container(
child: CircularProgressIndicator(), margin: const EdgeInsets.all(16),
), padding: const EdgeInsets.all(16),
), decoration: BoxDecoration(
error: (error, stack) => Container( color: AppColors.danger.withValues(alpha: 0.1),
margin: const EdgeInsets.all(16), borderRadius: BorderRadius.circular(16),
padding: const EdgeInsets.all(16), ),
decoration: BoxDecoration( child: Column(
color: AppColors.danger.withOpacity(0.1), mainAxisSize: MainAxisSize.min,
borderRadius: BorderRadius.circular(16), children: [
), const Icon(
child: Column( Icons.error_outline,
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.error_outline,
color: AppColors.danger,
size: 48,
),
const SizedBox(height: 8),
Text(
'Kh<EFBFBD>ng th<74> t<>i th<74> th<74>nh vi<76>n',
style: TextStyle(
color: AppColors.danger, color: AppColors.danger,
fontWeight: FontWeight.w600, size: 48,
), ),
), const SizedBox(height: 8),
const SizedBox(height: 4), Text(
Text( l10n.error,
error.toString(), style: const TextStyle(
style: TextStyle( color: AppColors.danger,
color: AppColors.grey500, fontWeight: FontWeight.w600,
fontSize: 12, ),
), ),
textAlign: TextAlign.center, const SizedBox(height: 4),
), 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( ? Padding(
padding: const EdgeInsets.symmetric(vertical: 8), padding: const EdgeInsets.symmetric(vertical: 8),
child: PromotionSlider( child: PromotionSlider(
promotions: promotions, promotions: promotions,
onPromotionTap: (promotion) { onPromotionTap: (promotion) {
// TODO: Navigate to promotion details // TODO: Navigate to promotion details
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
content: Text('Xem chi ti<74>t: ${promotion.title}'), content: Text('${l10n.viewDetails}: ${promotion.title}'),
), ),
); );
}, },
), ),
) )
: const SizedBox.shrink(), : const SizedBox.shrink(),
loading: () => const Padding( loading: () => const Padding(
padding: EdgeInsets.all(16), padding: EdgeInsets.all(16),
child: Center(child: CircularProgressIndicator()), 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: Column( child: Column(
children: [ children: [
const SizedBox(height: 8), const SizedBox(height: 8),
// Products & Cart Section // Products & Cart Section
QuickActionSection( QuickActionSection(
title: 'S<EFBFBD>n ph<70>m & Gi<47> h<>ng', title: '${l10n.products} & ${l10n.cart}',
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.grid_view, icon: Icons.grid_view,
label: 'S<EFBFBD>n ph<70>m', label: l10n.products,
onTap: () => _showComingSoon(context, 'S<EFBFBD>n ph<70>m'), onTap: () => _showComingSoon(context, l10n.products, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.shopping_cart, icon: Icons.shopping_cart,
label: 'Gi<EFBFBD> h<>ng', label: l10n.cart,
badge: '3', badge: '3',
onTap: () => _showComingSoon(context, 'Gi<EFBFBD> h<>ng'), onTap: () => _showComingSoon(context, l10n.cart, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.favorite, icon: Icons.favorite,
label: 'Y<EFBFBD>u th<EFBFBD>ch', label: 'Yêu thích',
onTap: () => _showComingSoon(context, 'Y<EFBFBD>u th<EFBFBD>ch'), onTap: () => _showComingSoon(context, 'Yêu thích', l10n),
), ),
], ],
), ),
// Loyalty Section // Loyalty Section
QuickActionSection( QuickActionSection(
title: 'Kh<EFBFBD>ch h<>ng th<74>n thi<68>t', title: l10n.loyalty,
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.card_giftcard, icon: Icons.card_giftcard,
label: '<10>i qu<71>', label: l10n.redeemReward,
onTap: () => _showComingSoon(context, '<10>i qu<71>'), onTap: () => _showComingSoon(context, l10n.redeemReward, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.history, icon: Icons.history,
label: 'L<EFBFBD>ch s<> i<>m', label: l10n.pointsHistory,
onTap: () => _showComingSoon(context, 'L<EFBFBD>ch s<> i<>m'), onTap: () => _showComingSoon(context, l10n.pointsHistory, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.person_add, icon: Icons.person_add,
label: 'Gi<EFBFBD>i thi<68>u b<>n', label: l10n.referral,
onTap: () => _showComingSoon(context, 'Gi<EFBFBD>i thi<68>u b<>n'), onTap: () => _showComingSoon(context, l10n.referral, l10n),
), ),
], ],
), ),
// Quote Requests Section // Quote Requests Section
QuickActionSection( QuickActionSection(
title: 'Y<EFBFBD>u c<>u b<>o gi<67> & b<>o gi<67>', title: l10n.quotes,
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.description, icon: Icons.description,
label: 'Y<EFBFBD>u c<>u b<>o gi<67>', label: l10n.quotes,
onTap: () => _showComingSoon(context, 'Y<EFBFBD>u c<>u b<>o gi<67>'), onTap: () => _showComingSoon(context, l10n.quotes, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.receipt_long, icon: Icons.receipt_long,
label: 'B<EFBFBD>o gi<67>', label: l10n.quotes,
onTap: () => _showComingSoon(context, 'B<EFBFBD>o gi<67>'), onTap: () => _showComingSoon(context, l10n.quotes, l10n),
), ),
], ],
), ),
// Orders & Payments Section // Orders & Payments Section
QuickActionSection( QuickActionSection(
title: '<10>n h<>ng & thanh to<74>n', title: '${l10n.orders} & ${l10n.payments}',
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.inventory_2, icon: Icons.inventory_2,
label: '<10>n h<>ng', label: l10n.orders,
onTap: () => _showComingSoon(context, '<10>n h<>ng'), onTap: () => _showComingSoon(context, l10n.orders, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.payment, icon: Icons.payment,
label: 'Thanh to<74>n', label: l10n.payments,
onTap: () => _showComingSoon(context, 'Thanh to<74>n'), onTap: () => _showComingSoon(context, l10n.payments, l10n),
), ),
], ],
), ),
// Sample Houses & News Section // Sample Houses & News Section
QuickActionSection( QuickActionSection(
title: 'Nh<EFBFBD> m<>u, d<> <20>n & tin t<>c', title: l10n.projects,
actions: [ actions: [
QuickAction( QuickAction(
icon: Icons.home_work, icon: Icons.home_work,
label: 'Nh<EFBFBD> m<EFBFBD>u', label: 'Nhà mu',
onTap: () => _showComingSoon(context, 'Nh<EFBFBD> m<EFBFBD>u'), onTap: () => _showComingSoon(context, 'Nhà mu', l10n),
), ),
QuickAction( QuickAction(
icon: Icons.business, icon: Icons.business,
label: 'ng k<> d<> <20>n', label: l10n.projects,
onTap: () => _showComingSoon(context, 'ng k<> d<> <20>n'), onTap: () => _showComingSoon(context, l10n.projects, l10n),
), ),
QuickAction( QuickAction(
icon: Icons.article, icon: Icons.article,
label: 'Tin t<EFBFBD>c', label: 'Tin tc',
onTap: () => _showComingSoon(context, 'Tin t<EFBFBD>c'), onTap: () => _showComingSoon(context, 'Tin tc', l10n),
), ),
], ],
), ),
// Bottom Padding (for FAB clearance) // Bottom Padding (for FAB clearance)
const SizedBox(height: 80), const SizedBox(height: 80),
], ],
),
), ),
), ],
], ),
), ),
), ),
// Floating Action Button (Chat) // Floating Action Button (Chat)
floatingActionButton: FloatingActionButton( floatingActionButton: FloatingActionButton(
onPressed: () => _showComingSoon(context, 'Chat'), onPressed: () => _showComingSoon(context, l10n.chat, l10n),
backgroundColor: AppColors.accentCyan, backgroundColor: AppColors.accentCyan,
child: const Icon(Icons.chat_bubble), child: const Icon(Icons.chat_bubble),
), ),
@@ -260,51 +269,51 @@ class HomePage extends ConsumerWidget {
bottomNavigationBar: BottomNavigationBar( bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed, type: BottomNavigationBarType.fixed,
currentIndex: 0, currentIndex: 0,
items: const [ items: [
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(Icons.home), icon: const Icon(Icons.home),
label: 'Trang ch<63>', label: l10n.home,
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(Icons.loyalty), icon: const Icon(Icons.loyalty),
label: 'H<EFBFBD>i vi<76>n', label: l10n.loyalty,
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(Icons.local_offer), icon: const Icon(Icons.local_offer),
label: 'Khuy<EFBFBD>n m<>i', label: l10n.promotions,
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Badge( icon: const Badge(
label: Text('5'), label: Text('5'),
child: Icon(Icons.notifications), child: Icon(Icons.notifications),
), ),
label: 'Th<EFBFBD>ng b<>o', label: l10n.notifications,
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(Icons.account_circle), icon: const Icon(Icons.account_circle),
label: 'C<EFBFBD>i <11>t', label: l10n.settings,
), ),
], ],
onTap: (index) { onTap: (index) {
// TODO: Implement navigation // TODO: Implement navigation
final labels = [ final labels = [
'Trang ch<63>', l10n.home,
'H<EFBFBD>i vi<76>n', l10n.loyalty,
'Khuy<EFBFBD>n m<>i', l10n.promotions,
'Th<EFBFBD>ng b<>o', l10n.notifications,
'C<EFBFBD>i <11>t' l10n.settings,
]; ];
_showComingSoon(context, labels[index]); _showComingSoon(context, labels[index], l10n);
}, },
), ),
); );
} }
/// Show coming soon message /// Show coming soon message
void _showComingSoon(BuildContext context, String feature) { void _showComingSoon(BuildContext context, String feature, AppLocalizations l10n) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
content: Text('$feature - S<EFBFBD>p ra m<>t'), content: Text('$feature - ${l10n.comingSoon}'),
duration: const Duration(seconds: 1), duration: const Duration(seconds: 1),
), ),
); );

View File

@@ -46,7 +46,7 @@ class PromotionSlider extends StatelessWidget {
), ),
), ),
SizedBox( SizedBox(
height: 200, height: 230,
child: ListView.builder( child: ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12), padding: const EdgeInsets.symmetric(horizontal: 12),

View File

@@ -511,6 +511,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.1.3" version: "2.1.3"
go_router:
dependency: "direct main"
description:
name: go_router
sha256: f02fd7d2a4dc512fec615529824fdd217fecb3a3d3de68360293a551f21634b3
url: "https://pub.dev"
source: hosted
version: "14.8.1"
graphs: graphs:
dependency: transitive dependency: transitive
description: description:

View File

@@ -66,6 +66,9 @@ dependencies:
path_provider: ^2.1.3 path_provider: ^2.1.3
shared_preferences: ^2.2.3 shared_preferences: ^2.2.3
# Navigation
go_router: ^14.6.2
# Icons # Icons
cupertino_icons: ^1.0.8 cupertino_icons: ^1.0.8