Okay, I will create a Flutter application featuring the theme selection page you provided. This will include setting up the necessary provider and a basic structure to run the app. name: theme_selector_app description: A Flutter app demonstrating theme selection. 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 # Add provider dependency dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 flutter: uses-material-design: true import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'providers/theme_provider.dart'; import 'pages/home_page.dart'; // We'll create this page void main() { runApp( ChangeNotifierProvider( create: (_) => ThemeProvider(), child: const MyApp(), ), ); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { // Access the ThemeProvider to apply the theme final themeProvider = Provider.of(context); return MaterialApp( title: 'Theme Selector', debugShowCheckedModeBanner: false, themeMode: themeProvider.themeMode, theme: ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: themeProvider.primaryColor, brightness: Brightness.light, ), useMaterial3: true, appBarTheme: AppBarTheme( backgroundColor: themeProvider.primaryColor, foregroundColor: Colors.white, // White text/icons on AppBar ), visualDensity: VisualDensity.adaptivePlatformDensity, ), darkTheme: ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: themeProvider.primaryColor, brightness: Brightness.dark, ), useMaterial3: true, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: const HomePage(), // Start with a home page ); } } import 'package:flutter/material.dart'; class ThemeProvider with ChangeNotifier { ThemeMode _themeMode = ThemeMode.system; MaterialColor _primaryColor = Colors.blue; // Default primary color ThemeMode get themeMode => _themeMode; MaterialColor get primaryColor => _primaryColor; void setThemeMode(ThemeMode mode) { if (_themeMode != mode) { _themeMode = mode; notifyListeners(); // Notify listeners about the change } } void setPrimaryColor(MaterialColor color) { if (_primaryColor != color) { _primaryColor = color; notifyListeners(); // Notify listeners about the change } } // Optional: Add methods here to persist theme settings using shared_preferences // Future loadPreferences() async { ... } // Future savePreferences() async { ... } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '../providers/theme_provider.dart'; // Correct import path class ThemePage extends StatelessWidget { const ThemePage({super.key}); // List of available primary colors final List _primaryColors = const [ Colors.blue, Colors.green, Colors.red, Colors.purple, Colors.orange, Colors.teal, Colors.pink, Colors.indigo, Colors.cyan, Colors.amber, Colors.brown, Colors.grey, ]; @override Widget build(BuildContext context) { // Access the ThemeProvider final themeProvider = Provider.of(context); final textTheme = Theme.of(context).textTheme; final colorScheme = Theme.of(context).colorScheme; // Determine check icon color based on theme brightness final checkIconColor = colorScheme.brightness == Brightness.dark ? Colors.black // Use black check for dark theme on light colors : Colors.white; // Use white check for light theme return Scaffold( appBar: AppBar( title: const Text('المظهر'), // Theme in Arabic elevation: 4.0, // Add subtle shadow ), body: SingleChildScrollView( // Use SingleChildScrollView for smaller screens padding: const EdgeInsets.all(20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // --- Theme Mode Section --- Text( 'وضع المظهر', // Theme Mode in Arabic style: textTheme.titleLarge?.copyWith( fontWeight: FontWeight.w600, color: colorScheme.primary, ), ), const SizedBox(height: 12), _buildThemeModeOption( context: context, title: 'فاتح', // Light in Arabic value: ThemeMode.light, groupValue: themeProvider.themeMode, icon: Icons.wb_sunny_outlined, onChanged: themeProvider.setThemeMode, ), _buildThemeModeOption( context: context, title: 'داكن', // Dark in Arabic value: ThemeMode.dark, groupValue: themeProvider.themeMode, icon: Icons.nightlight_outlined, onChanged: themeProvider.setThemeMode, ), _buildThemeModeOption( context: context, title: 'النظام', // System in Arabic value: ThemeMode.system, groupValue: themeProvider.themeMode, icon: Icons.settings_brightness_outlined, onChanged: themeProvider.setThemeMode, ), const Divider(height: 40, thickness: 1, indent: 16, endIndent: 16), // --- Primary Color Section --- Text( 'اللون الأساسي', // Primary Color in Arabic style: textTheme.titleLarge?.copyWith( fontWeight: FontWeight.w600, color: colorScheme.primary, ), ), const SizedBox(height: 20), Wrap( spacing: 15.0, // Horizontal space between chips runSpacing: 15.0, // Vertical space between lines alignment: WrapAlignment.start, // Align colors to the start children: _primaryColors.map((color) { bool isSelected = themeProvider.primaryColor == color; return GestureDetector( onTap: () => themeProvider.setPrimaryColor(color), child: Tooltip( // Add tooltip for color name (optional) message: _getColorName(color), // Function to get color name child: AnimatedContainer( duration: const Duration(milliseconds: 200), width: 50, height: 50, decoration: BoxDecoration( color: color.shade500, // Use a consistent shade shape: BoxShape.circle, border: isSelected ? Border.all( color: colorScheme.onSurface.withOpacity(0.8), width: 3, ) : null, boxShadow: isSelected ? [ BoxShadow( color: color.withOpacity(0.5), blurRadius: 5, offset: const Offset(0, 2), ) ] : [], ), child: isSelected ? Icon( Icons.check_circle, // Use a filled check color: checkIconColor, size: 24, ) : null, ), ), ); }).toList(), ), const SizedBox(height: 20), // Add some padding at the bottom ], ), ), ); } // Helper widget for theme mode options for cleaner code Widget _buildThemeModeOption({ required BuildContext context, required String title, required ThemeMode value, required ThemeMode groupValue, required IconData icon, required ValueChanged onChanged, }) { final colorScheme = Theme.of(context).colorScheme; return RadioListTile( title: Text(title, style: Theme.of(context).textTheme.bodyLarge), value: value, groupValue: groupValue, onChanged: (newValue) { if (newValue != null) { onChanged(newValue); } }, secondary: Icon(icon, color: colorScheme.primary), activeColor: colorScheme.primary, contentPadding: const EdgeInsets.symmetric(horizontal: 0), // Adjust padding visualDensity: VisualDensity.compact, // Make it slightly more compact ); } // Helper to get a readable name for the color (can be expanded) String _getColorName(MaterialColor color) { if (color == Colors.blue) return 'Blue'; if (color == Colors.green) return 'Green'; if (color == Colors.red) return 'Red'; if (color == Colors.purple) return 'Purple'; if (color == Colors.orange) return 'Orange'; if (color == Colors.teal) return 'Teal'; if (color == Colors.pink) return 'Pink'; if (color == Colors.indigo) return 'Indigo'; if (color == Colors.cyan) return 'Cyan'; if (color == Colors.amber) return 'Amber'; if (color == Colors.brown) return 'Brown'; if (color == Colors.grey) return 'Grey'; return 'Color'; // Default } } import 'package:flutter/material.dart'; import 'theme_page.dart'; // Import the theme page class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Home Page'), actions: [ IconButton( icon: const Icon(Icons.color_lens_outlined), // Theme icon tooltip: 'Change Theme', onPressed: () { // Navigate to the ThemePage Navigator.push( context, MaterialPageRoute(builder: (context) => const ThemePage()), ); }, ), ], ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Welcome!', style: Theme.of(context).textTheme.headlineMedium, ), const SizedBox(height: 20), ElevatedButton( onPressed: () { // Navigate to the ThemePage Navigator.push( context, MaterialPageRoute(builder: (context) => const ThemePage()), ); }, child: const Text('Go to Theme Settings'), ), const SizedBox(height: 20), // Example of a themed widget Card( color: Theme.of(context).colorScheme.secondaryContainer, child: Padding( padding: const EdgeInsets.all(16.0), child: Text( 'This card uses theme colors', style: TextStyle( color: Theme.of(context).colorScheme.onSecondaryContainer, ), ), ), ) ], ), ), ); } } This sets up a complete Flutter application: 1. **`pubspec.yaml`**: Includes the `provider` package. 2. **`lib/main.dart`**: Initializes the app, sets up the `ThemeProvider`, and configures `MaterialApp` to use the theme settings from the provider. 3. **`lib/providers/theme_provider.dart`**: Manages the state for `themeMode` and `primaryColor`. 4. **`lib/pages/theme_page.dart`**: Contains your refined UI for selecting theme mode and primary color, using `provider` to interact with the state. It includes some styling enhancements for a more professional look. 5. **`lib/pages/home_page.dart`**: A basic home screen with a button and an AppBar action to navigate to the `ThemePage`. You can now run this Flutter project. Changes made on the Theme page will dynamically update the app's appearance.