從圖像中提取主色調，用于動態適配顏色主題或者界面顏色。之前在 Flutter 應用里一直用的 palette_generator 插件，可以分析圖像顏色，從中提取一系列主要的色調。最近發現這個谷歌官方的插件竟然不維護了，后續沒有更新計劃了。
查找了一系列資料之后，才發現原來在 Material 3 設計規范中有 ColorScheme.fromImageProvider 這么一個功能，用于從圖像的主色調生成配色方案，這種配色方案可以用于自定義應用的主題，使應用的視覺風格與圖像保持一致，從配色方案 ColorScheme 中再獲取主色調 primary。
功能與用途
ColorScheme.fromImageProvider?的主要功能是通過分析圖像的主色調，自動生成一個符合 Material 3 設計規范的?ColorScheme。適用于以下場景：
- 從圖像生成主題：當應用需要根據背景圖片或特定圖像生成主題顏色時，這個方法非常有用。
- Material 3 主題適配：Material 3 強調動態主題，
ColorScheme.fromImageProvider?可以幫助開發者快速適配 Material 3 的主題風格。 - 個性化設計：如果應用需要根據用戶上傳的圖片動態調整顏色主題，可以使用此方法。
使用場景
以下是幾種典型的使用場景：
- 動態主題生成：例如，在圖片分享類應用中，根據用戶上傳的圖片自動生成主題顏色，使應用的視覺風格與圖片匹配。
- 背景圖片適配：如果應用背景使用了一張圖片，可以通過此方法提取圖片的主色調，用于標題、按鈕等組件的顏色配置。
- 個性化用戶界面：例如，在游戲或故事類應用中，根據不同場景的圖片生成不同的主題。
示例代碼
以下是一個簡單的示例，展示如何使用?ColorScheme.fromImageProvider?從圖像生成配色方案以及獲取主色調：
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {@overrideState<MyApp> createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {ColorScheme? colorScheme;@overridevoid initState() {super.initState();_generateColorScheme();}Future<void> _generateColorScheme() async {colorScheme = await ColorScheme.fromImageProvider(provider: AssetImage('assets/cat.jpeg'), // 替換為你的圖片路徑);setState(() {});}@overrideWidget 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?時，需要注意以下幾點：
- 圖像質量：如果圖像的主色調不明顯或過于復雜，生成的配色方案可能不符合預期。建議選擇顏色分布均勻的圖像。
- 性能開銷：分析圖像生成配色方案需要一定的計算資源，如果頻繁調用可能會影響性能。
- 兼容性：此方法需要 Flutter 3.10 或更高版本，確保你的環境支持 Material 3。
- 對比度要求：Material 3 的配色方案會自動調整以確保符合無障礙對比度要求，但開發者仍需測試主題的可讀性。
與其他配色生成方式的對比
Flutter 提供了多種生成?ColorScheme?的方式，以下是它們的對比：
ColorScheme.fromSeed：這是 Material 3 推薦的首選方式，通過一個“種子”顏色生成完整的配色方案。相比?fromImageProvider，它更可控且性能更好。ColorScheme.fromSwatch：這種方式基于一個主色調生成配色方案，但靈活性不如?fromSeed?和?fromImageProvider。ColorScheme.fromImageProvider：適合從圖像動態生成主題，但需要確保圖像質量。
)
