Okay, I will enhance the `ServicesPage` to make it more professional by refining the UI, improving animations, adding search functionality, and structuring the code better. First, let's organize the code by moving the `LogisticsService` class into its own file. import 'package:flutter/material.dart'; // Data model for a logistics service class LogisticsService { final int id; final String title; final String description; final IconData icon; final String image; final String priceRange; final String? deliveryTime; final List features; LogisticsService({ required this.id, required this.title, required this.description, required this.icon, required this.image, required this.priceRange, this.deliveryTime, required this.features, }); } import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; // Assuming cloud_firestore is used elsewhere, keep import if needed // import 'package:cloud_firestore/cloud_firestore.dart'; import '../widgets/service_request_form.dart'; // Assuming this path is correct import '../models/logistics_service.dart'; class ServicesPage extends StatefulWidget { const ServicesPage({super.key}); @override _ServicesPageState createState() => _ServicesPageState(); } class _ServicesPageState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _fadeAnimation; late Animation _slideAnimation; late Animation _bgAnimation; final TextEditingController _searchController = TextEditingController(); String _searchQuery = ''; // Original list of all services final List _allServices = [ LogisticsService( id: 1, title: "الشحن الدولي", description: "خدمات شحن دولية سريعة وآمنة مع تتبع مباشر.", icon: Icons.language, image: 'assets/shipping.jpg', // Ensure this asset exists priceRange: "300-5000 جنيه", deliveryTime: "3-7 أيام عمل", features: ["تأمين على البضاعة", "تخليص جمركي", "تتبع مباشر"], ), LogisticsService( id: 2, title: "التخزين الذكي", description: "منشآت تخزين مجهزة بأحدث أنظمة المراقبة والأمان.", icon: Icons.warehouse, image: 'assets/warehouse.jpg', // Ensure this asset exists priceRange: "50-200 جنيه/يوم", features: ["مراقبة 24/7", "تحكم بالمناخ", "إدارة المخزون"], ), LogisticsService( id: 3, title: "الخدمات الجمركية", description: "تخليص جمركي سريع وفعال مع خبراء معتمدين.", icon: Icons.assignment_turned_in, image: 'assets/customs.jpg', // Ensure this asset exists priceRange: "يعتمد على القيمة", features: ["إعداد الوثائق", "استشارات جمركية", "متتبع إلكتروني"], ), // Add more services as needed ]; // List to display (filtered or all) List _filteredServices = []; @override void initState() { super.initState(); _filteredServices = List.from(_allServices); // Initialize with all services _controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 1200), // Slightly longer duration ); _fadeAnimation = Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: _controller, curve: const Interval(0.0, 0.6, curve: Curves.easeOut), ), ); _slideAnimation = Tween(begin: const Offset(0, 0.2), end: Offset.zero) .animate( CurvedAnimation( parent: _controller, curve: const Interval(0.2, 1.0, curve: Curves.easeOut), ), ); _bgAnimation = ColorTween( begin: Colors.blue[900]?.withOpacity(0.8), // Start slightly transparent end: Colors.blue[800], // End slightly lighter ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut)); _searchController.addListener(() { _filterServices(_searchController.text); }); _controller.forward(); } void _filterServices(String query) { final lowerCaseQuery = query.toLowerCase(); setState(() { _searchQuery = query; _filteredServices = _allServices.where((service) { final titleMatch = service.title.toLowerCase().contains(lowerCaseQuery); final descriptionMatch = service.description.toLowerCase().contains(lowerCaseQuery); return titleMatch || descriptionMatch; }).toList(); }); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _bgAnimation, builder: (context, child) { return Scaffold( backgroundColor: _bgAnimation.value ?? Colors.blue[800], appBar: AppBar( title: const Text('خدماتنا اللوجستية'), backgroundColor: Colors.transparent, // Make AppBar transparent elevation: 0, // Remove shadow flexibleSpace: Container( // Add gradient background decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue[900]!, Colors.blue[700]!], begin: Alignment.topLeft, end: Alignment.bottomRight, ), ), ), actions: [ IconButton( icon: const Icon(Icons.search), onPressed: () => _showSearchDialog(context), tooltip: 'بحث عن خدمة', ), ], ), body: CustomScrollView( // Use CustomScrollView for more flexibility slivers: [ SliverPadding( padding: const EdgeInsets.all(20.0), sliver: SliverList( delegate: SliverChildListDelegate( [ FadeTransition( opacity: _fadeAnimation, child: SlideTransition( position: _slideAnimation, child: const Text( 'حلول لوجستية متكاملة لاحتياجاتك', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 26, // Slightly smaller fontWeight: FontWeight.bold, shadows: [ Shadow( blurRadius: 8.0, color: Colors.black26, offset: Offset(2.0, 2.0), ), ], ), ), ), ), const SizedBox(height: 25), if (_searchQuery.isNotEmpty) Padding( padding: const EdgeInsets.only(bottom: 15.0), child: Text( 'نتائج البحث عن: "$_searchQuery"', style: TextStyle(color: Colors.white70, fontSize: 16), ), ), if (_filteredServices.isEmpty && _searchQuery.isNotEmpty) Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 40.0), child: Text( 'لم يتم العثور على خدمات تطابق بحثك.', style: TextStyle(color: Colors.white.withOpacity(0.8), fontSize: 18), textAlign: TextAlign.center, ), ), ), ], ), ), ), SliverPadding( // Add padding around the list of cards padding: const EdgeInsets.symmetric(horizontal: 15.0), sliver: SliverList( delegate: SliverChildBuilderDelegate( (context, index) { final service = _filteredServices[index]; // Apply staggered animation based on index final itemSlideAnimation = Tween( begin: const Offset(0.5, 0), // Start from the right end: Offset.zero, ).animate( CurvedAnimation( parent: _controller, curve: Interval( 0.4 + (index * 0.1).clamp(0.0, 0.6), // Staggered start 1.0, curve: Curves.easeOutCubic, ), ), ); final itemFadeAnimation = Tween( begin: 0.0, end: 1.0, ).animate( CurvedAnimation( parent: _controller, curve: Interval( 0.4 + (index * 0.1).clamp(0.0, 0.6), // Staggered start 1.0, curve: Curves.easeOut, ), ), ); return FadeTransition( opacity: itemFadeAnimation, child: SlideTransition( position: itemSlideAnimation, child: _buildServiceCard(service), ), ); }, childCount: _filteredServices.length, ), ), ), const SliverToBoxAdapter(child: SizedBox(height: 30)), // Add space at the bottom ], ), ); }, ); } Widget _buildServiceCard(LogisticsService service) { return Card( elevation: 6, margin: const EdgeInsets.only(bottom: 20), // Add space between cards shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)), clipBehavior: Clip.antiAlias, // Clip the inkwell ripple child: InkWell( onTap: () => _showServiceDetails(context, service), splashColor: Colors.blueAccent.withOpacity(0.3), highlightColor: Colors.blueAccent.withOpacity(0.1), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Hero( // Add Hero animation for the image tag: 'service_image_${service.id}', child: Image.asset( service.image, width: double.infinity, // Make image take full width height: 160, // Fixed height for consistency fit: BoxFit.cover, ), ), Padding( padding: const EdgeInsets.all(15.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Icon(service.icon, color: Colors.blue[700], size: 24), const SizedBox(width: 10), Expanded( child: Text( service.title, style: TextStyle( color: Colors.grey[800], fontSize: 20, fontWeight: FontWeight.bold, ), ), ), ], ), const SizedBox(height: 10), Text( service.description, style: TextStyle( color: Colors.grey[600], fontSize: 14, height: 1.4, // Improve line spacing ), ), const SizedBox(height: 12), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ _buildInfoChip(Icons.attach_money, service.priceRange), if (service.deliveryTime != null) _buildInfoChip(Icons.schedule, service.deliveryTime!), ], ), ], ), ), ], ), ), ); } Widget _buildInfoChip(IconData icon, String text) { return Chip( avatar: Icon(icon, size: 16, color: Colors.blue[800]), label: Text( text, style: TextStyle(fontSize: 12, color: Colors.blue[900]), ), backgroundColor: Colors.blue[50]?.withOpacity(0.8), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), ); } void _showServiceDetails(BuildContext context, LogisticsService service) { showModalBottomSheet( context: context, isScrollControlled: true, // Allow sheet to take more height backgroundColor: Colors.transparent, builder: (context) => DraggableScrollableSheet( // Make it draggable initialChildSize: 0.6, // Start at 60% height minChildSize: 0.4, // Min height maxChildSize: 0.9, // Max height builder: (_, controller) => Container( decoration: BoxDecoration( gradient: LinearGradient( // Use gradient for sheet background colors: [Colors.grey[50]!, Colors.grey[200]!], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), borderRadius: const BorderRadius.vertical(top: Radius.circular(25)), ), child: Column( children: [ // Drag Handle Padding( padding: const EdgeInsets.symmetric(vertical: 10.0), child: Center( child: Container( width: 50, height: 5, decoration: BoxDecoration( color: Colors.grey[400], borderRadius: BorderRadius.circular(10), ), ), ), ), Expanded( child: ListView( // Use ListView for scrolling content controller: controller, // Link controller padding: const EdgeInsets.symmetric(horizontal: 20.0), children: [ const SizedBox(height: 10), Hero( // Match Hero tag tag: 'service_image_${service.id}', child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Image.asset( service.image, width: double.infinity, height: 200, fit: BoxFit.cover, ), ), ), const SizedBox(height: 25), Text( service.title, textAlign: TextAlign.center, style: TextStyle( color: Colors.blue[900], fontSize: 26, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 15), Text( service.description, textAlign: TextAlign.center, style: TextStyle( color: Colors.grey[700], fontSize: 16, height: 1.5, ), ), const SizedBox(height: 25), _buildDetailRow( Icons.schedule, 'الوقت المتوقع للتسليم:', service.deliveryTime ?? 'يحدد لاحقاً', ), _buildDetailRow( Icons.attach_money, 'نطاق السعر:', service.priceRange, ), const SizedBox(height: 20), Text( 'الميزات الرئيسية:', style: TextStyle( color: Colors.blue[800], fontSize: 18, fontWeight: FontWeight.w600, ), ), const SizedBox(height: 10), ...service.features.map((feature) => Padding( padding: const EdgeInsets.only(bottom: 8.0, right: 10), child: Row( children: [ Icon(Icons.check_circle_outline, color: Colors.green[600], size: 18), const SizedBox(width: 8), Expanded( child: Text( feature, style: TextStyle(color: Colors.grey[800], fontSize: 15), ), ), ], ), )), const SizedBox(height: 30), ElevatedButton.icon( icon: const Icon(Icons.assignment, color: Colors.white), label: const Text( 'طلب الخدمة الآن', style: TextStyle(fontSize: 16, color: Colors.white), ), style: ElevatedButton.styleFrom( backgroundColor: Colors.amber[700], padding: const EdgeInsets.symmetric(vertical: 15), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), elevation: 4, ), onPressed: () { Navigator.pop(context); // Close the bottom sheet first _openServiceRequestForm(context, service); }, ), const SizedBox(height: 20), // Space at the bottom ], ), ), ], ), ), ), ); } Widget _buildDetailRow(IconData icon, String label, String value) { return Padding( padding: const EdgeInsets.symmetric(vertical: 8), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Icon(icon, color: Colors.amber[800], size: 20), const SizedBox(width: 12), Text( label, style: TextStyle(color: Colors.grey[600], fontSize: 15), ), const SizedBox(width: 8), Expanded( child: Text( value, style: TextStyle( color: Colors.grey[850], fontWeight: FontWeight.bold, fontSize: 15, ), ), ), ], ), ); } void _openServiceRequestForm(BuildContext context, LogisticsService service) { // Ensure the ServiceRequestForm widget exists and is correctly imported Navigator.push( context, MaterialPageRoute( builder: (context) => ServiceRequestForm(serviceName: service.title), ), ); } void _showSearchDialog(BuildContext context) { showDialog( context: context, builder: (context) => AlertDialog( title: const Text('بحث الخدمات'), content: TextFormField( controller: _searchController, // Use the controller autofocus: true, decoration: InputDecoration( hintText: 'ابحث عن خدمة...', prefixIcon: const Icon(Icons.search), // Clear button suffixIcon: _searchQuery.isNotEmpty ? IconButton( icon: const Icon(Icons.clear), onPressed: () { _searchController.clear(); // _filterServices(''); // Already handled by listener }, ) : null, ), // onChanged: _filterServices, // Handled by listener ), actions: [ TextButton( child: const Text('إغلاق'), onPressed: () => Navigator.pop(context), ), ], shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)), ), ); } @override void dispose() { _controller.dispose(); _searchController.dispose(); super.dispose(); } } import 'package:flutter/material.dart'; // Placeholder for ServiceRequestForm - Replace with your actual implementation class ServiceRequestForm extends StatelessWidget { final String serviceName; const ServiceRequestForm({super.key, required this.serviceName}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('طلب خدمة: $serviceName'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'نموذج طلب خدمة "$serviceName"', style: Theme.of(context).textTheme.headlineSmall, textAlign: TextAlign.center, ), const SizedBox(height: 20), const Text('سيتم إضافة حقول النموذج هنا.'), const SizedBox(height: 30), ElevatedButton( onPressed: () { // Add form submission logic here Navigator.pop(context); // Go back after submission (example) }, child: const Text('إرسال الطلب'), ) ], ), ), ), ); } } import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; // Import for localization import 'pages/services_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'GoNavi Logistics', // --- Add Localization Delegates for Arabic --- localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('ar', ''), // Arabic Locale('en', ''), // English (optional fallback) ], locale: const Locale('ar', ''), // Set default locale to Arabic // --- End Localization --- theme: ThemeData( primarySwatch: Colors.blue, fontFamily: 'Cairo', // Example: Use a suitable Arabic font visualDensity: VisualDensity.adaptivePlatformDensity, appBarTheme: const AppBarTheme( titleTextStyle: TextStyle( fontFamily: 'Cairo', // Ensure AppBar title uses the font fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white ), iconTheme: IconThemeData(color: Colors.white), // White icons ), textTheme: const TextTheme( // Define default text styles bodyMedium: TextStyle(fontFamily: 'Cairo', fontSize: 14), titleLarge: TextStyle(fontFamily: 'Cairo', fontSize: 22, fontWeight: FontWeight.bold), // Add other styles as needed ), cardTheme: CardTheme( // Consistent card styling elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15.0), ), ), elevatedButtonTheme: ElevatedButtonThemeData( // Consistent button style style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12), textStyle: const TextStyle(fontFamily: 'Cairo', fontSize: 16, fontWeight: FontWeight.w600) ), ), ), debugShowCheckedModeBanner: false, home: const Directionality( // Ensure Right-to-Left layout textDirection: TextDirection.rtl, child: ServicesPage(), ), ); } } name: gonavi # Ensure this matches your project name description: A Flutter project for GoNavi Logistics. publish_to: 'none' # Remove this line if you intend 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 flutter_localizations: # Add localization package sdk: flutter cupertino_icons: ^1.0.2 # Add cloud_firestore if you are using it: # cloud_firestore: ^4.x.x # Replace with the latest version dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - assets/shipping.jpg - assets/warehouse.jpg - assets/customs.jpg # Add other assets here # 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: Cairo # Example Arabic font fonts: - asset: assets/fonts/Cairo-Regular.ttf - asset: assets/fonts/Cairo-Bold.ttf weight: 700 # Add other weights/styles if available # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # This file would contain the binary data for the Cairo Regular font. # Since I cannot provide binary files, create this directory and # download the Cairo font (e.g., from Google Fonts) and place the .ttf file here. # Ensure the path matches the one in pubspec.yaml. # This file would contain the binary data for the Cairo Bold font. # Since I cannot provide binary files, create this directory and # download the Cairo font (e.g., from Google Fonts) and place the .ttf file here. # Ensure the path matches the one in pubspec.yaml. # This file would contain the binary data for the shipping image. # Since I cannot provide binary files, create this directory and # place your shipping.jpg image here. # Ensure the path matches the one in pubspec.yaml and code. # This file would contain the binary data for the warehouse image. # Since I cannot provide binary files, create this directory and # place your warehouse.jpg image here. # Ensure the path matches the one in pubspec.yaml and code. # This file would contain the binary data for the customs image. # Since I cannot provide binary files, create this directory and # place your customs.jpg image here. # Ensure the path matches the one in pubspec.yaml and code. **Key Improvements:** 1. **Code Structure:** `LogisticsService` moved to `lib/models/logistics_service.dart`. 2. **UI Enhancements:** * Gradient background for `AppBar` and `Scaffold`. * Improved card design with full-width images, better spacing, info chips, and `Hero` animations. * Refined modal bottom sheet (`_showServiceDetails`) using `DraggableScrollableSheet`, better layout, gradient background, and inclusion of service features. * Used `CustomScrollView` and `Slivers` for more flexible layout and potentially better performance with long lists. 3. **Animations:** * Added staggered slide-in and fade-in animations for the service cards. * Refined initial title/background animations. * `Hero` animation added to images for a smooth transition between the card and the details sheet. 4. **Search Functionality:** * Added a search icon to the `AppBar`. * Implemented `_showSearchDialog` with a `TextFormField` linked to `_searchController`. * `_filterServices` function updates the `_filteredServices` list based on the search query. * The UI now displays the `_filteredServices` list. * Added feedback for search results (showing the query and a "not found" message). * Added a clear button to the search field. 5. **Professionalism:** * Added `flutter_localizations` and configured for Arabic (`ar` locale) including `Directionality` for RTL layout. * Included a placeholder for an Arabic font (`Cairo`) in `pubspec.yaml` and `ThemeData`. **Remember to download the font files and place them in `assets/fonts/`.** * Defined a basic `ThemeData` for consistent styling. * Added comments for clarity. * Used `const` where appropriate. **Before Running:** 1. **Create Folders:** Make sure you have the following directory structure: * `lib/models/` * `lib/pages/` * `lib/widgets/` * `assets/` * `assets/fonts/` 2. **Add Assets:** * Place your images (`shipping.jpg`, `warehouse.jpg`, `customs.jpg`) inside the `assets/` folder. * Download a suitable Arabic font (like Cairo from Google Fonts) and place the `.ttf` files (e.g., `Cairo-Regular.ttf`, `Cairo-Bold.ttf`) inside the `assets/fonts/` folder. 3. **Run `flutter pub get`** to fetch the localization package and register assets/fonts. 4. **Implement `ServiceRequestForm`:** Replace the placeholder content in `lib/widgets/service_request_form.dart` with your actual form implementation. This revised structure and code provide a more polished and functional user experience for browsing logistics services.