Flutter图像遮罩处理插件image_masking_flutter的使用

image_masking_flutter 插件允许开发者创建一个交互式的图像揭示效果。它使用户可以通过在屏幕上拖动手指来交互式地揭示或着色图像。

安装

要使用此插件，在 pubspec.yaml 文件中添加 image_masking_flutter 作为依赖项：

dependencies:
  image_masking_flutter: ^1.0.0

使用

首先，导入 image_masking_flutter 包：

import 'package:image_masking_flutter/image_masking_widget.dart';

创建一个 GlobalKey

final GlobalKey<ImageMaskingWidgetState> _imageMaskingKey = GlobalKey<ImageMaskingWidgetState>();

使用 Image Masking Widget

ImageMaskingWidget(
  key: _imageMaskingKey,
  height: MediaQuery.of(context).size.height / 2,
  width: MediaQuery.of(context).size.width,
  margin: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height / 4, horizontal: 15),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2)
  ),
  coloredImage: "assets/images/kid_color.jpeg", // 使用着色图像
  unColoredImage: "assets/images/kid_uncolor.jpeg", // 使用未着色的轮廓图像（大小和分辨率与上面的着色图像相同）
)

重置视图

_imageMaskingKey.currentState?.resetView();

示例代码

以下是一个完整的示例代码，展示了如何使用 image_masking_flutter 插件：

import 'package:flutter/material.dart';
import 'package:image_masking_flutter/image_masking_widget.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 图像遮罩',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<ImageMaskingWidgetState> _imageMaskingKey = GlobalKey<ImageMaskingWidgetState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          mainImageView(context),
          topbarView(),
          eraserView(),
        ],
      ),
    );
  }

  Widget mainImageView(BuildContext context) {
    return ImageMaskingWidget(
      key: _imageMaskingKey,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.symmetric(
          vertical: MediaQuery.of(context).size.height / 4, horizontal: 15),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2)
      ),
      coloredImage: "assets/images/kid_color.jpeg", // 使用着色图像
      unColoredImage: "assets/images/kid_uncolor.jpeg", // 使用未着色的轮廓图像（大小和分辨率与上面的着色图像相同）
    );
  }

  Widget topbarView() {
    return Container(
      color: Colors.blue,
      width: double.infinity,
      height: 120,
      alignment: Alignment.bottomCenter,
      padding: const EdgeInsets.only(bottom: 20),
      child: const Text("图像遮罩",
          style: TextStyle(
              fontWeight: FontWeight.w500, color: Colors.white, fontSize: 26)),
    );
  }

  Widget eraserView() {
    return Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: GestureDetector(
          onTap: () {
            _imageMaskingKey.currentState?.resetView();
          },
          child: Container(
              margin: const EdgeInsets.only(bottom: 100),
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.grey.shade200,
                  border: Border.all(color: Colors.black, width: 1)),
              padding: const EdgeInsets.all(15),
              child: const Icon(
                Icons.cleaning_services,
                size: 30,
              )),
        ));
  }
}