Flutter iOS风格设置控制插件cupertino_setting_control的使用
Flutter Cupertino Setting Control
With cupertino_setting_control you can create a settings page or a simple form very easily. This package offers multiple Cupertino widgets that can be used flexibly and abstracted.
Quick Usage
Example for a Drop Down Widget Displayed as Text Field
new SettingRow(
rowData: SettingsDropDownConfig(
title: 'Search Area',
initialKey: _searchAreaResult,
choices: {
'Germany': 'Germany',
'Spain': 'Spain',
'France': 'France'
}),
onSettingDataRowChange: onSearchAreaChange,
config: const SettingsRowConfiguration(
showAsTextField: true,
showTitleLeft: false,
showAsSingleSetting: false),
)
Example for a Yes/No Widget with a Setting Title on the Left Side
new SettingRow(
rowData: SettingsYesNoConfig(
initialValue: _chatResult, title: 'Allow Chat'),
onSettingDataRowChange: onChatSettingChange,
),
A complete tutorial on how to use Cupertino Setting Control can be found here.
Please refer to the example for more examples: Quick-Link.
Bugs/Requests
If you encounter any problems, feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub, and I’ll look into it. Pull requests are also welcome.
Complete Example
Here is a complete example demonstrating the usage of cupertino_setting_control:
import 'package:cupertino_setting_control/cupertino_setting_control.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(ExampleApp());
class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => new _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
bool _chatResult = true;
String _searchAreaResult = 'Germany';
bool _titleOnTop = false;
@override
Widget build(BuildContext context) {
final titleOnTopSwitch = SettingRow(
rowData: SettingsYesNoConfig(
initialValue: _titleOnTop, title: 'Title on top'),
config: const SettingsRowConfiguration(showAsSingleSetting: true),
onSettingDataRowChange: (newVal) => setState(() {
_titleOnTop = newVal;
}));
final legalStuff = new Material(
color: Colors.transparent,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: const EdgeInsets.fromLTRB(25.0, 5.0, 25.0, 5.0),
child: const Text('Legal',
style: TextStyle(
color: CupertinoColors.systemBlue,
fontWeight: FontWeight.bold,
fontSize: 15.0,
))),
new SettingRow(
config: SettingsRowConfiguration(
showTitleLeft: !_titleOnTop, showTopTitle: _titleOnTop),
rowData: SettingsURLConfig(
title: 'Privacy', url: 'https://yourprivacystuff.de'),
onSettingDataRowChange: () => {},
),
SizedBox(height: _titleOnTop ? 10.0 : 0.0),
new SettingRow(
config: SettingsRowConfiguration(
showTitleLeft: !_titleOnTop, showTopTitle: _titleOnTop),
rowData: SettingsButtonConfig(
title: 'Licenses',
tick: true,
functionToCall: () => showLicensePage(
context: context,
applicationName: 'example',
applicationVersion: 'v1.1',
useRootNavigator: true)),
onSettingDataRowChange: () => {},
),
],
),
);
final privacySettings = new Material(
color: Colors.transparent,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: EdgeInsets.fromLTRB(25.0, 5.0, 25.0, 5.0),
child: const Text(
'Privacy Settings',
style: TextStyle(
color: CupertinoColors.systemBlue,
fontWeight: FontWeight.bold,
fontSize: 15.0,
),
)),
new SettingRow(
config: SettingsRowConfiguration(
showTitleLeft: !_titleOnTop, showTopTitle: _titleOnTop),
rowData: SettingsYesNoConfig(
initialValue: _chatResult, title: 'Allow Chat'),
onSettingDataRowChange: onChatSettingChange,
),
],
),
);
final profileSettingsTile = new Material(
color: Colors.transparent,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: EdgeInsets.fromLTRB(25.0, 5.0, 25.0, 5.0),
child: const Text(
'Profile',
style: TextStyle(
color: CupertinoColors.systemBlue,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
)),
new SettingRow(
rowData: SettingsDropDownConfig(
title: 'User Area',
initialKey: _searchAreaResult,
choices: {
'Germany': 'Germany',
'Spain': 'Spain',
'France': 'France'
},
onDropdownFinished: () => {}),
onSettingDataRowChange: onSearchAreaChange,
config: SettingsRowConfiguration(
showAsTextField: false,
showTitleLeft: !_titleOnTop,
showTopTitle: _titleOnTop,
showAsSingleSetting: false),
),
SizedBox(height: _titleOnTop ? 10.0 : 0.0),
new SettingRow(
rowData: SettingsSliderConfig(
title: 'Age',
from: 18,
to: 120,
initialValue: 20,
justIntValues: true,
unit: ' years',
),
onSettingDataRowChange: (double resultVal) {},
config: SettingsRowConfiguration(
showAsTextField: false,
showTitleLeft: !_titleOnTop,
showTopTitle: _titleOnTop,
showAsSingleSetting: false),
),
SizedBox(height: _titleOnTop ? 10.0 : 0.0),
new SettingRow(
rowData: SettingsSliderFromToConfig(
title: 'Weight',
from: 40,
to: 120,
initialFrom: 50,
initialTo: 80,
justIntValues: true,
unit: 'kg',
),
onSettingDataRowChange: (List<double> resultVals) {},
config: SettingsRowConfiguration(
showAsTextField: false,
showTitleLeft: !_titleOnTop,
showTopTitle: _titleOnTop,
showAsSingleSetting: false),
),
SizedBox(height: _titleOnTop ? 10.0 : 0.0),
new SettingRow(
rowData: SettingsTextFieldConfig(
title: 'Name',
initialValue: 'Chris',
),
onSettingDataRowChange: (String resultVal) {},
config: SettingsRowConfiguration(
showAsTextField: false,
showTitleLeft: !_titleOnTop,
showTopTitle: _titleOnTop,
showAsSingleSetting: false),
),
],
),
);
final modifyProfileTile = new Material(
color: Colors.transparent,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: EdgeInsets.fromLTRB(25.0, 5.0, 25.0, 5.0),
child: const Text(
'Profile Options',
style: TextStyle(
color: CupertinoColors.systemBlue,
fontWeight: FontWeight.bold,
fontSize: 15.0,
),
)),
SettingRow(
rowData: SettingsButtonConfig(
title: 'Delete Profile',
tick: true,
functionToCall: () {},
),
style: const SettingsRowStyle(
backgroundColor: CupertinoColors.lightBackgroundGray),
config: SettingsRowConfiguration(
showAsTextField: false,
showTitleLeft: !_titleOnTop,
showTopTitle: _titleOnTop,
showAsSingleSetting: false),
onSettingDataRowChange: () => {},
)
]));
final List<Widget> widgetList = [
titleOnTopSwitch,
const SizedBox(height: 15.0),
profileSettingsTile,
const SizedBox(height: 15.0),
privacySettings,
const SizedBox(height: 15.0),
legalStuff,
const SizedBox(height: 15.0),
Row(children: [Expanded(child: modifyProfileTile)]),
];
return new Scaffold(
body: Padding(
padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
child: ListView(
children: widgetList,
physics: const AlwaysScrollableScrollPhysics())),
);
}
// ignore: avoid_positional_boolean_parameters
void onChatSettingChange(bool data) {
setState(() {
_chatResult = data;
});
}
void onSearchAreaChange(String data) {
setState(() {
_searchAreaResult = data;
});
}
}
This example demonstrates how to create a settings page with various types of settings rows, including dropdowns, sliders, and yes/no switches. The SettingRow widget is used to encapsulate different types of settings configurations, making it easy to create a consistent and user-friendly settings interface.
更多关于Flutter iOS风格设置控制插件cupertino_setting_control的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter iOS风格设置控制插件cupertino_setting_control的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用cupertino_settings_control插件来创建iOS风格的设置控制项的示例代码。请注意，cupertino_settings_control并非Flutter官方插件，假设该插件已经存在于pub.dev上，且其API类似于常见的iOS设置项。
首先，确保你已经在pubspec.yaml文件中添加了依赖项：
dependencies:
flutter:
sdk: flutter
cupertino_settings_control: ^最新版本号 # 请替换为实际版本号
然后运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter应用中使用这些控件。以下是一个示例代码，展示如何创建一个包含开关和文本字段的设置页面：
import 'package:flutter/material.dart';
import 'package:cupertino_settings_control/cupertino_settings_control.dart'; // 假设包名正确
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Cupertino Settings Control Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CupertinoSettingsScreen(),
);
}
}
class CupertinoSettingsScreen extends StatefulWidget {
@override
_CupertinoSettingsScreenState createState() => _CupertinoSettingsScreenState();
}
class _CupertinoSettingsScreenState extends State<CupertinoSettingsScreen> {
bool _switchValue = false;
String _textFieldValue = '';
void _onSwitchChanged(bool value) {
setState(() {
_switchValue = value;
});
}
void _onTextFieldChanged(String value) {
setState(() {
_textFieldValue = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cupertino Settings Control Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CupertinoSettingsSwitch(
title: Text('Enable Feature'),
value: _switchValue,
onChanged: _onSwitchChanged,
),
SizedBox(height: 16.0),
CupertinoSettingsTextField(
title: Text('Enter Name'),
value: _textFieldValue,
onChanged: _onTextFieldChanged,
),
],
),
),
);
}
}
// 假设cupertino_settings_control提供了以下两个控件
// 如果实际的包名或控件名不同，请根据实际情况调整
class CupertinoSettingsSwitch extends StatelessWidget {
final String title;
final bool value;
final ValueChanged<bool> onChanged;
const CupertinoSettingsSwitch({
Key key,
@required this.title,
@required this.value,
@required this.onChanged,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoFormSection.cupertinoFormRow(
prefix: title,
child: CupertinoSwitch(
value: value,
onChanged: onChanged,
),
);
}
}
class CupertinoSettingsTextField extends StatelessWidget {
final String title;
final String value;
final ValueChanged<String> onChanged;
const CupertinoSettingsTextField({
Key key,
@required this.title,
@required this.value,
@required this.onChanged,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoFormSection.cupertinoFormRow(
prefix: title,
child: CupertinoTextField(
placeholder: 'Enter value',
textCapitalization: TextCapitalization.sentences,
value: value,
onChanged: onChanged,
),
);
}
}
请注意，上述代码中的CupertinoSettingsSwitch和CupertinoSettingsTextField是假设的控件，实际的cupertino_settings_control插件可能提供不同的控件名称或API。因此，你可能需要参考该插件的官方文档或源代码来调整上述代码。
如果cupertino_settings_control插件不存在或API不同，你可以考虑使用Flutter自带的CupertinoSwitch和CupertinoTextField控件，并结合CupertinoFormSection和CupertinoFormRow来创建类似的iOS风格设置项。
