從圖像中提取主色調(diào)，用于動態(tài)適配顏色主題或者界面顏色。之前在 Flutter 應(yīng)用里一直用的 palette_generator 插件，可以分析圖像顏色，從中提取一系列主要的色調(diào)。最近發(fā)現(xiàn)這個谷歌官方的插件竟然不維護了，后續(xù)沒有更新計劃了。

查找了一系列資料之后，才發(fā)現(xiàn)原來在 Material 3 設(shè)計規(guī)范中有 ColorScheme.fromImageProvider 這么一個功能，用于從圖像的主色調(diào)生成配色方案，這種配色方案可以用于自定義應(yīng)用的主題，使應(yīng)用的視覺風(fēng)格與圖像保持一致，從配色方案 ColorScheme 中再獲取主色調(diào) primary。

功能與用途

ColorScheme.fromImageProvider 的主要功能是通過分析圖像的主色調(diào)，自動生成一個符合 Material 3 設(shè)計規(guī)范的 ColorScheme。適用于以下場景：

• 從圖像生成主題：當(dāng)應(yīng)用需要根據(jù)背景圖片或特定圖像生成主題顏色時，這個方法非常有用。
• Material 3 主題適配：Material 3 強調(diào)動態(tài)主題，ColorScheme.fromImageProvider 可以幫助開發(fā)者快速適配 Material 3 的主題風(fēng)格。
• 個性化設(shè)計：如果應(yīng)用需要根據(jù)用戶上傳的圖片動態(tài)調(diào)整顏色主題，可以使用此方法。

使用場景

以下是幾種典型的使用場景：

• 動態(tài)主題生成：例如，在圖片分享類應(yīng)用中，根據(jù)用戶上傳的圖片自動生成主題顏色，使應(yīng)用的視覺風(fēng)格與圖片匹配。
• 背景圖片適配：如果應(yīng)用背景使用了一張圖片，可以通過此方法提取圖片的主色調(diào)，用于標(biāo)題、按鈕等組件的顏色配置。
• 個性化用戶界面：例如，在游戲或故事類應(yīng)用中，根據(jù)不同場景的圖片生成不同的主題。

示例代碼

以下是一個簡單的示例，展示如何使用 ColorScheme.fromImageProvider 從圖像生成配色方案以及獲取主色調(diào)：

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  ColorScheme? colorScheme;

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

  Future<void> _generateColorScheme() async {
    colorScheme = await ColorScheme.fromImageProvider(
      provider: AssetImage('assets/cat.jpeg'), // 替換為你的圖片路徑
    );
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ColorScheme from Image Demo',
      theme: ThemeData(colorScheme: colorScheme, useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: Text('Image-based Theme')),
        body: Center(child: Column(children: [Image.asset('assets/cat.jpeg'), Text('This theme is generated from the image. The text color is generated from the image', style: TextStyle(color: colorScheme?.primary))])),
      ),
    );
  }
}

注意事項

在使用 ColorScheme.fromImageProvider 時，需要注意以下幾點：

1. 圖像質(zhì)量：如果圖像的主色調(diào)不明顯或過于復(fù)雜，生成的配色方案可能不符合預(yù)期。建議選擇顏色分布均勻的圖像。
2. 性能開銷：分析圖像生成配色方案需要一定的計算資源，如果頻繁調(diào)用可能會影響性能。
3. 兼容性：此方法需要 Flutter 3.10 或更高版本，確保你的環(huán)境支持 Material 3。
4. 對比度要求：Material 3 的配色方案會自動調(diào)整以確保符合無障礙對比度要求，但開發(fā)者仍需測試主題的可讀性。

與其他配色生成方式的對比

Flutter 提供了多種生成 ColorScheme 的方式，以下是它們的對比：

• ColorScheme.fromSeed：這是 Material 3 推薦的首選方式，通過一個“種子”顏色生成完整的配色方案。相比 fromImageProvider，它更可控且性能更好。
• ColorScheme.fromSwatch：這種方式基于一個主色調(diào)生成配色方案，但靈活性不如 fromSeed 和 fromImageProvider。
• ColorScheme.fromImageProvider：適合從圖像動態(tài)生成主題，但需要確保圖像質(zhì)量。