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),
),
],
),
),
),
);
}
}
更多关于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. 监听主题变化
如果你需要在主题变化时执行某些操作,可以使用 ChangeNotifier
或 Provider
来监听主题的变化。例如:
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(),
),
);
}