Flutter图片色彩分析插件image_palette的使用

Flutter图片色彩分析插件image_palette的使用

Image Palette

一个允许从图片生成调色板并在Flutter应用中使用的插件。

特性

  • 从Image小部件生成调色板。
  • 允许用户从调色板中选择颜色。
  • 提供可自定义的颜色选择对话框。

安装

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  image_palette: ^0.0.1

然后运行以下命令以安装该包：

flutter pub get

使用

在Dart文件中导入插件：

import 'package:image_palette/image_palette.dart';

在应用中使用ImagePalette小部件：

ImagePalette(
  onValueChanged: (color) {
    // 处理选中的颜色
    print('选中的颜色: $color');
  },
  image: Image.network('https://example.com/image.jpg'),
)

onValueChanged回调会在用户从调色板中选择颜色时被调用。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用image_palette插件。

示例代码

import 'dart:developer';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Image palette & Color picker'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: ImagePalette(
          image: Image.asset('assets/images/991409.jpg'), // 替换为你的本地图片路径
          onValueChanged: (Color color) {
            // 打印选中的颜色
            log('选中的颜色: $color');
          },
        ),
      ),
    );
  }
}

运行效果

运行上述代码后，应用会加载指定的图片，并显示一个调色板，用户可以从调色板中选择颜色，选中的颜色会通过log打印出来。

注意事项

  1. 确保你已经在项目中正确配置了图片资源。如果使用的是网络图片，请确保图片URL有效。
  2. 如果使用的是本地图片，请确保图片已添加到pubspec.yaml文件的assets部分：
flutter:
  assets:
    - assets/images/991409.jpg

然后运行以下命令刷新资源：

flutter pub get

更多关于Flutter图片色彩分析插件image_palette的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片色彩分析插件image_palette的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


image_palette 是 Flutter 中的一个插件，用于从图片中提取主要颜色。它是 flutter 包的一部分，通常在显示图片时使用，以便根据图片的颜色动态调整 UI 元素的颜色。

使用步骤

  1. 添加依赖：首先，确保在 pubspec.yaml 文件中添加了 flutter 依赖（image_palette 是 flutter 包的一部分，不需要单独添加）。

    dependencies:
  flutter:
    sdk: flutter

  2. 导入包：在 Dart 文件中导入 flutter 包。

    import 'package:flutter/material.dart';

  3. 加载图片：使用 ImageProvider 加载图片。你可以使用 AssetImage、NetworkImage 或其他 ImageProvider。

    final ImageProvider imageProvider = AssetImage('assets/image.jpg');

  4. 获取调色板：使用 ImagePalette 从图片中提取颜色。

    Future<ImagePalette?> getPalette(ImageProvider imageProvider) async {
  final palette = await ImagePalette.fromImageProvider(imageProvider);
  return palette;
}

  5. 使用颜色：从调色板中获取颜色并应用到 UI 中。

    FutureBuilder<ImagePalette?>(
  future: getPalette(imageProvider),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else if (!snapshot.hasData) {
      return Text('No palette data');
    } else {
      final palette = snapshot.data!;
      return Container(
        color: palette.dominantColor?.color ?? Colors.grey,
        child: Center(
          child: Text(
            'Dominant Color',
            style: TextStyle(
              color: palette.dominantColor?.bodyTextColor ?? Colors.white,
            ),
          ),
        ),
      );
    }
  },
);

主要方法

  • dominantColor: 获取图片中的主色。
  • vibrantColor: 获取图片中的鲜艳颜色。
  • lightVibrantColor: 获取图片中的明亮鲜艳颜色。
  • darkVibrantColor: 获取图片中的暗色鲜艳颜色。
  • mutedColor: 获取图片中的柔和颜色。
  • lightMutedColor: 获取图片中的明亮柔和颜色。
  • darkMutedColor: 获取图片中的暗色柔和颜色。

示例

以下是一个完整的示例，展示如何使用 image_palette 从图片中提取颜色并应用到 UI 中：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Palette Example')),
        body: ImagePaletteExample(),
      ),
    );
  }
}

class ImagePaletteExample extends StatelessWidget {
  final ImageProvider imageProvider = AssetImage('assets/image.jpg');

  Future<ImagePalette?> getPalette(ImageProvider imageProvider) async {
    final palette = await ImagePalette.fromImageProvider(imageProvider);
    return palette;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder<ImagePalette?>(
      future: getPalette(imageProvider),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (!snapshot.hasData) {
          return Center(child: Text('No palette data'));
        } else {
          final palette = snapshot.data!;
          return Container(
            color: palette.dominantColor?.color ?? Colors.grey,
            child: Center(
              child: Text(
                'Dominant Color',
                style: TextStyle(
                  color: palette.dominantColor?.bodyTextColor ?? Colors.white,
                ),
              ),
            ),
          );
        }
      },
    );
  }
}
回到顶部