Okay, I will refine the `HomePage` widget to enhance its professional appearance and user experience. I'll focus on improving visual consistency, spacing, typography, and using theme elements more effectively. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'services/auth_service.dart'; // Ensure other page imports exist if needed, e.g.: // import 'profile_page.dart'; // import 'settings_page.dart'; // import 'track_page.dart'; // import 'services_page.dart'; // import 'inventory_page.dart'; // import 'analytics_page.dart'; // import 'support_page.dart'; // import 'help_page.dart'; class HomePage extends StatefulWidget { const HomePage({super.key}); @override State createState() => _HomePageState(); } class _HomePageState extends State with TickerProviderStateMixin { late AnimationController _controller; late Animation _fadeAnimation; late Animation _slideAnimation; final TextEditingController _trackingController = TextEditingController(); // Define consistent colors (consider moving to a theme file later) static const Color primaryColor = Color(0xFF3949AB); // Indigo static const Color primaryDarkColor = Color(0xFF1A237E); // Deep Indigo static const Color accentColor = Color(0xFFFFFFFF); // White static const Color secondaryTextColor = Colors.white70; static const Color cardBackgroundColor = Colors.white; static const Color iconBackgroundColor = Color(0xFFE8EAF6); // Light Indigo @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 1200), ); _fadeAnimation = Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: _controller, curve: const Interval(0.0, 0.7, curve: Curves.easeOut), ), ); _slideAnimation = Tween( begin: const Offset(0, 0.3), end: Offset.zero, ).animate( CurvedAnimation( parent: _controller, curve: const Interval(0.2, 1.0, curve: Curves.easeOut), ), ); _controller.forward(); } void _handleLogout(BuildContext context) async { final bool confirm = await showDialog( context: context, builder: (context) => AlertDialog( title: const Text('Confirm Logout'), content: const Text('Are you sure you want to log out?'), actions: [ TextButton( onPressed: () => Navigator.of(context).pop(false), child: const Text('Cancel'), ), TextButton( style: TextButton.styleFrom(foregroundColor: Colors.red), onPressed: () => Navigator.of(context).pop(true), child: const Text('Logout'), ), ], ), ) ?? false; if (confirm && mounted) { // Check if mounted before accessing context after await await Provider.of(context, listen: false).signOut(); Navigator.pushNamedAndRemoveUntil( context, '/login', (route) => false); } } void _handleTrackingSearch() { final trackingNumber = _trackingController.text.trim(); if (trackingNumber.isNotEmpty) { // Clear focus FocusScope.of(context).unfocus(); // Navigate Navigator.pushNamed( context, '/track', // Ensure this route exists and handles arguments arguments: {'trackingNumber': trackingNumber}, ); } else { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Please enter a tracking number.'), behavior: SnackBarBehavior.floating, ), ); } } void _navigateTo(String routeName) { // Ensure the route exists in your MaterialApp routes Navigator.pushNamed(context, routeName); } @override Widget build(BuildContext context) { final TextTheme textTheme = Theme.of(context).textTheme; return Scaffold( extendBodyBehindAppBar: true, appBar: AppBar( backgroundColor: Colors.transparent, elevation: 0, title: Text( 'GoNavi Logistics', style: textTheme.titleLarge?.copyWith( fontWeight: FontWeight.bold, color: accentColor, ), ), actions: [ IconButton( icon: const Icon(Icons.notifications_none, color: accentColor), tooltip: 'Notifications', onPressed: () { // TODO: Implement Notifications action }, ), IconButton( icon: const Icon(Icons.logout, color: accentColor), tooltip: 'Logout', onPressed: () => _handleLogout(context), ), ], ), body: AnimatedBuilder( animation: _controller, builder: (context, child) { return Container( decoration: const BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [primaryDarkColor, primaryColor], ), ), child: SafeArea( child: ListView( // Use ListView for better scrolling padding: const EdgeInsets.only(top: kToolbarHeight - 10), // Adjust top padding children: [ _buildHeroSection(textTheme), _buildTrackingInput(textTheme), _buildFeaturesSection(textTheme), _buildQuickAccessSection(textTheme), const SizedBox(height: 20), // Add some bottom padding ], ), ), ); }, ), ); } Widget _buildHeroSection(TextTheme textTheme) { return FadeTransition( opacity: _fadeAnimation, child: Padding( padding: const EdgeInsets.fromLTRB(24, 20, 24, 30), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Smart Logistics Solutions", style: textTheme.displaySmall?.copyWith( color: accentColor, fontWeight: FontWeight.bold, letterSpacing: 0.5, ), ), const SizedBox(height: 12), Text( "Real-time tracking and logistics management at your fingertips.", style: textTheme.titleMedium?.copyWith( color: secondaryTextColor, height: 1.4, ), ), const SizedBox(height: 30), // Consider a more engaging visual if assets/logistics.jpg exists Container( height: 180, decoration: BoxDecoration( // Use image if available, otherwise fallback image: const DecorationImage( image: AssetImage('assets/logistics.jpg'), // Ensure this asset exists in pubspec.yaml fit: BoxFit.cover, // Use cover for better filling opacity: 0.8, ), borderRadius: BorderRadius.circular(16), color: Colors.black.withOpacity(0.2), // Fallback color/overlay ), child: const Center( // Optional: Keep icon as fallback or overlay element // child: Icon( // Icons.local_shipping_outlined, // size: 80, // color: Colors.white.withOpacity(0.5), // ), ), ), ], ), ), ); } Widget _buildTrackingInput(TextTheme textTheme) { return SlideTransition( position: _slideAnimation, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), child: Card( elevation: 6, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), color: cardBackgroundColor, child: Padding( padding: const EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, // Make children stretch children: [ Text( "Track Your Shipment", style: textTheme.titleLarge?.copyWith( fontWeight: FontWeight.bold, color: primaryDarkColor, ), ), const SizedBox(height: 16), TextField( controller: _trackingController, decoration: InputDecoration( filled: true, fillColor: Colors.grey[100], hintText: "Enter tracking number (e.g., GN123456)", prefixIcon: const Icon(Icons.qr_code_scanner, color: primaryColor), border: OutlineInputBorder( borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none, ), contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20), ), keyboardType: TextInputType.text, textInputAction: TextInputAction.search, onSubmitted: (_) => _handleTrackingSearch(), ), const SizedBox(height: 16), ElevatedButton.icon( icon: const Icon(Icons.search, size: 20), label: const Text("TRACK NOW"), onPressed: _handleTrackingSearch, style: ElevatedButton.styleFrom( backgroundColor: primaryColor, foregroundColor: accentColor, padding: const EdgeInsets.symmetric(vertical: 16), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30), ), textStyle: textTheme.labelLarge?.copyWith( fontWeight: FontWeight.bold, letterSpacing: 1.2, ), elevation: 2, ), ), ], ), ), ), ), ); } Widget _buildSectionHeader(String title, TextTheme textTheme) { return Padding( padding: const EdgeInsets.fromLTRB(24, 20, 24, 12), child: Text( title, style: textTheme.headlineSmall?.copyWith( color: accentColor, fontWeight: FontWeight.bold, ), ), ); } Widget _buildFeaturesSection(TextTheme textTheme) { // Define features data final List> features = [ {'icon': Icons.track_changes, 'title': "Shipment Track", 'subtitle': "Real-time updates", 'route': '/track'}, {'icon': Icons.local_shipping_outlined, 'title': "Delivery Services", 'subtitle': "Fast & reliable", 'route': '/services'}, {'icon': Icons.inventory_2_outlined, 'title': "Inventory", 'subtitle': "Manage your stock", 'route': '/inventory'}, {'icon': Icons.analytics_outlined, 'title': "Analytics", 'subtitle': "Business insights", 'route': '/analytics'}, ]; return FadeTransition( opacity: _fadeAnimation, // Reuse fade or create specific one child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildSectionHeader("Our Services", textTheme), GridView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 1.15, // Adjust aspect ratio for better spacing crossAxisSpacing: 12, mainAxisSpacing: 12, ), padding: const EdgeInsets.symmetric(horizontal: 20), itemCount: features.length, itemBuilder: (context, index) { final feature = features[index]; return _buildFeatureCard( feature['icon'], feature['title'], feature['subtitle'], feature['route'], textTheme, ); }, ), ], ), ); } Widget _buildFeatureCard( IconData icon, String title, String subtitle, String route, TextTheme textTheme, ) { return Card( elevation: 4, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), color: cardBackgroundColor, child: InkWell( onTap: () => _navigateTo(route), borderRadius: BorderRadius.circular(16), child: Padding( padding: const EdgeInsets.all(16), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: iconBackgroundColor, shape: BoxShape.circle, // Use circle for icon background ), child: Icon(icon, size: 30, color: primaryColor), ), const SizedBox(height: 12), Text( title, style: textTheme.titleMedium?.copyWith( fontWeight: FontWeight.bold, color: primaryDarkColor, ), textAlign: TextAlign.center, maxLines: 1, overflow: TextOverflow.ellipsis, ), const SizedBox(height: 4), Text( subtitle, style: textTheme.bodySmall?.copyWith(color: Colors.grey[600]), textAlign: TextAlign.center, maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), ), ); } Widget _buildQuickAccessSection(TextTheme textTheme) { // Define quick access buttons data final List> buttons = [ {'text': "My Profile", 'icon': Icons.person_outline, 'route': '/profile'}, {'text': "Support", 'icon': Icons.support_agent_outlined, 'route': '/support'}, {'text': "Settings", 'icon': Icons.settings_outlined, 'route': '/settings'}, {'text': "Help Center", 'icon': Icons.help_outline, 'route': '/help'}, ]; return SlideTransition( position: _slideAnimation, // Reuse slide or create specific one child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildSectionHeader("Quick Access", textTheme), Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: GridView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 2.8, // Adjust for button-like appearance crossAxisSpacing: 12, mainAxisSpacing: 12, ), itemCount: buttons.length, itemBuilder: (context, index) { final button = buttons[index]; return _buildNavButton( button['text'], button['icon'], button['route'], textTheme, ); }, ), ), ], ), ); } Widget _buildNavButton(String text, IconData icon, String route, TextTheme textTheme) { return ElevatedButton.icon( icon: Icon(icon, size: 20), label: Text(text, style: const TextStyle(fontWeight: FontWeight.bold)), onPressed: () => _navigateTo(route), style: ElevatedButton.styleFrom( backgroundColor: accentColor.withOpacity(0.9), // Slightly transparent white foregroundColor: primaryColor, padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 10), // Adjust padding shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), elevation: 2, alignment: Alignment.centerLeft, // Align content left textStyle: textTheme.labelMedium, ), ); } @override void dispose() { _controller.dispose(); _trackingController.dispose(); super.dispose(); } } import 'package:flutter/foundation.dart'; // Mock AuthService - Replace with your actual implementation class AuthService with ChangeNotifier { bool _isAuthenticated = true; // Assume user is logged in initially for demo bool get isAuthenticated => _isAuthenticated; Future signIn(String email, String password) async { // Simulate network request await Future.delayed(const Duration(seconds: 1)); // Replace with actual authentication logic _isAuthenticated = true; notifyListeners(); } Future signOut() async { // Simulate sign out await Future.delayed(const Duration(milliseconds: 500)); _isAuthenticated = false; notifyListeners(); } Future signUp(String email, String password) async { // Simulate network request await Future.delayed(const Duration(seconds: 1)); // Replace with actual sign up logic _isAuthenticated = true; // Auto-login after sign up notifyListeners(); } } name: gonavi_logistics description: "A Flutter project for GoNavi Logistics." publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: '>=3.0.0 <4.0.0' # Adjust based on your Flutter SDK version dependencies: flutter: sdk: flutter provider: ^6.0.0 # Example provider version, use your actual version cupertino_icons: ^1.0.2 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^3.0.0 # Or your preferred linter version flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - assets/logistics.jpg # Make sure you have this image or remove/replace the line # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware # For details regarding adding assets from package dependencies, see # https://flutter.dev/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here, # in this "flutter" section. Each entry in this list should have a # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'services/auth_service.dart'; import 'home_page.dart'; // Import other pages as needed // import 'login_page.dart'; // import 'track_page.dart'; // ... etc. void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (_) => AuthService(), child: MaterialApp( title: 'GoNavi Logistics', theme: ThemeData( primarySwatch: Colors.indigo, // Base theme color primaryColor: const Color(0xFF3949AB), // Indigo scaffoldBackgroundColor: Colors.grey[100], // Light background for contrast cardTheme: CardTheme( elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), ), elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30), // Consistent button shape ), padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 24), ), ), inputDecorationTheme: InputDecorationTheme( border: OutlineInputBorder( borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none, ), filled: true, fillColor: Colors.grey[200], contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20), ), textTheme: const TextTheme( // Define some base text styles if needed displaySmall: TextStyle(fontWeight: FontWeight.bold), headlineSmall: TextStyle(fontWeight: FontWeight.bold), titleLarge: TextStyle(fontWeight: FontWeight.bold), ), visualDensity: VisualDensity.adaptivePlatformDensity, ), // Define initial route and other routes initialRoute: '/', // Or '/login' depending on auth state routes: { '/': (context) => const HomePage(), // Or a wrapper checking auth state '/login': (context) => const Scaffold(body: Center(child: Text("Login Page Placeholder"))), // Replace with actual Login Page '/track': (context) => const Scaffold(body: Center(child: Text("Track Page Placeholder"))), // Replace with actual Track Page '/services': (context) => const Scaffold(body: Center(child: Text("Services Page Placeholder"))), '/inventory': (context) => const Scaffold(body: Center(child: Text("Inventory Page Placeholder"))), '/analytics': (context) => const Scaffold(body: Center(child: Text("Analytics Page Placeholder"))), '/profile': (context) => const Scaffold(body: Center(child: Text("Profile Page Placeholder"))), '/support': (context) => const Scaffold(body: Center(child: Text("Support Page Placeholder"))), '/settings': (context) => const Scaffold(body: Center(child: Text("Settings Page Placeholder"))), '/help': (context) => const Scaffold(body: Center(child: Text("Help Page Placeholder"))), // Add other routes here }, // A simple way to handle initial routing based on auth // home: Consumer( // builder: (context, auth, _) { // return auth.isAuthenticated ? const HomePage() : const LoginPage(); // }, // ), ), ); } } **Key Improvements:** 1. **Theming & Colors**: Defined primary colors and used `Theme.of(context)` for text styles and some widget defaults (`CardTheme`, `ElevatedButtonTheme`, `InputDecorationTheme` in `main.dart`). This promotes consistency. 2. **Layout & Spacing**: Adjusted padding, margins, and used `ListView` instead of `SingleChildScrollView` + `Column` for the main body for potentially better performance with many items. Used `SizedBox` for consistent spacing. 3. **Widget Refinement**: * **Hero Section**: Improved text styles and added a `fit: BoxFit.cover` to the image for better appearance. Added a subtle background color as a fallback or overlay. * **Tracking Input**: Made the card and button styles more consistent with the theme. Added `textInputAction` and `onSubmitted` to the `TextField` for better UX. Added `FocusScope.of(context).unfocus()` on search. * **Features Section**: Refactored to use `GridView.builder` and a data list. Improved card appearance with circular icon backgrounds and adjusted aspect ratio. Added a reusable `_buildSectionHeader`. * **Quick Access Section**: Refactored similarly using `GridView.builder`. Styled buttons for better clarity and touch targets, aligning text/icon left. 4. **Code Structure**: Broke down build methods slightly more, added constants for colors, and included placeholder files/routes in `main.dart` for clarity. Added comments. 5. **Animations**: Kept the core animation logic but applied `FadeTransition` and `SlideTransition` more selectively for a cleaner entrance effect. 6. **Asset Handling**: Ensured the `assets/logistics.jpg` is referenced correctly and included in `pubspec.yaml`. 7. **Logout Dialog**: Made the "Logout" button red for emphasis. Added `mounted` check before using `context` after `await`. 8. **Navigation**: Created a helper `_navigateTo` function. Remember to: * Create the actual pages for the routes defined in `main.dart` (e.g., `/track`, `/profile`, `/settings`, etc.). * Ensure the `assets/logistics.jpg` file exists in an `assets` folder at the root of your project and is declared in `pubspec.yaml`. * Replace the mock `AuthService` with your actual authentication implementation. * Implement proper initial routing based on authentication status in `main.dart`.