Okay, I will enhance the notification feature to make it more robust and production-ready. This involves: 1. Creating a `Notification` model. 2. Simulating a notification service to fetch data. 3. Making the `NotificationsPage` stateful to handle fetching, loading, and displaying dynamic notifications. 4. Adding features like read status, relative timestamps, and handling empty states. 5. Improving the `NotificationSettingsPage` with loading indicators and descriptions. 6. Setting up basic routing in `main.dart`. name: flutter_notifications_app description: A sample Flutter app demonstrating enhanced notifications. 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' # Adjusted SDK constraint dependencies: flutter: sdk: flutter shared_preferences: ^2.0.15 # Use a specific version or latest timeago: ^3.3.0 # For relative timestamps intl: ^0.18.0 # Often needed with timeago for localization cupertino_icons: ^1.0.2 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 flutter: uses-material-design: true import 'package:flutter/material.dart'; import 'package:intl/date_symbol_data_local.dart'; // Import for timeago localization import 'screens/notifications_page.dart'; import 'screens/notification_settings_page.dart'; void main() async { // Ensure Flutter bindings are initialized WidgetsFlutterBinding.ensureInitialized(); // Initialize date formatting for timeago await initializeDateFormatting('ar', null); // Initialize Arabic locale data runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Notifications Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, fontFamily: 'Roboto', // Example font, choose one suitable appBarTheme: const AppBarTheme( backgroundColor: Colors.white, foregroundColor: Colors.black87, elevation: 1, iconTheme: IconThemeData(color: Colors.black54), titleTextStyle: TextStyle( color: Colors.black87, fontSize: 18, fontWeight: FontWeight.w600, ), ), listTileTheme: const ListTileThemeData( iconColor: Colors.blueGrey, ), ), locale: const Locale('ar'), // Set default locale to Arabic supportedLocales: const [ Locale('en', ''), // English, no country code Locale('ar', ''), // Arabic, no country code ], initialRoute: '/', routes: { '/': (context) => const NotificationsPage(), '/notification-settings': (context) => const NotificationSettingsPage(), }, debugShowCheckedModeBanner: false, ); } } import 'package:flutter/material.dart'; enum NotificationType { order, promotion, system, general } class NotificationModel { final String id; final String title; final String body; final DateTime timestamp; final NotificationType type; bool isRead; NotificationModel({ required this.id, required this.title, required this.body, required this.timestamp, this.type = NotificationType.general, this.isRead = false, }); // Helper to get an icon based on type IconData get icon { switch (type) { case NotificationType.order: return Icons.local_shipping; case NotificationType.promotion: return Icons.campaign; case NotificationType.system: return Icons.error_outline; case NotificationType.general: default: return Icons.notifications; } } } import '../models/notification_model.dart'; class NotificationService { // Simulate fetching notifications from an API or local storage Future> fetchNotifications() async { // Simulate network delay await Future.delayed(const Duration(seconds: 1)); // Sample data - in a real app, this would come from a backend return List.generate(15, (index) { NotificationType type; String title; String body; if (index % 3 == 0) { type = NotificationType.order; title = 'تحديث حالة الشحنة #${12345 + index}'; body = 'تم توصيل شحنتك بنجاح.'; } else if (index % 3 == 1) { type = NotificationType.promotion; title = 'عرض خاص لك!'; body = 'خصم 20% على جميع الإلكترونيات لفترة محدودة.'; } else { type = NotificationType.system; title = 'تنبيه صيانة'; body = 'سيتم إجراء صيانة مجدولة للنظام يوم الجمعة القادم.'; } return NotificationModel( id: 'notif_$index', title: title, body: body, timestamp: DateTime.now().subtract(Duration(hours: index * 2, minutes: index * 15)), type: type, isRead: index > 5, // Simulate some read notifications ); }).reversed.toList(); // Show newest first } // Simulate marking a notification as read Future markAsRead(String notificationId) async { // Simulate API call or local DB update await Future.delayed(const Duration(milliseconds: 100)); print('Notification $notificationId marked as read (simulated).'); // In a real app, update the data source here } // Simulate marking all notifications as read Future markAllAsRead() async { // Simulate API call or local DB update await Future.delayed(const Duration(milliseconds: 300)); print('All notifications marked as read (simulated).'); // In a real app, update the data source here } } import 'package:flutter/material.dart'; import 'package:timeago/timeago.dart' as timeago; import '../models/notification_model.dart'; import '../services/notification_service.dart'; class NotificationsPage extends StatefulWidget { const NotificationsPage({super.key}); @override State createState() => _NotificationsPageState(); } class _NotificationsPageState extends State { final NotificationService _notificationService = NotificationService(); List _notifications = []; bool _isLoading = true; bool _hasError = false; @override void initState() { super.initState(); // Set the locale for timeago - ensure 'ar' is initialized in main.dart timeago.setLocaleMessages('ar', timeago.ArMessages()); _loadNotifications(); } Future _loadNotifications({bool refresh = false}) async { if (!refresh) { setState(() { _isLoading = true; _hasError = false; }); } try { final notifications = await _notificationService.fetchNotifications(); setState(() { _notifications = notifications; _isLoading = false; }); } catch (e) { print("Error loading notifications: $e"); setState(() { _isLoading = false; _hasError = true; }); } } Future _markNotificationAsRead(NotificationModel notification) async { if (!notification.isRead) { setState(() { notification.isRead = true; // Optimistic update }); try { await _notificationService.markAsRead(notification.id); // Optional: Reload or confirm update if needed } catch (e) { print("Error marking notification as read: $e"); // Revert optimistic update if API call fails setState(() { notification.isRead = false; }); // Show error message to user if desired } } // Optional: Navigate to a detail screen or perform another action print("Tapped notification: ${notification.title}"); } Future _markAllAsRead() async { // Show confirmation dialog final confirm = await showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: const Text('تأكيد'), content: const Text('هل تريد حقاً تحديد الكل كمقروء؟'), actions: [ TextButton( child: const Text('إلغاء'), onPressed: () => Navigator.of(context).pop(false), ), TextButton( child: const Text('تأكيد'), onPressed: () => Navigator.of(context).pop(true), ), ], ); }, ); if (confirm == true) { // Optimistic UI update setState(() { for (var notification in _notifications) { notification.isRead = true; } }); try { await _notificationService.markAllAsRead(); // Optional: refresh list from source if backend dictates read status } catch (e) { print("Error marking all as read: $e"); // Revert optimistic update on error setState(() { // This is tricky without knowing original states, might need a reload _loadNotifications(refresh: true); }); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('حدث خطأ أثناء تحديد الكل كمقروء.')), ); } } } Widget _buildNotificationList() { if (_notifications.isEmpty) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.notifications_off_outlined, size: 60, color: Colors.grey[400]), const SizedBox(height: 16), Text( 'لا توجد إشعارات حالياً', style: TextStyle(fontSize: 16, color: Colors.grey[600]), ), ], ), ); } return RefreshIndicator( onRefresh: () => _loadNotifications(refresh: true), child: ListView.separated( padding: const EdgeInsets.symmetric(vertical: 8.0), // Adjusted padding itemCount: _notifications.length, separatorBuilder: (context, index) => Divider( height: 1, thickness: 1, indent: 72, // Indent divider to align with text color: Colors.grey[200], ), itemBuilder: (context, index) { final notification = _notifications[index]; final timeAgo = timeago.format(notification.timestamp, locale: 'ar'); final bool isUnread = !notification.isRead; return Material( color: isUnread ? Colors.blue.withOpacity(0.05) : Colors.transparent, child: InkWell( onTap: () => _markNotificationAsRead(notification), child: Padding( // Add padding for better spacing padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Stack( // Use Stack for the unread indicator dot clipBehavior: Clip.none, // Allow dot to overflow slightly children: [ Icon( notification.icon, size: 28, color: Theme.of(context).listTileTheme.iconColor ?? Colors.blueGrey, ), if (isUnread) Positioned( top: -2, right: -2, child: Container( width: 8, height: 8, decoration: const BoxDecoration( color: Colors.redAccent, shape: BoxShape.circle, ), ), ), ], ), const SizedBox(width: 16), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( notification.title, style: TextStyle( fontSize: 15, fontWeight: isUnread ? FontWeight.bold : FontWeight.normal, color: Colors.black87, ), ), const SizedBox(height: 4), Text( notification.body, style: TextStyle( fontSize: 13, color: Colors.grey[700], ), maxLines: 2, overflow: TextOverflow.ellipsis, ), const SizedBox(height: 6), Text( timeAgo, style: TextStyle( fontSize: 12, color: Colors.grey[500], ), ), ], ), ), // Optional: Add a trailing element like a menu or delete button // const SizedBox(width: 8), // Icon(Icons.more_vert, color: Colors.grey[400]), ], ), ), ), ); }, ), ); } @override Widget build(BuildContext context) { // Check if there are any unread notifications final bool hasUnread = _notifications.any((n) => !n.isRead); return Scaffold( appBar: AppBar( title: const Text('الإشعارات'), actions: [ // Only show "Mark all as read" if there are unread notifications if (hasUnread && !_isLoading) IconButton( icon: const Icon(Icons.done_all), tooltip: 'تحديد الكل كمقروء', onPressed: _markAllAsRead, ), IconButton( icon: const Icon(Icons.settings_outlined), // Use outlined icon tooltip: 'إعدادات الإشعارات', onPressed: () async { // Navigate and potentially refresh if settings change affects display await Navigator.pushNamed(context, '/notification-settings'); // Optional: Reload notifications if settings might filter them // _loadNotifications(); }, ), ], ), body: Center( child: _isLoading ? const CircularProgressIndicator() : _hasError ? Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Icon(Icons.error_outline, color: Colors.red, size: 48), const SizedBox(height: 16), const Text( 'حدث خطأ أثناء تحميل الإشعارات.', textAlign: TextAlign.center, style: TextStyle(fontSize: 16), ), const SizedBox(height: 16), ElevatedButton.icon( icon: const Icon(Icons.refresh), label: const Text('إعادة المحاولة'), onPressed: () => _loadNotifications(), ) ], ) : _buildNotificationList(), ), ); } } import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; class NotificationSettingsPage extends StatefulWidget { const NotificationSettingsPage({super.key}); @override State createState() => _NotificationSettingsPageState(); } class _NotificationSettingsPageState extends State { bool _isLoading = true; // Added loading state bool _orderUpdates = true; bool _promotions = true; bool _systemAlerts = true; // Keys for SharedPreferences static const String _orderUpdatesKey = 'notification_orderUpdates'; static const String _promotionsKey = 'notification_promotions'; static const String _systemAlertsKey = 'notification_systemAlerts'; @override void initState() { super.initState(); _loadSettings(); } Future _loadSettings() async { setState(() { _isLoading = true; // Start loading }); try { final prefs = await SharedPreferences.getInstance(); setState(() { _orderUpdates = prefs.getBool(_orderUpdatesKey) ?? true; _promotions = prefs.getBool(_promotionsKey) ?? true; _systemAlerts = prefs.getBool(_systemAlertsKey) ?? true; }); } catch (e) { // Handle potential errors loading preferences print("Error loading notification settings: $e"); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('حدث خطأ أثناء تحميل الإعدادات.')), ); // Keep default values or handle appropriately } finally { setState(() { _isLoading = false; // Stop loading regardless of outcome }); } } Future _saveSetting(String key, bool value) async { try { final prefs = await SharedPreferences.getInstance(); await prefs.setBool(key, value); } catch (e) { // Handle potential errors saving preferences print("Error saving notification setting ($key): $e"); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('حدث خطأ أثناء حفظ الإعداد.')), ); // Optionally revert the UI state if saving fails _loadSettings(); // Reload to be safe } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('إدارة الإشعارات'), ), body: _isLoading ? const Center(child: CircularProgressIndicator()) // Show loader : ListView( padding: const EdgeInsets.symmetric(vertical: 16.0), // Add vertical padding children: [ _buildSwitchTile( title: 'تحديثات الطلبات', subtitle: 'تلقي إشعارات حول حالة طلباتك وشحناتك.', value: _orderUpdates, onChanged: (value) { setState(() => _orderUpdates = value); _saveSetting(_orderUpdatesKey, value); }, ), const Divider(height: 1, indent: 16, endIndent: 16), _buildSwitchTile( title: 'العروض الترويجية والخصومات', subtitle: 'تلقي إشعارات حول أحدث العروض والمنتجات.', value: _promotions, onChanged: (value) { setState(() => _promotions = value); _saveSetting(_promotionsKey, value); }, ), const Divider(height: 1, indent: 16, endIndent: 16), _buildSwitchTile( title: 'تنبيهات النظام والصيانة', subtitle: 'تلقي إشعارات هامة حول تحديثات التطبيق أو الصيانة.', value: _systemAlerts, onChanged: (value) { setState(() => _systemAlerts = value); _saveSetting(_systemAlertsKey, value); }, ), const Divider(height: 1, indent: 16, endIndent: 16), ], ), ); } // Helper widget for consistent styling Widget _buildSwitchTile({ required String title, required String subtitle, required bool value, required ValueChanged onChanged, }) { return SwitchListTile( title: Text(title, style: const TextStyle(fontWeight: FontWeight.w500)), subtitle: Text(subtitle, style: Theme.of(context).textTheme.bodySmall), value: value, onChanged: onChanged, activeColor: Theme.of(context).primaryColor, contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), ); } } These changes provide a more realistic structure for handling notifications, including data fetching simulation, state management, UI improvements for read status and timestamps, error handling, and better settings management.