Flutter设置清理插件clean_settings的使用
Flutter设置清理插件clean_settings的使用
clean_settings简介
clean_settings 是一个用于生成设置界面的Flutter插件，它提供了默认配置，并包含丰富的组件以满足各种需求。通过该插件，您可以轻松创建设置页面，而无需重复编写繁琐的代码。
特性
- 设置分组：支持将设置项分组。
- 内置多种类型的组件：包括复选框、开关、单选按钮、文本输入等。
- 只读项：可以定义只读的设置项。
支持的组件
以下是一些常见的组件及其示例：
1. 复选框（Checkbox）
SettingCheckboxItem(
title: 'Smart Reply',
value: smartReply,
onChanged: (v) => setState(() => smartReply = v),
description: 'Show suggested replies when available'),
2. 开关（Switch）
SettingSwitchItem(
title: 'Smart Compose',
value: smartCompose,
onChanged: (v) => setState(() => smartCompose = v),
description: 'Show predictive writing suggestions',
priority: ItemPriority.high,
),
3. 单选按钮（Radio Picker）
SettingRadioItem<String>(
title: 'Theme',
displayValue: '$theme theme',
selectedValue: theme,
items: [
SettingRadioValue('Light', 'Light'),
SettingRadioValue('Dark', 'Dark'),
SettingRadioValue('System Default', 'System Default'),
],
onChanged: (v) => setState(() => theme = v),
),
4. 文本输入（Text Input）
SettingTextItem(
title: 'Auto Reply Message',
displayValue: autoReplyMessage,
initialValue: autoReplyMessage,
hintText: 'Sent by system on away',
onChanged: (v) => setState(() => autoReplyMessage = v),
),
5. 日期时间选择器（Date and Time Picker）
SettingDateTimeItem<DateTime>(
title: 'Next Scheduled Email At',
displayValue: scheduledEmailSlug,
onChanged: (v) => setState(() => scheduledEmailDateTime = v),
),
6. 日期选择器（Date Picker）
SettingDateTimeItem<DateTime>(
title: 'Date of birth',
displayValue: dateOfBirthSlug,
onChanged: (v) => setState(() => dateOfBirth = v),
timePicker: false,
),
7. 时间选择器（Time Picker）
SettingDateTimeItem<TimeOfDay>(
title: 'Daily wake up email',
displayValue: dailyEmailAt.format(context),
onChanged: (v) => setState(() => dailyEmailAt = v),
datePicker: false,
),
8. 轮盘选择器（Wheel - Number List）
SettingWheelPickerItem(
title: 'Days of mail to sync',
displayValue: daysOfMailToSync.toString(),
initialValueIndex: daysOfMailToSync,
items: List.generate(10, (index) => index.toString()),
onChanged: (v) => setState(() => daysOfMailToSync = v),
),
9. 确认对话框（Confirm Dialog）
SettingConfirmItem(
title: 'Delete account',
displayValue: 'Permanently deletes your account',
alertTitle: 'Delete your account',
alertMessage: 'Are you sure?',
priority: ItemPriority.high,
onConfirm: () => {},
onCancel: () => {},
),
结构
clean_settings 的结构如下：
Root - SettingContainer
\
\_ SettingSection
\
\_ SettingItem (or Variants)
常用选项
优先级（priority）
可以通过 priority 设置项的优先级，可选值为：
ItemPriority.high- 显示红色ItemPriority.normal- 默认颜色ItemPriority.low- 显示绿色ItemPriority.disabled- 禁用项
示例代码
以下是一个完整的示例代码，展示如何使用 clean_settings 创建一个简单的设置页面：
import 'package:clean_settings/clean_settings.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget {
[@override](/user/override)
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int counter = 0;
String theme = 'System Default';
bool smartReply = false;
String autoReplyMessage;
int daysOfMailToSync = 5;
int chosenReplyOptionIndex = 1;
DateTime dateOfBirth = DateTime.now();
DateTime scheduledEmailDateTime = DateTime.now();
TimeOfDay dailyEmailAt = TimeOfDay(hour: 9, minute: 0);
bool disableDemoItems = false;
bool smartCompose = true;
[@override](/user/override)
Widget build(BuildContext context) {
String dateOfBirthSlug =
"${dateOfBirth.year.toString()}-${dateOfBirth.month.toString().padLeft(2, '0')}-${dateOfBirth.day.toString().padLeft(2, '0')}";
String scheduledEmailSlug =
"${scheduledEmailDateTime.year.toString()}-${scheduledEmailDateTime.month.toString().padLeft(2, '0')}-${scheduledEmailDateTime.day.toString().padLeft(2, '0')} ${scheduledEmailDateTime.hour.toString().padLeft(2, '0')}:${scheduledEmailDateTime.minute.toString().padLeft(2, '0')}";
var replyOptions = ['Reply', 'Reply All', 'Last Chosen', 'None'];
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text(
'App Settings',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w300,
color: Colors.black87),
),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0,
),
body: Container(
child: SettingContainer(
sections: [
SettingSection(
title: 'Demo Options',
items: [
SettingCheckboxItem(
title: 'Disable all items',
description: 'Disabled all demo options',
priority: ItemPriority.high,
value: disableDemoItems,
onChanged: (v) => setState(() => disableDemoItems = v),
),
],
),
SettingSection(
title: 'Appearance',
items: [
SettingItem(
title: 'Simple Counter',
displayValue: counter.toString(),
onTap: () => setState(() => counter++),
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingItem(
title: 'Launch Unicorn Startup',
displayValue: 'Raise billions',
onTap: () => setState(() => counter++),
priority: ItemPriority.disabled,
),
SettingRadioItem<String>(
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
title: 'Theme',
displayValue: '$theme theme',
selectedValue: theme,
items: [
SettingRadioValue('Light', 'Light'),
SettingRadioValue('Dark', 'Dark'),
SettingRadioValue('System Default', 'System Default'),
],
onChanged: (v) => setState(() => theme = v),
),
],
),
SettingSection(
title: 'Interactive',
items: [
SettingConfirmItem(
title: 'Delete account',
displayValue: 'Permanently deletes your account',
alertTitle: 'Delete your account',
alertMessage: 'Are you sure?',
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.high,
onConfirm: () => _scaffoldKey.currentState.showSnackBar(
SnackBar(
content: Text('Confirmed!'),
duration: Duration(seconds: 3))),
onCancel: () => _scaffoldKey.currentState.showSnackBar(
SnackBar(
content: Text('Canceled!'),
duration: Duration(seconds: 3))),
),
SettingRadioItem<String>(
title: 'Theme',
displayValue: '$theme theme',
selectedValue: theme,
items: [
SettingRadioValue('Light', 'Light'),
SettingRadioValue('Dark', 'Dark'),
SettingRadioValue('System Default', 'System Default'),
],
onChanged: (v) => setState(() => theme = v),
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
],
),
SettingSection(
title: 'Inbox',
items: [
SettingCheckboxItem(
title: 'Smart Reply',
value: smartReply,
onChanged: (v) => setState(() => smartReply = v),
description: 'Show suggested replies when available',
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingSwitchItem(
title: 'Smart Compose',
value: smartCompose,
onChanged: (v) => setState(() => smartCompose = v),
description: 'Show predictive writing suggestions',
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingTextItem(
title: 'Auto Reply Message',
displayValue: autoReplyMessage,
initialValue: autoReplyMessage,
hintText: 'Sent by system on away',
onChanged: (v) => setState(() => autoReplyMessage = v),
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingWheelPickerItem(
title: 'Days of mail to sync',
displayValue: daysOfMailToSync.toString(),
initialValueIndex: daysOfMailToSync,
items: List.generate(10, (index) => index.toString()),
onChanged: (v) => setState(() => daysOfMailToSync = v),
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingWheelPickerItem(
title: 'Default reply action',
displayValue: replyOptions[chosenReplyOptionIndex],
initialValueIndex: chosenReplyOptionIndex,
items: replyOptions,
onChanged: (v) => setState(() => chosenReplyOptionIndex = v),
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingDateTimeItem<DateTime>(
title: 'Next Scheduled Email At',
displayValue: scheduledEmailSlug,
onChanged: (v) => setState(() => scheduledEmailDateTime = v),
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingDateTimeItem<DateTime>(
title: 'Date of birth',
displayValue: dateOfBirthSlug,
onChanged: (v) => setState(() => dateOfBirth = v),
timePicker: false,
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
SettingDateTimeItem<TimeOfDay>(
title: 'Daily wake up email',
displayValue: dailyEmailAt.format(context),
onChanged: (v) => setState(() => dailyEmailAt = v),
datePicker: false,
priority: disableDemoItems
? ItemPriority.disabled
: ItemPriority.normal,
),
],
),
],
),
),
);
}
}
更多关于Flutter设置清理插件clean_settings的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter设置清理插件clean_settings的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
clean_settings 是一个用于在 Flutter 应用中管理应用设置的插件。它可以帮助你轻松地存储和检索应用设置，并且支持清理这些设置。以下是如何在 Flutter 项目中使用 clean_settings 插件的步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 clean_settings 插件的依赖：
dependencies:
flutter:
sdk: flutter
clean_settings: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入插件
在你的 Dart 文件中导入 clean_settings 插件：
import 'package:clean_settings/clean_settings.dart';
3. 使用 CleanSettings
CleanSettings 提供了几个方法来管理应用设置：
- 保存设置：使用
set方法保存键值对。 - 获取设置：使用
get方法获取保存的值。 - 删除设置：使用
remove方法删除指定的键。 - 清理所有设置：使用
clear方法清理所有保存的设置。
示例代码
import 'package:flutter/material.dart';
import 'package:clean_settings/clean_settings.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'CleanSettings Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SettingsDemo(),
);
}
}
class SettingsDemo extends StatefulWidget {
[@override](/user/override)
_SettingsDemoState createState() => _SettingsDemoState();
}
class _SettingsDemoState extends State<SettingsDemo> {
String _savedValue = '';
[@override](/user/override)
void initState() {
super.initState();
_loadSavedValue();
}
void _loadSavedValue() async {
String value = await CleanSettings.get('myKey', defaultValue: 'No value saved');
setState(() {
_savedValue = value;
});
}
void _saveValue(String value) async {
await CleanSettings.set('myKey', value);
_loadSavedValue();
}
void _removeValue() async {
await CleanSettings.remove('myKey');
_loadSavedValue();
}
void _clearAll() async {
await CleanSettings.clear();
_loadSavedValue();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CleanSettings Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Saved Value: $_savedValue'),
TextField(
onSubmitted: _saveValue,
decoration: InputDecoration(
labelText: 'Enter a value to save',
),
),
ElevatedButton(
onPressed: _removeValue,
child: Text('Remove Value'),
),
ElevatedButton(
onPressed: _clearAll,
child: Text('Clear All Settings'),
),
],
),
),
);
}
}