dynamic_themes_sl 1.0.0

A lightweight Flutter package for managing dynamic themes with support for Light/Dark Mode, custom themes, and RTL.

Dynamic Theme Manager

A lightweight Flutter package for managing dynamic themes with support for Light/Dark Mode, custom themes, and RTL.

Features

• 🎨 Automatic switching between Light/Dark Mode based on system settings
• 🎯 Creation and application of custom themes using JSON or Dart objects
• 💾 Persist theme preferences locally using shared_preferences
• 🎮 Pre-built widgets for theme switching and theme preview
• 🌐 RTL support for languages like Arabic
• ⚡ Lightweight performance with integration for Material Design and Cupertino
• ✨ Smooth animations during theme transitions
• 🎨 Material 3 support with comprehensive color scheme
• 🖋️ Custom font family support
• 🎯 Surface and error color customization
• 🔄 Theme copying and modification

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  dynamic_theme_manager: ^1.0.0

Usage

1. Initialize the theme manager in your app:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final themeManager = await DynamicThemeManager.create();
  runApp(MyApp(themeManager: themeManager));
}

2. Wrap your app with the theme provider:

class MyApp extends StatelessWidget {
  final DynamicThemeManager themeManager;

  const MyApp({super.key, required this.themeManager});

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      themeManager: themeManager,
      child: AnimatedBuilder(
        animation: themeManager,
        builder: (context, child) {
          return MaterialApp(
            title: 'My App',
            theme: themeManager.getThemeData(context),
            home: const MyHomePage(),
          );
        },
      ),
    );
  }
}

3. Use the theme switcher widget:

ThemeSwitcher(themeManager: themeManager)

4. Create and apply custom themes:

// Using Dart objects
final customTheme = CustomThemeData(
  primaryColor: Colors.purple,
  accentColor: Colors.pink,
  backgroundColor: Colors.white,
  textColor: Colors.black,
  brightness: Brightness.light,
  surfaceColor: Colors.grey[100]!,
  errorColor: Colors.red[700]!,
  fontFamily: 'Roboto',
);
themeManager.setCustomTheme(customTheme);

// Using JSON
final jsonTheme = '''
{
  "primaryColor": "#FF5722",
  "accentColor": "#FFC107",
  "backgroundColor": "#212121",
  "textColor": "#FFFFFF",
  "brightness": "dark",
  "surfaceColor": "#1E1E1E",
  "errorColor": "#CF6679",
  "fontFamily": "Roboto"
}
''';
final theme = CustomThemeData.fromJson(jsonTheme);
themeManager.setCustomTheme(theme);

// Copy and modify an existing theme
final newTheme = theme.copyWith(
  primaryColor: Colors.blue,
  fontFamily: 'Poppins',
);
themeManager.setCustomTheme(newTheme);

5. Preview themes using the theme preview widget:

ThemePreviewGrid(
  themes: [
    CustomThemeData.light(),
    CustomThemeData.dark(),
    // Add your custom themes here
  ],
  onThemeSelected: (theme) {
    themeManager.setCustomTheme(theme);
  },
)

Widgets

ThemeSwitcher

A simple widget that provides a button to toggle between light and dark themes.

ThemeSwitcher(
  themeManager: themeManager,
  size: 40.0,
  animationDuration: const Duration(milliseconds: 300),
)

ThemeSwitcherDropdown

A dropdown menu widget that allows selecting between system, light, and dark themes.

ThemeSwitcherDropdown(
  themeManager: themeManager,
)

ThemePreview

A widget that displays a preview of a theme.

ThemePreview(
  theme: customTheme,
  size: const Size(200, 150),
)

ThemePreviewGrid

A grid of theme previews that allows selecting a theme.

ThemePreviewGrid(
  themes: [theme1, theme2, theme3],
  onThemeSelected: (theme) {
    themeManager.setCustomTheme(theme);
  },
)

Theme Properties

The CustomThemeData class supports the following properties:

• primaryColor: The main color of the theme
• accentColor: The secondary color of the theme
• backgroundColor: The background color of the theme
• textColor: The text color of the theme
• brightness: The brightness of the theme (light/dark)
• surfaceColor: The surface color for cards and other elevated surfaces
• errorColor: The color used for error states
• fontFamily: The font family to use throughout the app

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.