Flutter图像处理插件image_filter_pro的使用

Image Filter Pro

Hi! This is my first package published to help you out! Image Filter Pro is a Flutter package that provides a convenient way to apply color filters to images with preset filter options. The package is written purely in Dart, so no additional setup for specific platforms is required.

Features

• Apply various preset color filters to images.
• Easily integrate customisable filter UI into your Flutter app.
• Inspired by popular filter presets found in other image editing apps.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  image_filter_pro: ^0.1.11

Usage

导入包

在你的Dart文件中导入包：

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

使用 ImageFilterWidget

在你的 widget 树中使用 ImageFilterWidget：

class FilteredImageWidget extends StatefulWidget {
  @override
  _FilteredImageWidgetState createState() => _FilteredImageWidgetState();
}

class _FilteredImageWidgetState extends State<FilteredImageWidget> {
  File? image;

  void _showImagePicker() async {
    // 实现你的图片选择逻辑
    // 例如：
    // var pickedImage = await ImagePicker.pickImage(source: ImageSource.gallery);
    // setState(() {
    //   imageFile = pickedImage;
    // });

    var updatedImage = await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => PhotoFilter(
          image: image,
          presets: NamedColorFilter.defaultFilters(),
          cancelIcon: Icons.cancel,
          applyIcon: Icons.check,
          backgroundColor: Colors.black,
          sliderColor: Colors.blue,
          sliderLabelStyle: TextStyle(color: Colors.white),
          bottomButtonsTextStyle: TextStyle(color: Colors.white),
          presetsLabelTextStyle: TextStyle(color: Colors.white),
          applyingTextStyle: TextStyle(color: Colors.white),
        ),
      ),
    );

    if (updatedImage != null) {
      setState(() {
        this.image = updatedImage;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Filter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _showImagePicker,
              child: Text('Pick and Filter Image'),
            ),
            if (image != null)
              Image.file(image!),
          ],
        ),
      ),
    );
  }
}

自定义滤镜

你也可以提供自己的滤镜预设：

PhotoFilter(
  image: image,
  filters: [
    NamedColorFilter(
      colorFilterMatrix: [],
      name: "None",
    ),
    NamedColorFilter(
      colorFilterMatrix: [
        0.8, 0.1, 0.1, 0, 20,
        0.1, 0.8, 0.1, 0, 20,
        0.1, 0.1, 0.8, 0, 20,
        0, 0, 0, 1, 0,
      ],
      name: "Vintage",
    ),
    NamedColorFilter(
      colorFilterMatrix: [
        1.2, 0.1, 0.1, 0, 10,
        0.1, 1, 0.1, 0, 10,
        0.1, 0.1, 1, 0, 10,
        0, 0, 0, 1, 0,
      ],
      name: 'Mood',
    ),
  ],
)

扩展默认滤镜

你还可以扩展默认的滤镜预设：

PhotoFilter(
  image: image,
  filters: NamedColorFilter.defaultFilters().toList()
    ..addAll([
      NamedColorFilter(
        colorFilterMatrix: [
          0.8, 0.1, 0.1, 0, 20,
          0.1, 0.8, 0.1, 0, 20,
          0.1, 0.1, 0.8, 0, 20,
          0, 0, 0, 1, 0,
        ],
        name: "Vintage",
      ),
      NamedColorFilter(
        colorFilterMatrix: [
          1.2, 0.1, 0.1, 0, 10,
          0.1, 1, 0.1, 0, 10,
          0.1, 0.1, 1, 0, 10,
          0, 0, 0, 1, 0,
        ],
        name: 'Mood',
      ),
    ]),
)

回调函数

你可以在用户点击取消或应用滤镜时触发回调函数：

PhotoFilter(
  image: image,
  presets: NamedColorFilter.defaultFilters(),
  onCancel: () {
    // 取消操作
  },
  onStartApplyingFilter: () {
    // 显示加载器或其他类似的操作
  },
  onFinishApplyingFilter: (File? file) {
    // 处理编辑后的图片
  },
)

Screenshots

License

This package is distributed under the MIT License.

希望这些信息对你有帮助！如果你有任何问题或需要进一步的帮助，请随时提问。