Flutter主题切换插件vox_flex

Flutter主题切换插件vox_flex_theme的使用

在将flex_color_scheme集成到Flutter应用中时，你可能希望更方便地附加控制器，并能够快速切换多种类型的主题。这使得这一切变得无缝。

功能

内置ThemeController，我们可以将其附加到应用程序的顶部。

开始使用

以下是一个完整的示例，展示了如何使用ThemeController来切换主题。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:modular_app/modular_app.dart';
import 'package:main_module/main_module.dart';
import 'package:main_page/main_page.dart';
import 'package:theme_controller/theme_controller.dart';
import 'package:theme_service_hive/theme_service_hive.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final themeService = ThemeServiceHive('color_theme_hive');
  // 初始化主题服务。
  await themeService.init();
  // 创建一个使用主题服务的ThemeController。
  final ThemeController themeController = ThemeController(themeService);
  // 在创建MaterialApp之前加载首选的主题设置，这可以防止首次显示应用时出现主题更改。
  await themeController.loadAll();

  runApp(
    ChangeNotifierProvider(
      create: (_) => themeController,
      /// 你的应用在这里！
      child: ModularApp(
        module: MainModule(),
        child: MainPage(
          controller: themeController,
        ),
      ),
    ),
  );
}

切换主题

现在，当我们需要切换主题时，可以非常容易地使用以下方法：

final themeController = context.watch<ThemeController>();
bool isLight = themeController.themeMode == ThemeMode.light;

// 设置主题模式为light/dark
if (isLight) {
  themeController.setThemeMode(ThemeMode.dark); // 切换到暗色主题
} else {
  themeController.setThemeMode(ThemeMode.light); // 切换到亮色主题
}

获取当前选择的主题索引

你可以通过以下方式获取当前选择的主题索引：

var current_theme_index = themeController.schemeIndex;

获取所有从`flex_color_scheme`构建的主题

你可以获取所有从flex_color_scheme构建的主题列表：

final themes = [...AppColor.customSchemes];

显示主题列表

最后，我们可以通过迭代这些主题并展示它们：

ListView.builder(
  padding: const EdgeInsets.only(
    right: kPad,
    left: kPad / 4,
    bottom: kPad * kPad,
  ),
  itemCount: themes.length,
  itemBuilder: (context, index) {
    // 下面的代码会调用类似的方法
    // themeController.setThemeMode(isLight
    //     ? ThemeMode.light
    //     : ThemeMode.dark);
    // themeController.setSchemeIndex(index);

    return ColorThemeListTile(
      index: index,
      themeData: themes[index],
    );
  },
),

更多关于Flutter主题切换插件vox_flex_theme的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼

更多关于Flutter主题切换插件vox_flex_theme的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vox_flex_theme 是一个用于 Flutter 应用的主题切换插件，它允许开发者轻松地管理和切换应用的主题。以下是如何使用 vox_flex_theme 的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 vox_flex_theme 依赖：

dependencies:
  flutter:
    sdk: flutter
  vox_flex_theme: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建主题配置

vox_flex_theme 允许你定义多个主题，并通过 FlexThemeData 类来配置这些主题。你可以在 themes.dart 文件中定义你的主题：

import 'package:vox_flex_theme/vox_flex_theme.dart';

final lightTheme = FlexThemeData(
  primaryColor: Colors.blue,
  accentColor: Colors.blueAccent,
  brightness: Brightness.light,
);

final darkTheme = FlexThemeData(
  primaryColor: Colors.indigo,
  accentColor: Colors.indigoAccent,
  brightness: Brightness.dark,
);

3. 初始化 `FlexTheme`

在你的 main.dart 文件中，初始化 FlexTheme 并设置默认主题：

import 'package:flutter/material.dart';
import 'package:vox_flex_theme/vox_flex_theme.dart';
import 'themes.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlexTheme(
      defaultTheme: lightTheme,  // 设置默认主题
      themes: {
        'light': lightTheme,
        'dark': darkTheme,
      },
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: FlexTheme.of(context).themeData,  // 使用 FlexTheme 提供的主题
        home: MyHomePage(),
      ),
    );
  }
}

4. 在 UI 中使用主题

你可以在任何地方使用 FlexTheme.of(context) 来获取当前主题，并在 UI 中使用：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = FlexTheme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Theme Demo'),
        backgroundColor: theme.primaryColor,
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            color: theme.accentColor,
            fontSize: 24,
          ),
        ),
      ),
    );
  }
}

5. 切换主题

你可以在应用的任何地方使用 FlexTheme.changeTheme 方法来切换主题：

FlatButton(
  onPressed: () {
    FlexTheme.of(context).changeTheme('dark');  // 切换到暗色主题
  },
  child: Text('Switch to Dark Theme'),
);

6. 保存和恢复主题

vox_flex_theme 还支持将用户选择的主题保存到本地存储，以便在应用重启后恢复。你可以在初始化 FlexTheme 时使用 persistKey 参数来启用主题持久化：

FlexTheme(
  defaultTheme: lightTheme,
  themes: {
    'light': lightTheme,
    'dark': darkTheme,
  },
  persistKey: 'my_app_theme',  // 启用主题持久化
  child: MaterialApp(
    // ...
  ),
);

Flutter主题切换插件vox_flex_theme的使用