Flutter主题管理插件simple_dart_theme_controller的使用

Flutter主题管理插件simple_dart_theme_controller的使用

Simple Dart Theme Controller

Simple Dart Theme Controller 是一个允许切换 CSS 样式的主题管理器。

ThemeController

ThemeController 是用于管理主题的控制器。像所有控制器一样,它在应用启动时创建并初始化。 本质上,ThemeController 只是添加或替换了一个样式引用。

初始化

可以通过传递设置来配置主题管理器。初始化时可以使用的参数包括:

  • defaultTheme - 默认主题名称。默认值为 'default'
  • localSettingsTheme - 存储所选主题名称的 LocalStorage 中的变量。默认值为 'theme'
  • localSettingsMonoSpaceFont - 存储等宽字体的 LocalStorage 中的变量。默认值为 'monoSpaceFont'
  • themeFileSuffix - 主题文件的后缀名。默认值为 '_theme.css'
  • monoSpaceFontFile - 定义等宽字体样式的文件名。默认值为 'mono_space_font.css'

初始化完成后,主题会从 LocalStorage 加载。如果找不到主题,则加载默认主题。

属性和方法

  • themeList - 初始化时传递的主题列表
  • theme - 当前主题
  • monoSpaceFont - 当前等宽字体

CSS 样式

预期每个主题都有一个单独的 CSS 样式文件。文件名必须以以下格式命名:theme_name_theme_suffix。例如:dark_theme.css。 此外,在使用 monoSpaceFont 选项时,还需要指定等宽字体的样式。

完整示例代码

以下是一个完整的示例,展示如何使用 simple_dart_theme_controller 插件来管理主题。

import 'package:flutter/material.dart';
import 'package:simple_dart_theme_controller/simple_dart_theme_controller.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建 ThemeController 实例
  final ThemeController _themeController = ThemeController(
    defaultTheme: 'light', // 默认主题
    localSettingsTheme: 'selectedTheme', // 存储主题的 LocalStorage 变量
    localSettingsMonoSpaceFont: 'monospaceFont', // 存储等宽字体的 LocalStorage 变量
    themeFileSuffix: '_theme.css', // 主题文件后缀
    monoSpaceFontFile: 'monospace_font.css', // 等宽字体文件
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化主题控制器
    _themeController.init();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Dart Theme Controller 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // 切换到下一个主题
                  _themeController.switchToNextTheme();
                },
                child: Text('切换主题'),
              ),
              SizedBox(height: 20),
              Text(
                '当前主题: ${_themeController.theme}', // 显示当前主题
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(height: 20),
              Text(
                '当前等宽字体: ${_themeController.monoSpaceFont}', // 显示当前等宽字体
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
1 回复

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


simple_dart_theme_controller 是一个用于管理 Flutter 应用主题的简单插件。它允许你在应用中轻松切换和管理主题,支持亮色和暗色主题的切换。以下是如何使用 simple_dart_theme_controller 插件的步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 simple_dart_theme_controller 插件的依赖:

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

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

2. 初始化主题控制器

在你的应用的入口文件(通常是 main.dart)中,初始化 ThemeController

import 'package:flutter/material.dart';
import 'package:simple_dart_theme_controller/simple_dart_theme_controller.dart';

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

class MyApp extends StatelessWidget {
  final ThemeController _themeController = ThemeController();

  @override
  Widget build(BuildContext context) {
    return ThemeControllerProvider(
      controller: _themeController,
      child: MaterialApp(
        title: 'Flutter Theme Demo',
        theme: _themeController.lightTheme,
        darkTheme: _themeController.darkTheme,
        themeMode: _themeController.themeMode,
        home: MyHomePage(),
      ),
    );
  }
}

3. 定义主题

你可以在 ThemeController 中定义亮色和暗色主题。例如:

class ThemeController {
  final ThemeData lightTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  );

  final ThemeData darkTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
  );

  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    // 通知监听器主题已更改
    // 你可以使用 Provider 或 ChangeNotifier 来通知 UI 更新
  }
}

4. 切换主题

你可以在应用的任何地方通过 ThemeController 来切换主题。例如,在一个按钮的点击事件中切换主题:

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

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: ${themeController.themeMode == ThemeMode.light ? 'Light' : 'Dark'}',
            ),
            ElevatedButton(
              onPressed: () {
                themeController.setThemeMode(
                  themeController.themeMode == ThemeMode.light
                      ? ThemeMode.dark
                      : ThemeMode.light,
                );
              },
              child: Text('Toggle Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 使用 ThemeControllerProvider

为了在应用的任何地方访问 ThemeController,你可以使用 ThemeControllerProvider。在上面的代码中,我们已经将 ThemeController 提供给了整个应用。

6. 监听主题变化

如果你需要在主题变化时执行某些操作,可以使用 ChangeNotifierProvider 来监听主题的变化。例如:

class ThemeController with ChangeNotifier {
  ThemeData _lightTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  );

  ThemeData _darkTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
  );

  ThemeMode _themeMode = ThemeMode.system;

  ThemeData get lightTheme => _lightTheme;
  ThemeData get darkTheme => _darkTheme;
  ThemeMode get themeMode => _themeMode;

  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners(); // 通知监听器主题已更改
  }
}

然后在 UI 中使用 ChangeNotifierProvider 来监听主题变化:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ThemeController(),
      child: MyApp(),
    ),
  );
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!