Flutter明暗主题切换插件dark_light_button的使用
Flutter明暗主题切换插件dark_light_button的使用
dark_light_button
dark_light_button
是一个包含用于在深色和浅色主题之间切换的现成小部件的 Flutter 包。
安装
要安装此包,在 pubspec.yaml
文件中添加 dark_light_button
作为依赖项。
dependencies:
dark_light_button: ^x.x.x
运行 flutter pub get
以获取新依赖项。
使用
你需要使用 DarlightButton
小部件,然后就可以完成主题切换了!
DarlightButton(
onChange: (ThemeMode theme) {
// 更改你的主题
},
),
你可以通过使用 type
属性来改变小部件的类型,该属性接受一个 Darlights
枚举作为参数。目前有三种类型的 darlight
按钮可用,并且很快会有更多类型。
DarlightButton(
type: Darlights.DarlightThree,
onChange: (ThemeMode theme) {
// 更改你的主题
},
),
可选参数
height
作为double
类型,表示小部件的高度。animationDuration
作为Duration
类型,控制动画的持续时间。options
是扩展自DarlightOption
的类。此属性根据每个按钮名称命名。 例如,对于Darlights.DarlightThree
,你必须提供DarlightThreeOption
。 每个选项包含特定于小部件的属性,如背景颜色等。
示例
示例 1
DarlightButton(
type: Darlights.DarlightOne,
onChange: (ThemeMode theme) {
// 更改你的主题
},
options: DarlightOneOption()
)
示例 2
DarlightButton(
type: Darlights.DarlightTwo,
onChange: (ThemeMode theme) {
// 更改你的主题
},
options: DarlightTwoOption()
)
示例 3
DarlightButton(
type: Darlights.DarlightThree,
onChange: (ThemeMode theme) {
// 更改你的主题
},
options: DarlightThreeOption()
)
示例 4
DarlightButton(
type: Darlights.DarlightFour,
onChange: (ThemeMode theme) {
// 更改你的主题
},
options: DarlightFourOption()
)
示例代码
以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:dark_light_button/dark_light_button.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dark Light Button Demo',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ThemeMode currentTheme = ThemeMode.light;
void toggleTheme() {
setState(() {
currentTheme = currentTheme == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dark Light Button Demo'),
),
body: Center(
child: DarlightButton(
type: Darlights.DarlightOne,
onChange: (ThemeMode theme) {
toggleTheme();
},
options: DarlightOneOption(),
),
),
);
}
}
更多关于Flutter明暗主题切换插件dark_light_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter明暗主题切换插件dark_light_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用 dark_light_button
插件在 Flutter 应用中实现明暗主题切换的代码案例。
首先,确保你已经在 pubspec.yaml
文件中添加了 dark_light_button
依赖:
dependencies:
flutter:
sdk: flutter
dark_light_button: ^latest_version # 请替换为最新版本号
然后,运行 flutter pub get
来获取依赖。
接下来,我们将编写一个示例应用,展示如何使用 dark_light_button
插件来切换明暗主题。
main.dart
import 'package:flutter/material.dart';
import 'package:dark_light_button/dark_light_button.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Dark Light Theme Switch',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blueGrey,
),
themeMode: ThemeMode.system, // 初始主题模式,这里设置为系统主题
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
ThemeMode _currentThemeMode = ThemeMode.system;
@override
void initState() {
super.initState();
WidgetsBinding.instance!.addObserver(this);
}
@override
void dispose() {
WidgetsBinding.instance!.removeObserver(this);
super.dispose();
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
// 当应用从后台恢复时,可以重新获取系统主题模式
_currentThemeMode = ThemeMode.system;
// 更新主题模式(可选,如果需要立即响应系统主题变化)
// setState(() {});
}
}
void _toggleThemeMode() {
setState(() {
if (_currentThemeMode == ThemeMode.light) {
_currentThemeMode = ThemeMode.dark;
} else if (_currentThemeMode == ThemeMode.dark) {
_currentThemeMode = ThemeMode.light;
} else {
// ThemeMode.system, 切换为手动设置的主题(例如 light 或 dark)
_currentThemeMode = ThemeMode.light; // 或者 ThemeMode.dark,根据需要
}
});
// 保存主题模式到 SharedPreferences 或其他持久化存储(可选)
// SharedPreferences.getInstance().then((prefs) {
// prefs.setString('themeMode', _currentThemeMode.toString());
// });
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dark Light Theme Switch'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DarkLightButton(
isDarkMode: _currentThemeMode == ThemeMode.dark,
onToggle: _toggleThemeMode,
// 可选参数:自定义按钮样式
darkColor: Colors.black,
lightColor: Colors.white,
darkIcon: Icons.brightness_7,
lightIcon: Icons.brightness_4,
size: 50,
animationDuration: Duration(milliseconds: 300),
),
SizedBox(height: 20),
Text(
'Current Theme Mode: $_currentThemeMode',
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
解释
- 依赖引入:在
pubspec.yaml
文件中添加dark_light_button
依赖。 - 主题设置:在
MyApp
中定义了light
和dark
主题,并设置初始主题模式为ThemeMode.system
。 - 状态管理:在
MyHomePage
中使用StatefulWidget
和setState
来管理主题模式的状态。 - 明暗主题切换:通过
DarkLightButton
组件实现明暗主题的切换,并在_toggleThemeMode
方法中更新主题模式。 - 持久化存储:示例代码中注释了保存主题模式到
SharedPreferences
的部分,你可以根据需要取消注释并实现持久化存储。
这样,你就可以在 Flutter 应用中使用 dark_light_button
插件实现明暗主题的切换了。