Flutter主题管理插件nui_theme的使用
Flutter主题管理插件nui_theme的使用
nui_theme
是一个用于 Flutter 的主题管理插件。它可以帮助开发者轻松地管理和切换应用的主题样式。
获取开始
安装插件
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
nui_theme: ^0.1.0
然后运行以下命令以获取依赖项:
flutter pub get
使用示例
以下是一个完整的示例,展示如何使用 nui_theme
插件来管理应用的主题。
主题定义
首先,我们需要定义一些主题样式。这些样式可以包括颜色、字体大小等。
import 'package:flutter/material.dart';
import 'package:nui_theme/nui_theme.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
// 定义两个主题
final lightTheme = ThemeData(
primaryColor: Colors.blue,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.black),
),
);
final darkTheme = ThemeData(
primaryColor: Colors.grey[800],
scaffoldBackgroundColor: Colors.grey[900],
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.white),
),
);
return ThemeProvider(
initialTheme: lightTheme, // 初始主题为亮色主题
themes: [lightTheme, darkTheme], // 可用主题列表
child: MaterialApp(
title: 'nui_theme 示例',
theme: ThemeProvider.themeOf(context), // 使用当前主题
home: MyHomePage(),
),
);
}
}
切换主题
在应用中,我们可以通过按钮或其他交互方式来切换主题。
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('nui_theme 示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'当前主题:${ThemeProvider.themeOf(context).primaryColor}',
style: Theme.of(context).textTheme.bodyText1,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 切换到下一个主题
ThemeProvider.of(context).switchTheme();
},
child: Text('切换主题'),
),
],
),
),
);
}
}
1 回复
更多关于Flutter主题管理插件nui_theme的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
nui_theme
是一个用于 Flutter 的主题管理插件,它可以帮助开发者更轻松地管理和切换应用的主题。通过 nui_theme
,你可以定义多个主题,并在运行时动态切换它们。以下是如何使用 nui_theme
的基本步骤:
1. 添加依赖
首先,你需要在 pubspec.yaml
文件中添加 nui_theme
依赖:
dependencies:
flutter:
sdk: flutter
nui_theme: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get
来安装依赖。
2. 定义主题
你可以定义多个主题,每个主题可以包含不同的颜色、字体、样式等。
import 'package:nui_theme/nui_theme.dart';
final lightTheme = AppTheme(
primaryColor: Colors.blue,
accentColor: Colors.blueAccent,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.black),
bodyText2: TextStyle(color: Colors.black87),
),
);
final darkTheme = AppTheme(
primaryColor: Colors.indigo,
accentColor: Colors.indigoAccent,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.white),
bodyText2: TextStyle(color: Colors.white70),
),
);
3. 初始化主题管理
在你的应用启动时,初始化 nui_theme
并设置默认主题。
import 'package:flutter/material.dart';
import 'package:nui_theme/nui_theme.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return ThemeManager(
defaultTheme: lightTheme,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeManager.of(context).themeData,
home: MyHomePage(),
),
);
}
}
4. 切换主题
你可以在应用的任何地方通过 ThemeManager
来切换主题。
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Theme Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, World!',
style: Theme.of(context).textTheme.bodyText1,
),
ElevatedButton(
onPressed: () {
ThemeManager.of(context).setTheme(lightTheme);
},
child: Text('Light Theme'),
),
ElevatedButton(
onPressed: () {
ThemeManager.of(context).setTheme(darkTheme);
},
child: Text('Dark Theme'),
),
],
),
),
);
}
}
5. 使用主题
在应用的其他部分,你可以通过 Theme.of(context)
来获取当前主题的样式。
Text(
'This is some text',
style: Theme.of(context).textTheme.bodyText1,
);
6. 保存主题偏好
你还可以将用户选择的主题偏好保存到本地存储中,以便在应用重启时恢复用户的选择。
import 'package:shared_preferences/shared_preferences.dart';
Future<void> saveThemePreference(String themeName) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setString('theme', themeName);
}
Future<AppTheme> loadThemePreference() async {
final prefs = await SharedPreferences.getInstance();
final themeName = prefs.getString('theme') ?? 'light';
return themeName == 'light' ? lightTheme : darkTheme;
}
在应用启动时加载保存的主题:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final savedTheme = await loadThemePreference();
runApp(MyApp(savedTheme));
}
class MyApp extends StatelessWidget {
final AppTheme savedTheme;
MyApp(this.savedTheme);
[@override](/user/override)
Widget build(BuildContext context) {
return ThemeManager(
defaultTheme: savedTheme,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeManager.of(context).themeData,
home: MyHomePage(),
),
);
}
}