Flutter平台设置管理插件cobi_flutter_platform_settings的使用

Flutter平台设置管理插件cobi_flutter_platform_settings的使用

cobi_flutter_platform_settings 是一个应用程序设置屏幕,通过 shared_preferences 包持久化保存值,并且使用 flutter_platform_widgets 进行平台集成。

开始使用

你可以在任何已经使用了 flutter_platform_widgets 的地方使用此插件。如果 flutter_platform_widgets 对你来说是新的,请先阅读其文档以了解如何开始使用。

注意: 此插件当前在iOS上仍使用一些Material组件,因此请确保将 iosUsesMaterialWidgets 设置为 true(参见这里)。这将在这个问题解决后进行更改。

所有小部件都有一个名为 settingsKey 的属性,用于存储它们到 shared_preferences 中,这样你可以从其他地方使用相同的键检索值。例外情况包括 PlatformSettingsScreen, PlatformSettingsGroupPlatformCustomSetting(这些用于启动导航路由或仅显示一些信息)。

小部件

PlatformSettingsScreen

PlatformSettingsScreen 是最顶层的设置容器。用它作为起点。

PlatformSettingsScreen (
  title: 'App Settings',
  children: [],
)
PlatformSettingsGroup

PlatformSettingsGroup 是一个包含多个设置的小部件。

PlatformSettingsGroup (
  title: 'First Group',
  children: [],
)
PlatformCustomSetting

PlatformCustomSetting 是一个可以触发操作的设置小部件,例如启动导航路由。

PlatformCustomSetting (
  title: 'My Custom Setting',
  subtitle: 'My subtitle',
  onPressed: () => debugPrint('hello world!'),
)
PlatformTextSetting

PlatformTextSetting 是一个显示文本框的小部件。

PlatformTextSetting<int>(
  settingsKey: 'text-setting-3',
  title: 'A text setting for integers only',
  keyboardType: TextInputType.number,
  defaultValue: 42000,
  validator: (value) {
    if (value == null || value < 1024 || value > 65536) {
      return 'Integer number between 1024 and 65536 expected';
    }
  },
),
PlatformSwitchSetting

PlatformSwitchSetting 是一个具有双态开关的小部件。

PlatformSwitchSetting(
  settingsKey: 'switch-setting',
  title: 'This is a switch setting',
  defaultValue: true,
)
PlatformCheckboxSetting

PlatformCheckboxSetting 是一个带有复选框的小部件(注意:在iOS上由于缺乏原生复选框,因此使用开关)。

PlatformCheckboxSetting(
  settingsKey: 'checkbox-setting',
  title: 'This is a checkbox setting',
  defaultValue: false,
),
PlatformRadioSetting

PlatformRadioSetting 显示一组单选按钮。

PlatformRadioSetting<int>(
  settingsKey:  'radio-setting',
  title:  'This is a radio setting',
  items: [
    PlatformListItem<int>(value: 1, caption: 'One'),
    PlatformListItem<int>(value: 2, caption: 'Two'),
    PlatformListItem<int>(value: 3, caption: 'Three'),
    PlatformListItem<int>(value: 4, caption: 'Four'),
    PlatformListItem<int>(value: 5, caption: 'Five'),
  ],
),
PlatformRadioModalSetting

PlatformRadioModalSetting 的单选按钮显示在一个对话框中。

PlatformRadioModalSetting<int>(
  settingsKey: 'radio-modal-setting',
  title: 'This is a modal radio setting',
  defaultValue: 5,
  items: [
    PlatformListItem<int>(value: 1, caption: 'One'),
    PlatformListItem<int>(value: 2, caption: 'Two'),
    PlatformListItem<int>(value: 3, caption: 'Three'),
    PlatformListItem<int>(value: 4, caption: 'Four'),
    PlatformListItem<int>(value: 5, caption: 'Five'),
    PlatformListItem<int>(value: 6, caption: 'Six'),
  ],
),
PlatformSliderSetting

PlatformSliderSetting 是一个带有滑块的小部件。

PlatformSliderSetting(
  settingsKey: 'slider-setting',
  title: 'This is a slider setting',
  minValue: 0.0,
  maxValue: 100.0,
  divisions: 100,
  defaultValue: 25.0,
),

你可以在包含的示例应用中找到更多使用案例。

扩展性

你可以通过继承 SettingsWidgetBase<T>SettingsWidgetBaseState<T, YourSettingsWidgetClass> 来定义自己的小部件,其中 T 是通过 shared_preferences 存储的类型。

