Flutter主题管理插件playx_theme的使用

Flutter主题管理插件playx_theme的使用

Playx Theme: 轻松控制您的应用视觉风格。无缝切换主题，享受平滑动画，并轻松为每个主题定义自定义颜色方案。

特性

• 简易主题管理: 轻松创建和管理应用主题。
• 平滑过渡: 使用独特的过渡效果在主题之间切换。
• 自定义颜色: 为每个主题定义自定义颜色，例如 context.playxColors.primary。
• 自动主题持久化: 自动存储并加载上次使用的主题。
• 实用小部件: 使用自定义实用小部件增强主题功能。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  playx_theme: ^1.0.2

使用

启动PlayxTheme

在运行应用之前初始化并启动主题。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 启动AppTheme
  await PlayxTheme.boot(
    config: PlayxThemeConfig(
      themes: [
        XTheme(
          id: 'light',
          name: 'Light',
          themeData: ThemeData.light(),
        ),
        XTheme(
          id: 'dark',
          name: 'Dark',
          themeData: ThemeData.dark(),
        ),
      ],
    ),
  );

  // 运行应用
  runApp(const MyApp());
}

将应用包装在PlayXThemeBuilder中

使用 PlayXThemeBuilder 包装应用以应用主题。

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 HomeScreen(),
        );
      },
    );
  }
}

更新应用主题

通过 PlayxTheme 切换主题。

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

访问当前主题

使用上下文扩展获取当前主题信息。

final themeId = context.xTheme.id;

// 旧版访问
final currentThemeId = PlayxTheme.currentTheme.id;
final currentThemeData = PlayxTheme.currentThemeData;

可用方法

动画

Playx主题包提供了多种动画来增强主题切换体验。

PlayxThemeSwitchingArea

为了在更改主题时显示动画，请将相关屏幕包装在 PlayxThemeSwitchingArea 中。

class HomeScreen extends StatelessWidget {
  const HomeScreen({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),
        ),
      ),
    );
  }
}

主题切换动画控制

使用 PlayxThemeAnimation 类及其子类自定义主题切换动画。您可以控制动画的各种方面。

PlayxThemeAnimation

主题动画的基本类提供常见设置，包括：

• isReversed: 反转动画方向。
• onAnimationFinish: 动画完成时触发的回调。
• duration: 动画持续时间。

PlayxThemeClipperAnimation

定义基于剪切的动画，并带有自定义剪切器设置。

PlayxThemeAnimation.clipper(
  clipper: const ThemeSwitcherCircleClipper(),
  offset: Offset.zero,
)

您可以使用 PlayxThemeSwitcher 从触发小部件开始动画切换主题。

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

这将在 FloatingActionButton 上使用一个圆形剪切动画开始切换主题。

PlayxThemeFadeAnimation

控制渐变效果，具有可调的不透明度级别。

PlayxThemeAnimation.fade(
  begin: 0.0,
  end: 1.0,
)

PlayxThemeScaleAnimation

处理缩放效果，具有可调的缩放值。

PlayxThemeAnimation.scale(
  begin: 0.5,
  end: 1.0,
)

PlayxThemeHorizontalSlideAnimation

创建水平滑动效果，具有起始和结束偏移量。

PlayxThemeAnimation.horizontalSlide(
  beginOffset: Offset(-1.0, 0.0),
  endOffset: Offset(0.0, 0.0),
)

PlayxThemeVerticalSlideAnimation

创建垂直滑动效果，具有起始和结束偏移量。

PlayxThemeAnimation.verticalSlide(
  beginOffset: Offset(0.0, -1.0),
  endOffset: Offset(0.0, 0.0),
)

自定义主题

创建 PlayxThemeConfig 对象并传递给 PlayxTheme.boot() 来自定义主题。

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,
);

自定义主题颜色

通过扩展 PlayxColors 创建每个主题的自定义颜色。

class LightColors extends PlayxColors{
  @override
  Color get background => XColors.white;
  
  @override
  Color get error => XColors.red;
  
  @override
  Color get onBackground => XColors.black;
}

在小部件树中使用自定义颜色。

ColoredBox(color: context.playxColors.primary);

扩展 PlayxColors 添加更多颜色。

abstract class AppColors extends PlayxColors{
  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;
}

访问扩展的颜色。

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);