animated_theme_switcher

类似 Telegram 的 Flutter 动画主题切换器。

该库源自Peyman在stackoverflow上的问题如何在Flutter中为主题切换添加动画

animated_theme_switcher

入门

在您的pubspec.yaml依赖项中添加animated_theme_switcher: "^2.0.1"。

dependencies:
 animated_theme_switcher: "^2.0.1"

使用方法

在您的 dart 文件中导入以下包

import 'package:animated_theme_switcher/animated_theme_switcher.dart';

用ThemeProvider widget包裹MaterialApp，如下例所示

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

但如果你只想提供一个主题，请按如下方式使用

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

用ThemeSwitchingArea widget包裹您想要切换主题的屏幕，如下例所示

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

用ThemeSwitcher builder包裹每个切换器，并使用ThemeSwitcher.of(context).changeTheme函数来切换主题；


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

使用可选的命名参数clipper来传递自定义clippers。

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

使用可选的命名参数clipper来传递自定义clippers。

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

GitHub

https://github.com/kherel/animated_theme_switcher