Flutter系统主题适配插件system_theme的使用

插件介绍

system_theme 是一个Flutter插件，用于获取当前系统的主题信息。它支持多种平台，包括Android、iOS、Web、macOS、Windows和Linux等，并允许开发者获取系统的强调色（accent color）以及监听该颜色的变化。

支持的平台

使用方法

导入包

首先需要在项目中导入 system_theme 包：

import 'package:system_theme/system_theme.dart';

获取系统强调色

通过访问 SystemTheme.accentColor.accent 属性来获取系统强调色：

final accentColor = SystemTheme.accentColor.accent;

为了确保在应用启动时能够正确加载强调色，可以在 main() 函数中调用 load() 方法：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemTheme.accentColor.load();
  runApp(MyApp());
}

配置备用强调色

为了避免运行时出现意外情况，建议设置一个备用强调色。当系统无法提供强调色时将使用此颜色：

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

  SystemTheme.fallbackColor = const Color(0xFF865432);
  await SystemTheme.accentColor.load();

  runApp(MyApp());
}

监听强调色变化

可以使用 SystemTheme.onChange 流来监听强调色的变化：

SystemTheme.onChange.listen((event) {
  debugPrint('强调色已更改为 ${event.accentColor}');
});

或者使用 SystemThemeBuilder 小部件来实现相同功能：

SystemThemeBuilder(builder: (context, accent) {
  return ColoredBox(color: accent.accentColor);
});

检查是否支持强调色

利用 flutter/foundation 包提供的 defaultTargetPlatform 属性，可以检查当前平台是否支持强调色：

import 'package:flutter/foundation.dart' show defaultTargetPlatform;

void main() {
  final supported = defaultTargetPlatform.supportsAccentColor;

  print('当前平台${supported ? '支持' : '不支持'}强调色');
}

示例代码

下面是一个完整的示例应用程序，展示了如何使用 system_theme 插件：

import 'package:flutter/material.dart';
import 'package:system_theme/system_theme.dart';
import 'package:flutter/foundation.dart' show defaultTargetPlatform;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemTheme.accentColor.load();
  SystemTheme.onChange.listen((color) {
    debugPrint('强调色已更改为 ${color.accent}');
  });

  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SystemThemeBuilder(builder: (context, accent) {
      final colors = [
        accent.lightest,
        accent.lighter,
        accent.light,
        accent.accent,
        accent.dark,
        accent.darker,
        accent.darkest,
      ];
      return Scaffold(
        body: Column(children: [
          Text(
              '强调色: ${defaultTargetPlatform.supportsAccentColor ? '支持' : '不支持'}'),
          ...colors.map((color) {
            return Expanded(
              child: Container(
                color: color,
                alignment: Alignment.center,
                child: Text(
                  [
                    '最浅',
                    '较浅',
                    '浅',
                    '默认',
                    '深',
                    '较深',
                    '最深',
                  ][colors.indexOf(color)] +
                      '\n${color.toHex()}',
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                        color: color.computeLuminance() >= 0.5
                            ? Colors.black
                            : Colors.white,
                      ),
                  textAlign: TextAlign.center,
                ),
              ),
            );
          }).toList(),
        ]),
      );
    });
  }
}

extension ColorExtension on Color {
  String toHex() {
    return '#${value.toRadixString(16).padLeft(8, '0').substring(2, 8)}';
  }
}

这个例子创建了一个简单的Flutter应用，它会根据系统的强调色自动调整界面颜色，并显示不同色调的颜色块及其对应的十六进制值。