Flutter主题适配插件monet的使用

monet 是一个用于获取壁纸颜色的库，适用于Android平台。对于不支持的平台，该库还可以根据给定的颜色生成相应的调色板。

开始使用

对于目标版本为8.0及以上的Android应用，无需进行任何设置。然而，如果你希望支持更低版本的Android系统，则需要进行一些额外的步骤。

1. 创建一个新的类并继承 MonetApplication

创建一个新的类，并命名为你想要的名字（最好是与应用相关的名称）。这个类需要继承自 MonetApplication。

// 在你的应用中创建一个新的类
import hrx.plugin.monet.MonetApplication

class CustomApplication : MonetApplication()

2. 在 AndroidManifest.xml 中使用新的应用类

在 AndroidManifest.xml 文件中，添加 android:name 属性以使用新的应用类。

<application
    android:name=".CustomApplication"
    ...>

3. 请求读取外部存储权限（可选）

在某些旧版Android系统中，可能需要请求 READ_EXTERNAL_STORAGE 权限才能获取壁纸颜色。如果省略此权限，底层库将使用默认颜色，不会出错。

要添加此权限，请在 AndroidManifest.xml 中添加以下行：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

使用库

你应该使用 MonetProvider 获取一个有效的 monet 实现。

1. 获取实例

首先，你需要获取一个新的实例：

final MonetProvider monet = await MonetProvider.newInstance();

建议将此实例存储在一个在整个应用中都可以访问的地方。

2. 获取颜色

获取实例后，你可以通过调用 getColors 方法来获取颜色。参数 color 用于处理没有平台颜色可用的情况（例如，不支持的平台）。

// 这里使用紫色作为示例颜色
final MonetColors colors = monet.getColors(Colors.purple);

3. 使用颜色

一旦获取了颜色，你可以像使用其他颜色一样使用它们。MonetColors 包含五个调色板，每个调色板包含不同亮度级别的13种色调。

final MonetPalette accent1 = colors.accent1;

你可以从调色板中访问总共13种色调，这些色调的亮度各不相同。你可以将这些颜色与 ColorScheme 结合使用。

ColorScheme.light(
    secondary: accent1.shade500,
    background: accent1.shade200,
    surface: accent1.shade100,
);

完整示例

你可以在以下示例代码中找到一个简单的示例，该示例展示了如何使用 monet 库来获取颜色并将其应用到应用中。

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:monet/monet.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MonetProvider? _monet;
  List<MonetPalette> get palettes {
    // 这个调用会在Android上获取壁纸颜色，否则会基于紫色生成一个调色板
    final MonetColors colors = _monet!.getColors(Colors.purple);

    return [
      colors.accent1,
      colors.accent2,
      colors.accent3,
      colors.neutral1,
      colors.neutral2,
    ];
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们初始化时使用异步方法
  Future<void> initPlatformState() async {
    _monet = await MonetProvider.newInstance();
    // 添加一个监听器以便在壁纸颜色变化时刷新UI
    _monet!.addListener(() => setState(() {}));

    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Monet示例应用'),
        ),
        body: _monet != null
            ? ListView.builder(
                itemBuilder: (context, index) {
                  final int currentKey =
                      palettes.first.colors.keys.toList()[index];

                  return SizedBox(
                    height: 80,
                    child: Row(
                      children: palettes.mapIndexed((index, e) {
                        final Color color = e[currentKey]!;
                        final Brightness colorBrightness =
                            ThemeData.estimateBrightnessForColor(color);

                        final String paletteName;

                        switch (index) {
                          case 0:
                            paletteName = "accent1";
                            break;
                          case 1:
                            paletteName = "accent2";
                            break;
                          case 2:
                            paletteName = "accent3";
                            break;
                          case 3:
                            paletteName = "neutral1";
                            break;
                          case 4:
                            paletteName = "neutral2";
                            break;
                          default:
                            paletteName = "unknown";
                            break;
                        }

                        return Expanded(
                          child: SizedBox.expand(
                            child: Material(
                              color: color,
                              child: Center(
                                child: Text(
                                  "$paletteName\n$currentKey",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: colorBrightness == Brightness.dark
                                        ? Colors.white
                                        : Colors.black,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  );
                },
                itemCount: 13,
              )
            : const Center(child: Text("Monet尚未准备好。")),
      ),
    );
  }
}