Flutter偏好设置管理插件pref的使用

简介

pref 插件可以帮助开发者在Flutter应用中创建带有高级特性和子页面的偏好设置界面。它提供了一系列预构建的小部件，使你能够轻松地为你的应用程序添加配置选项。

使用方法

初始化服务

在你的主方法中，确保初始化了WidgetsFlutterBinding，并设置默认的偏好值：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final service = await PrefServiceShared.init(
    defaults: {
      'start_page': 'posts',
      'ui_theme': 'light',
    },
  );

  runApp(
    PrefService(
      service: service,
      child: MyApp(),
    ),
  );
}

创建偏好设置页面

接下来，在你的UI代码中，你可以使用PrefPage和其他相关的预制小部件来创建一个直观且易于使用的偏好设置页面：

Scaffold(
  appBar: AppBar(
    title: Text('Preferences Demo'),
  ),
  body: PrefPage(children: [
    PrefTitle(title: Text('General')),
    PrefDropdown<String>(
      title: Text('Start Page'),
      pref: 'start_page',
      items: [
        DropdownMenuItem(value: 'posts', child: Text('Posts')),
        DropdownMenuItem(value: 'timeline', child: Text('Timeline')),
        DropdownMenuItem(value: 'pm', child: Text('Private Messages')),
      ],
    ),
    PrefTitle(title: Text('Personalization')),
    PrefRadio(
      title: Text('Light Theme'),
      value: 'light',
      pref: 'ui_theme',
    ),
    PrefRadio(
      title: Text('Dark Theme'),
      value: 'dark',
      pref: 'ui_theme',
    ),
  ]),
);

在应用程序中使用偏好设置值

要访问保存的偏好设置值，可以在上下文中使用PrefService.of(context)：

final startPage = PrefService.of(context).get('start_page');

示例项目

为了更深入地了解如何使用pref插件，可以参考完整的示例代码。这个例子展示了如何设置和获取各种类型的偏好设置，并展示了如何处理不同种类的数据（如字符串、整数等）以及如何监听偏好设置的变化以动态更新UI。

// example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:pref/pref.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置日志记录器
  Logger.root.level = Level.ALL;
  Logger.root.onRecord.listen((record) {
    debugPrint('${record.loggerName} ${record.level.name}: ${record.message}');
  });

  // 初始化偏好服务
  final service = PrefServiceCache(); 
  await service.setDefaultValues(<String, dynamic>{
    'user_description': 'This is my description!',
    'advanced_enabled': false,
    'start_page': 'Timeline',
    'notification_pm_friend': true,
    'notification_newpost_friend': true,
    'notification_pm_stranger': false,
    'ui_theme': 'light',
    'ui_color': Colors.blue.value,
    'user_email': 'email@gmail.com',
    'gender': 2,
    'content_show_text': false,
    'content_show_image': true,
    'content_show_audio': null,
    'android_listpref_selected': 'select_3',
    'android_multilistpref_a': false,
    'android_multilistpref_b': true,
    'android_multilistpref_c': true,
    'exp_showos': false,
    'age': 65,
    'weight': 60,
  });

  runApp(MyApp(service));
}

class MyApp extends StatefulWidget {
  const MyApp(this.service, {Key? key}) : super(key: key);

  final BasePrefService service;

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode? _brightness;
  Color? _uiColor;

  StreamSubscription<String>? _stream;
  StreamSubscription<int?>? _streamColor;

  @override
  void dispose() {
    _stream?.cancel();
    _streamColor?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _stream ??= widget.service.stream<String>('ui_theme').listen((event) {
      setState(() {
        switch (event) {
          case 'system':
            _brightness = ThemeMode.system;
            break;
          case 'light':
            _brightness = ThemeMode.light;
            break;
          case 'dark':
            _brightness = ThemeMode.dark;
            break;
        }
      });
    });

    _streamColor ??= widget.service.stream<int?>('ui_color').listen((event) {
      setState(() {
        _uiColor = event == null ? null : Color(event);
      });
    });

    return PrefService(
      service: widget.service,
      child: MaterialApp(
        title: 'Pref Demo',
        themeMode: _brightness,
        theme: ThemeData.light().copyWith(
            colorScheme:
                ColorScheme.fromSeed(seedColor: _uiColor ?? Colors.blue)),
        darkTheme: ThemeData.dark().copyWith(
            colorScheme: ColorScheme.fromSeed(
                seedColor: _uiColor ?? Colors.blue,
                brightness: Brightness.dark)),
        home: MyHomePage(title: 'Pref Demo'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PrefPage(
        children: [
          // ...此处省略部分代码...
        ],
      ),
    );
  }
}

以上就是关于pref插件的基本介绍及其用法。通过这种方式，你可以快速实现对用户偏好设置的支持，同时保持代码的简洁性和可维护性。如果你有任何疑问或需要进一步的帮助，请随时提问！