Flutter主题模式管理插件theme_mode_builder的使用
Flutter主题模式管理插件theme_mode_builder的使用
我创建了这个包来帮助标准化我的应用的主题处理方式。
Web Demo: https://theme-mode-builder.netlify.app/
特点
- 🚀 跨平台:手机、桌面、浏览器
- ❤ 简单、强大、直观的API
- 🛡 Null Safety
- 🔋 功能齐全
如何使用
目录
视频:(已过时,适用于v0.0.3)
指南
首先运行初始化,这是一个异步操作,因此你需要将 main()
方法的返回类型从 void
改为 Future<void>
:
Future<void> main() async {
/// 确保小部件已初始化
WidgetsFlutterBinding.ensureInitialized();
/// 初始化主题模式构建器
await ThemeModeBuilderConfig.ensureInitialized();
/// 运行应用 :)
runApp(MyCoolApp());
}
然后只需将你的 MaterialApp
小部件用 ThemeModeBuilder
包裹,并从 builder
中返回 MaterialApp
小部件。builder
给你两个参数,builder: (BuildContext context, ThemeMode themeMode) {}
。将 themeMode
传递给 MaterialApp
的 themeMode
属性。
以下代码比我的解释更清楚 🙈🚀😂:
import "package:flutter/material.dart";
import "package:theme_mode_builder/theme_mode_builder.dart";
class MyCoolApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ThemeModeBuilder(
builder: (BuildContext context, ThemeMode themeMode) {
return MaterialApp(
title: "My Cool App",
/// 这里是从 `builder` 传递过来的 `themeMode`
themeMode: themeMode,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.light,
seedColor: Colors.red,
),
/// 在这里放置你的浅色主题数据
),
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.dark,
seedColor: Colors.deepPurple,
),
/// 在这里放置你的深色主题数据
),
home: Home(),
);
},
);
}
}
如果你想更改 themeMode
,只需调用:
await ThemeModeBuilderConfig.toggleTheme();
只要正确地遵循了上述步骤,主题就会立即更改 🎉。
需要更多自定义?
要切换到深色模式:
await ThemeModeBuilderConfig.setDark();
要切换到浅色模式:
await ThemeModeBuilderConfig.setLight();
要切换到系统模式:
await ThemeModeBuilderConfig.setSystem();
获取当前的主题模式,可以运行:
final ThemeMode themeMode = ThemeModeBuilderConfig.getThemeMode();
最后,检查当前主题是否为深色主题,可以使用简单的调用:
final bool isDarkTheme = ThemeModeBuilderConfig.isDarkTheme();
示例代码
import 'package:flutter/material.dart';
import 'package:theme_mode_builder/theme_mode_builder.dart';
import 'package:theme_mode_builder_example/theme_mode_builder_example_app.dart';
Future<void> main() async {
/// 确保小部件已初始化
WidgetsFlutterBinding.ensureInitialized();
/// 初始化主题模式构建器
await ThemeModeBuilderConfig.ensureInitialized(
/// 为了与旧版本向后兼容 :D
subDir: "Theme Mode Builder Example",
);
/// 运行应用 :)
runApp(ThemeModeBuilderExampleApp());
}
希望这些信息对你有帮助!如果你有任何问题或需要进一步的帮助,请随时提问。
更多关于Flutter主题模式管理插件theme_mode_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter主题模式管理插件theme_mode_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个使用 theme_mode_builder
插件在 Flutter 中管理主题模式的示例代码。theme_mode_builder
插件简化了主题模式(亮色、暗色和系统默认)的管理。以下示例展示了如何设置和使用这个插件。
首先,确保在 pubspec.yaml
文件中添加依赖:
dependencies:
flutter:
sdk: flutter
theme_mode_builder: ^latest_version # 请替换为最新版本号
然后,运行 flutter pub get
以获取依赖。
接下来,编写 Flutter 应用代码:
import 'package:flutter/material.dart';
import 'package:theme_mode_builder/theme_mode_builder.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ThemeModeBuilder(
builder: (context, themeMode) {
// 定义主题数据
final ThemeData lightTheme = ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
// 其他主题配置...
);
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
// 其他主题配置...
);
// 根据 themeMode 返回相应的主题
final ThemeData theme = themeMode == ThemeMode.light
? lightTheme
: themeMode == ThemeMode.dark
? darkTheme
: ThemeData.from(colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey)) // 系统默认主题,这里仅为示例
.copyWith(
// 根据需要调整系统默认主题
);
return MaterialApp(
title: 'Flutter Theme Mode Example',
theme: theme,
home: HomeScreen(),
);
},
initialThemeMode: ThemeMode.system, // 初始主题模式:系统默认、亮色或暗色
// storage: ThemeModeStorage(), // 可选:持久化存储主题模式,需要引入相关依赖和配置
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Theme Mode Manager'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
ThemeModeBuilder.of(context).setThemeMode(ThemeMode.light);
},
child: Text('Set Light Theme'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
ThemeModeBuilder.of(context).setThemeMode(ThemeMode.dark);
},
child: Text('Set Dark Theme'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
ThemeModeBuilder.of(context).setThemeMode(ThemeMode.system);
},
child: Text('Set System Theme'),
),
],
),
),
);
}
}
在这个示例中:
- 使用
ThemeModeBuilder
包装MaterialApp
,并定义了一个构建函数,根据当前的themeMode
返回相应的ThemeData
。 - 定义了
lightTheme
和darkTheme
两个主题。 - 在
HomeScreen
中,通过ThemeModeBuilder.of(context)
获取ThemeModeBuilder
实例,并提供按钮来切换主题模式。
这个示例展示了如何使用 theme_mode_builder
插件来管理 Flutter 应用中的主题模式。如果需要持久化存储主题模式,可以使用 ThemeModeStorage
(示例中已注释掉,因为需要额外的配置和依赖)。