Playx Theme #

Playx Theme: Effortlessly control your app's visual style. Seamlessly switch themes, enjoy smooth animations, and tailor custom color schemes for each theme with ease in your Flutter projects## Features

• Easy Theme Management: Create and manage app themes effortlessly.
• Smooth Transitions: Switch between themes with unique transitions.
• Custom Colors: Define custom colors for each theme, e.g., context.playxColors.primary.
• Automatic Theme Persistence: Automatically store and load the last used theme.
• Utility Widgets: Utilize custom utilities and widgets for enhanced theming.

Installation #

Add the following line to your dependencies in pubspec.yaml:

playx_theme: ^0.5.0

Usage #

Boot the Core #

Initialize the core and boot the themes before running your app.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Boot the core
  await PlayxCore.bootCore();

  // Boot the AppTheme
  await PlayxTheme.boot(
    config: PlayxThemeConfig(
      themes: [
        XTheme(
          id: 'light',
          name: 'Light',
          themeData: ThemeData.light(),
        ),
        XTheme(
          id: 'dark',
          name: 'Dark',
          themeData: ThemeData.dark(),
        ),
      ],
    ),
  );

  // Run the app
  runApp(const MyApp());
}

Wrap Your App with PlayXThemeBuilder #

Use PlayXThemeBuilder to wrap your app and apply the themes.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PlayXThemeBuilder(
      builder: (context, theme) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: theme.themeData,
          home: const MyHomePage(),
        );
      },
    );
  }
}

Update App Theme #

Switch between themes using PlayxTheme.

FloatingActionButton(
  onPressed: () {
    PlayxTheme.updateById('dark');
  },
  child: Icon(
    Icons.next,
    color: PlayxTheme.colorScheme.onBackground,
  ),
)

Accessing Current Theme #

Retrieve the current theme information using context extensions.

final themeId = context.xTheme.id;

// Legacy Access
final currentThemeId = PlayxTheme.currentTheme.id;
final currentThemeData = PlayxTheme.currentThemeData;

Available Methods #

Animation #

The package provides a unique animation for changing the app theme.

PlayxThemeSwitchingArea #

Wrap the screen where you want to show the animation with PlayxThemeSwitchingArea.

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PlayxThemeSwitchingArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Playx Theme Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('You have pushed the button this many times:'),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => PlayxTheme.next(),
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

PlayxThemeSwitcher #

Use PlayxThemeSwitcher to switch themes with an animation starting from the triggering widget.

PlayxThemeSwitcher(
  builder: (ctx, theme) => FloatingActionButton(
    onPressed: () {
      PlayxTheme.next(context: ctx);
    },
    tooltip: 'Next Theme',
    child: Icon(
      Icons.add,
      color: context.colorScheme.onPrimary,
    ),
  ),
);

Theme Switching Animation Control #

Customize theme switching animation with various parameters.

• Animate: Disable animation with animate: false.
• Starting Point: Customize the animation's starting point with offset or context.
• Animation Direction: Control direction with isReversed.
• Custom Clipper: Use a custom clipper like ThemeSwitcherBoxClipper or ThemeSwitcherCircleClipper.
• Force Update: Force theme update without animation using forceUpdateNonAnimatedTheme.

Example:

PlayxTheme.next(
  context: ctx,
  clipper: const ThemeSwitcherBoxClipper(),
  offset: Offset.zero,
);

Customize Your Themes #

Create a PlayxThemeConfig object and pass it to PlayxTheme.boot() to customize themes.

final config = PlayxThemeConfig(
  themes: [
    XTheme(
      id: 'light',
      name: 'Light',
      themeData: ThemeData(
        brightness: Brightness.light,
        colorScheme: lightColors.colorScheme,
        useMaterial3: true,
      ),
      cupertinoThemeData: const CupertinoThemeData(
        brightness: Brightness.light,
      ),
      colors: lightColors,
    ),
    XTheme.builder(
      id: 'dark',
      name: 'Dark',
      initialTheme: ThemeData(
        brightness: Brightness.dark,
        colorScheme: darkColors.colorScheme,
        useMaterial3: true,
      ),
      themeBuilder: (locale) => ThemeData(
        brightness: Brightness.dark,
        colorScheme: darkColors.colorScheme,
        useMaterial3: true,
      ),
      cupertinoThemeBuilder: (locale) => const CupertinoThemeData(
        brightness: Brightness.dark,
      ),
      isDark: true,
      colors: darkColors,
    ),
  ],
  initialThemeIndex: PlayxTheme.isDeviceInDarkMode() ? 1 : 0,
);

Customize Theme's Colors #

Create custom colors for each theme by extending XColors.

class LightColors extends XColors {
  @override
  Color get background => XColors.white;

  @override
  Color get error => XColors.red;

  @override
  Color get onBackground => XColors.black;
}

Use custom colors in your widget tree.

ColoredBox(color: context.playxColors.primary);

Extend XColors to add more colors.

abstract class AppColors extends XColors {
  Color get containerBackgroundColor;
  static const Color blue = Colors.blue;
}

class LightColorScheme extends AppColors {
  @override
  Color get containerBackgroundColor => XColors.white;

  @override
  Color get background => XColors.white;

  @override
  Color get error => XColors.red;

  @override
  Color get onBackground => XColors.black;
}

Access the extended colors.

static AppColors of(BuildContext context) => context.playxColors as AppColors;

final primary = AppColors.of(context).primary;

extension AppColorsExtension on BuildContext {
  AppColors get colors => AppColors.of(this);
}

ColoredBox(color: context.colors.primary);

Material 3 Support #

The package supports both Material 2 and Material 3. It includes

utilities and widgets to help with Material 3 integration, such as ImageTheme and getBlendedColorScheme. Additionally, it includes the flex_seed_scheme package for advanced color scheme creation.

Reference & Documentation #

• Check out the documentation for detailed information on how to integrate and utilize playx_theme in your Flutter applications.
• The theme switching animation is based on the animated_theme_switcher package.

Support and Contribution #

For questions, issues, or feature requests, visit the GitHub repository. Contributions are welcome!

See Also #

• Playx: Ecosystem for redundant features, less code, more productivity, better organizing.
• Playx_core: Core of the Playx ecosystem, helping with app theming and localization.
• Playx_localization: Localization and internationalization for Flutter apps from the Playx ecosystem.

License #

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