Flutter图像绘制插件bulk_image_draw的使用

builk_image_draw 是一个 Flutter 包，允许你在图像上绘制线条或放置图钉。目前仅支持 Android 和 iOS 平台。

安装

首先，在 pubspec.yaml 文件中添加 builk_image_draw 作为依赖项。

Android

在项目的 android/app/build.gradle 文件中，将最低的 Android SDK 版本设置为 21 或更高。

minSdkVersion 25

然后，在 pubspec.yaml 文件中添加以下内容：

dependencies:
  builk_image_draw: any

接下来，运行 flutter pub get 来获取依赖。

Widget 使用

以下是 BuilkImageDraw 的主要属性和用法：

属性说明

示例代码

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

import 'dart:io';

import 'package:builk_image_draw/image_draw/builk_image_draw.dart';
import 'package:builk_image_draw/image_draw/builk_image_draw_controller.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageDrawWidget(),
    );
  }
}

class ImageDrawWidget extends StatefulWidget {
  ImageDrawWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  _ImageDrawWidgetState createState() {
    return _ImageDrawWidgetState();
  }
}

class _ImageDrawWidgetState extends State<ImageDrawWidget> {
  File? imagefile;
  var imageDrawControl = BuilkImageDrawController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 显示当前选择的图像
            (imagefile != null)
                ? Container(
                    alignment: Alignment.center,
                    width: 200,
                    child: Image.file(imagefile!),
                  )
                : Container(
                    alignment: Alignment.center,
                    width: 200,
                    child: Icon(Icons.image, size: 200),
                  )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 弹出绘制界面
          showDialog(
            context: context,
            builder: (context) {
              return BuilkImageDraw(
                deletePin: (value) {},
                undoComplete: () {},
                clearButton: () {},
                drawListView: [],
                drawStackBackList: [],
                controller: imageDrawControl,
                drawComplete: () { },
                loadPlanComplete: () {
                  // 设置画笔颜色为红色并启用画笔模式
                  imageDrawControl.changeColor(Colors.red);
                  imageDrawControl.selectPen(true);
                },
                drawImageSuccess: (value) { },
                imageUrl: 'https://wpmedia.roomsketcher.com/content/uploads/2022/01/06145940/What-is-a-floor-plan-with-dimensions.png',
              );
            },
          );
        },
        child: Icon(Icons.edit),
      ),
    );
  }
}