animated_theme_switcher

Web Support

To use this library on the web, you must use the CanvasKit rendering engine.

Theme Persistence

This package does not automatically persist the selected theme to local storage. To save the user's theme preference, you must implement your own logic (e.g., using the shared_preferences package).

To enable theme switching across your entire application, wrap your MaterialApp with the ThemeProvider widget. You must provide an initTheme (the initial ThemeData) and a builder that returns the MaterialApp using the provided myTheme.

ThemeProvider(
    initTheme: initTheme,
    builder: (context, myTheme) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: myTheme,
        home: MyHomePage(),
      );
    }),

Add animated_theme_switcher to your pubspec.yaml dependencies to use the library in your Flutter project.

dependencies:
  animated_theme_switcher: "^2.0.8"

Wrap the specific screen or area where you want the theme switching animation to occur with the ThemeSwitchingArea widget. This defines the scope of the transition.

ThemeSwitchingArea(
  child: Builder(builder: (context) {
    return ...;
  }),
);

If you only need to provide a theme to a specific subtree rather than the whole app, you can use ThemeProvider with a child instead of a builder.

ThemeProvider(
    initTheme: initTheme,
    child: SomeCoolPage(),
  ),

The library provides two alternative constructors that simplify access to the switcher and the current theme via their builders:

1. ThemeSwitcher.switcher(): Provides the switcher instance directly in the builder.
2. ThemeSwitcher.withTheme(): Provides both the switcher instance and the current theme in the builder.

// Using ThemeSwitcher.switcher()
ThemeSwitcher.switcher(
  builder: (context, switcher) {
    ...
    onTap: () => switcher.changeTheme(
      theme: newTheme,
    );
    ...
  },
);

// Using ThemeSwitcher.withTheme()
ThemeSwitcher.withTheme(
  builder: (context, switcher, theme) {
    ...
    onTap: () => switcher.changeTheme(
      theme: theme.brightness == Brightness.light
          ? darkTheme
          : lightTheme,
    );
    ...
  },
);

You can pass a custom clipper to the ThemeSwitcher widget using the clipper named parameter to change the shape or style of the transition animation.

ThemeSwitcher(
  clipper: ThemeSwitcherBoxClipper(),
  builder: (context) {
    ...
  },
);

To trigger a theme change, wrap your switcher UI (like a button) with a ThemeSwitcher builder. You can access the theme switching logic via ThemeSwitcher.of(context).changeTheme().

changeTheme accepts:

• theme: The new ThemeData to apply.
• isReversed: A boolean to reverse the animation direction (defaults to false).

ThemeData newTheme = ThemeData(
  primaryColor: Colors.amber
);
...
ThemeSwitcher(
  builder: (context) {
    ...
    onTap: () => ThemeSwitcher.of(context).changeTheme(
      theme: newTheme,
      isReversed: false // default: false 
    );
    ...
  },
);

The ThemeSwitchingArea widget is used to wrap the part of your widget tree where you want the animated theme transition to occur. It acts as the boundary for the animation, ensuring that the transition between the old theme and the new theme is visually contained within this area.

When a theme change is triggered, ThemeSwitchingArea manages a Stack containing the current theme's content and a clipped layer representing the new theme (or a snapshot of the old one), using a ClipPath to create the animation effect.

ThemeSwitchingArea(
  child: YourAppContentWidget(),
)

To trigger a theme change from a widget located deep in the widget tree, use ThemeSwitcher.of(context). This method retrieves the ThemeSwitcherState from the nearest ThemeSwitcher ancestor.

Note: This requires the widget to be a descendant of a ThemeSwitcher widget.

void _onPressed(BuildContext context) {
  final switcher = ThemeSwitcher.of(context);
  switcher.changeTheme(theme: ThemeData.light());
}

To trigger theme changes or access the current ThemeData from anywhere within the ThemeProvider widget tree, use ThemeModel.of(context). This returns the ThemeModel instance associated with the provider.

This method allows you to access the current theme, check if an animation isAnimating, and call changeTheme to perform a transition.

final model = ThemeModel.of(context);
final currentTheme = model.theme;