Flutter日夜主题切换插件day_night_themed_switch的使用
Flutter日夜主题切换插件 day_night_themed_switch
的使用
day_night_themed_switch
是一个自定义的开关控件,支持日间和夜间主题切换。该控件基于Instagram上的UX设计。
插件展示
安装
在你的 pubspec.yaml
文件中的 dependencies:
部分添加以下行:
dependencies:
day_night_themed_switch: <latest_version>
请将 <latest_version>
替换为最新的版本号。你可以在 pub.dev 上找到最新版本。
使用方法
导入包
首先,导入 day_night_themed_switch
包:
import 'package:day_night_themed_switch/day_night_themed_switch.dart';
示例代码
下面是一个完整的示例 Demo,演示如何在Flutter应用中使用 DayNightSwitch
控件进行日夜主题切换:
import 'package:day_night_themed_switch/day_night_themed_switch.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isDarkMode = false;
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: "Day Night Switch",
debugShowCheckedModeBanner: false,
theme: ThemeData(
scaffoldBackgroundColor: isDarkMode ? const Color(0xff121212) : const Color(0xffd1d9e6),
),
home: Scaffold(
appBar: AppBar(
title: Text(isDarkMode ? "Night Mode" : "Day Mode"),
backgroundColor: isDarkMode ? Colors.black87 : Colors.blue,
),
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 100,
child: DayNightSwitch(
value: isDarkMode,
onChanged: (value) {
setState(() {
isDarkMode = value;
});
},
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
isDarkMode ? "当前是夜间模式" : "当前是日间模式",
style: TextStyle(fontSize: 24, color: isDarkMode ? Colors.white : Colors.black),
),
)
],
),
),
),
),
);
}
}
更多关于Flutter日夜主题切换插件day_night_themed_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter日夜主题切换插件day_night_themed_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用 day_night_themed_switch
插件来实现 Flutter 应用中的日夜主题切换的示例代码。
首先,确保你已经在 pubspec.yaml
文件中添加了 day_night_themed_switch
依赖:
dependencies:
flutter:
sdk: flutter
day_night_themed_switch: ^latest_version # 请替换为最新版本号
然后运行 flutter pub get
来获取依赖。
接下来,让我们编写一个简单的 Flutter 应用,其中包含日夜主题切换功能。
主文件 main.dart
import 'package:flutter/material.dart';
import 'package:day_night_themed_switch/day_night_themed_switch.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Day Night Theme Switch',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blueGrey,
),
themeMode: ThemeMode.system, // 默认跟随系统主题
home: ThemeSwitcher(),
);
}
}
class ThemeSwitcher extends StatefulWidget {
@override
_ThemeSwitcherState createState() => _ThemeSwitcherState();
}
class _ThemeSwitcherState extends State<ThemeSwitcher> {
ThemeMode _currentThemeMode = ThemeMode.system;
void _setThemeMode(ThemeMode themeMode) {
setState(() {
_currentThemeMode = themeMode;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Day Night Theme Switch'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DayNightThemedSwitch(
value: _currentThemeMode,
onChanged: (ThemeMode value) {
_setThemeMode(value);
// 更新整个应用的主题模式
final MaterialApp app = context.findAncestorWidgetOfExactType<MaterialApp>()!;
app.themeMode = value;
},
),
SizedBox(height: 20),
Text(
'Current Theme Mode: $_currentThemeMode',
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
解释
-
MaterialApp: 在
MyApp
中,我们定义了theme
和darkTheme
,分别表示亮模式和暗模式的主题设置。themeMode
被初始化为ThemeMode.system
,表示默认跟随系统主题。 -
ThemeSwitcher: 这是一个有状态的组件,用于管理当前的主题模式状态。它包含一个
DayNightThemedSwitch
,该开关允许用户切换主题模式。 -
DayNightThemedSwitch: 该组件用于显示当前的主题模式并提供一个开关供用户切换。当用户切换主题模式时,
onChanged
回调被触发,更新_currentThemeMode
状态,并重新构建界面。 -
更新应用主题: 在
onChanged
回调中,我们通过context.findAncestorWidgetOfExactType<MaterialApp>()
找到最近的MaterialApp
祖先组件,并更新其themeMode
属性。注意,这部分代码是假设DayNightThemedSwitch
组件位于MaterialApp
的子树中。如果实际布局复杂,可能需要其他方法来通知MaterialApp
更新主题模式。
请注意,直接修改 MaterialApp
的 themeMode
属性可能不是最佳实践,因为它违反了 Flutter 的不可变数据原则。在实际应用中,你可能会希望使用 Provider
或其他状态管理库来管理应用主题状态。
希望这个示例对你有帮助!如果有其他问题,请随时提问。