如果你需要一个 shared_preferences 不支持的数据类型,你可以覆盖 SettingsWidgetBaseState::serialize()SettingsWidgetBaseState::deserialize() 方法来自己处理序列化。

注意: 序列化和反序列化在3.0版本中与2.0版本的工作方式不同。请查看包含的示例了解更多信息。

完整示例Demo

以下是一个完整的示例代码,展示了如何使用 cobi_flutter_platform_settings 插件:

import 'package:cobi_flutter_platform_settings/cobi_flutter_platform_settings.dart';
import 'package:cobi_flutter_platform_settings_example/types.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    
    final materialTheme = ThemeData(
      cupertinoOverrideTheme: CupertinoThemeData(
        primaryColor: Colors.indigo,
      ),
      colorScheme: ColorScheme.fromSwatch(
        primarySwatch: Colors.indigo,
        accentColor: Colors.indigoAccent
      )
    );

    return Theme(
      data: materialTheme,
      child: PlatformProvider(
        settings: PlatformSettingsData(iosUsesMaterialWidgets: true),
        builder: (context) => PlatformApp(
          localizationsDelegates: <LocalizationsDelegate<dynamic>>[
            DefaultMaterialLocalizations.delegate,
            DefaultWidgetsLocalizations.delegate,
            DefaultCupertinoLocalizations.delegate,
          ],
          title: 'Flutter Platform Widgets',
          home: MyHomePage(),
          material: (_, __) => MaterialAppData(
            theme: materialTheme,
          ),
          cupertino: (_, __) => CupertinoAppData(
            theme: CupertinoThemeData(
              primaryColor: Color(0xff127EFB),
            ),
          ),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text('Platform Settings Example'),
      ),
      body: PlatformSettingsScreen(
        title: 'App Settings',
        children: [
          PlatformSettingsGroup(
            title: 'Switchable Settings',
            children: [
              PlatformSwitchSetting(
                settingsKey: 'switch-setting',
                title: 'This is a switch setting',
                defaultValue: true
              ),
              PlatformCheckboxSetting(
                settingsKey: 'checkbox-setting',
                title: 'This is a checkbox setting',
                defaultValue: false,
              ),
            ],
          ),
          PlatformSettingsGroup(
            title: 'Text Settings',
            children: [
              PlatformTextSetting<String>(
                settingsKey: 'text-setting',
                title: 'A text setting with default keyboard type',
              ),
              PlatformTextSetting<String>(
                settingsKey: 'text-setting-2',
                title: 'This a text setting with a specified subtitle',
                subtitle: 'This is a subtitle'
              ),
              PlatformTextSetting<int>(
                settingsKey: 'text-setting-3',
                title: 'A text setting for integers only',
                keyboardType: TextInputType.number,
                defaultValue: 42000,
                validator: (value) {
                  if (value == null || value < 1024 || value > 65536) {
                    return 'Integer number between 1024 and 65536 expected';
                  }
                  return null;
                },
              ),
              PlatformTextSetting<double>(
                settingsKey: 'text-setting-4',
                title: 'A text setting for doubles only',
                keyboardType: TextInputType.number,
              ),
            ],
          ),
          PlatformRadioModalSetting<int>(
            settingsKey: 'radio-modal-setting',
            title: 'This is a modal radio setting',
            defaultValue: 5,
            items: [
              PlatformListItem<int>(value: 1, caption: 'One'),
              PlatformListItem<int>(value: 2, caption: 'Two'),
              PlatformListItem<int>(value: 3, caption: 'Three'),
              PlatformListItem<int>(value: 4, caption: 'Four'),
              PlatformListItem<int>(value: 5, caption: 'Five'),
              PlatformListItem<int>(value: 6, caption: 'Six'),
              PlatformListItem<int>(value: 7, caption: 'Seven'),
              PlatformListItem<int>(value: 8, caption: 'Eight'),
              PlatformListItem<int>(value: 9, caption: 'Nine'),
              PlatformListItem<int>(value: 10, caption: 'Ten'),
              PlatformListItem<int>(value: 11, caption: 'Eleven'),
              PlatformListItem<int>(value: 12, caption: 'Twelve'),
              PlatformListItem<int>(value: 13, caption: 'Thirteen'),
              PlatformListItem<int>(value: 14, caption: 'Fourteen'),
              PlatformListItem<int>(value: 15, caption: 'Fifteen'),
              PlatformListItem<int>(value: 16, caption: 'Sixteen'),
              PlatformListItem<int>(value: 17, caption: 'Seventeen'),
              PlatformListItem<int>(value: 18, caption: 'Eighteen'),
              PlatformListItem<int>(value: 19, caption: 'Nineteen'),
              PlatformListItem<int>(value: 20, caption: 'Twenty'),
              PlatformListItem<int>(value: 21, caption: 'Twentyone'),
              PlatformListItem<int>(value: 22, caption: 'Twentytwo'),
              PlatformListItem<int>(value: 23, caption: 'Twentythree'),
            ],
          ),
          PlatformRadioSetting<int>(
            settingsKey: 'radio-setting',
            title: 'This is a radio setting',
            items: [
              PlatformListItem<int>(value: 1, caption: 'One'),
              PlatformListItem<int>(value: 2, caption: 'Two'),
              PlatformListItem<int>(value: 3, caption: 'Three'),
              PlatformListItem<int>(value: 4, caption: 'Four'),
              PlatformListItem<int>(value: 5, caption: 'Five'),
            ]
          ),
          PlatformSliderSetting(
            settingsKey: 'slider-setting',
            title: 'This is a slider setting',
            minValue: 0.0,
            maxValue: 10.0,
            divisions: 10,
            defaultValue: 5.0,
          ),
          TestTypeSetting(
            title: "This is a settign with a custom type",
            settingsKey: "test-type-setting",
          ),
          PlatformCustomSetting(
            title: 'This is a custom setting',
            onPressed: () => showPlatformDialog(
              context: context,
              builder: (_) => PlatformAlertDialog(
                title: Text('Warning'),
                content: Text('Self destruct in 5 seconds.'),
                actions: <Widget>[
                  PlatformDialogAction(
                    child: Text('Cancel'),
                    onPressed: () => Navigator.pop(context)
                  ),
                  PlatformDialogAction(
                    child: Text('OK'),
                    onPressed: () => Navigator.pop(context)
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

更多关于Flutter平台设置管理插件cobi_flutter_platform_settings的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter平台设置管理插件cobi_flutter_platform_settings的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用cobi_flutter_platform_settings插件的示例代码。这个插件允许你访问和修改设备的平台设置,比如亮度、音量等。以下是一个基本的示例,展示如何设置和获取设备的亮度。

1. 添加依赖

首先,你需要在你的pubspec.yaml文件中添加cobi_flutter_platform_settings依赖:

dependencies:
  flutter:
    sdk: flutter
  cobi_flutter_platform_settings: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入插件:

import 'package:cobi_flutter_platform_settings/cobi_flutter_platform_settings.dart';

3. 使用插件

下面是一个完整的示例,展示如何获取和设置设备的亮度:

import 'package:flutter/material.dart';
import 'package:cobi_flutter_platform_settings/cobi_flutter_platform_settings.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _brightness = 0.0;

  @override
  void initState() {
    super.initState();
    _getBrightness();
  }

  Future<void> _getBrightness() async {
    BrightnessResult brightnessResult = await CobiFlutterPlatformSettings.brightness;
    if (brightnessResult.success) {
      setState(() {
        _brightness = brightnessResult.data!;
      });
    } else {
      print('Failed to get brightness: ${brightnessResult.message}');
    }
  }

  Future<void> _setBrightness(double brightness) async {
    BrightnessResult brightnessResult = await CobiFlutterPlatformSettings.setBrightness(brightness);
    if (brightnessResult.success) {
      print('Brightness set successfully');
      // Optionally, update the state to reflect the new brightness
      _getBrightness();
    } else {
      print('Failed to set brightness: ${brightnessResult.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Brightness Setter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Current Brightness: $_brightness'),
              SizedBox(height: 20),
              Slider(
                value: _brightness,
                min: 0.0,
                max: 1.0,
                divisions: 10,
                onChanged: (double value) async {
                  setState(() {
                    _brightness = value;
                  });
                  // Set the brightness when the slider value changes
                  await _setBrightness(value);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

  1. 导入插件:在文件顶部导入cobi_flutter_platform_settings
  2. 获取亮度:在initState方法中调用_getBrightness函数来获取当前设备的亮度。
  3. 设置亮度:定义一个_setBrightness函数来设置新的亮度值。
  4. UI界面:使用Slider组件让用户可以调整亮度,并在滑块值变化时调用_setBrightness函数来更新设备亮度。

注意事项

  • 请确保你的应用具有修改设备设置的权限(如果需要)。
  • 在某些平台上,修改设备设置可能需要额外的权限或用户同意。
  • 插件的API可能会随着版本更新而变化,请参考最新的官方文档以获取最新的使用方法和API。

这个示例代码展示了如何使用cobi_flutter_platform_settings插件来管理设备的亮度设置。你可以根据类似的方式管理其他平台设置,如音量等。

回到顶部