Flutter艺术画板插件stack_art_board的使用

stack_art_board 是一个用于在 Flutter 中创建艺术画板的插件。它允许添加任意小部件，并支持编辑、删除和改变图层顺序。

如何使用

开始使用

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

dependencies:
  ...
  stack_art_board: <最新版本>

在你的库文件中添加以下导入语句：

import 'package:stack_art_board/stack_art_board.dart';

初始化StackArtBoard

// 引入必要的库
import 'package:stack_art_board/stack_art_board.dart';

// 创建控制器
final StackArtBoardController controller = StackArtBoardController();

// 使用StackArtBoard组件
StackArtBoard(
  // 设置唯一键
  stackArtBoardKey: UniqueKey(),
  // 绑定控制器
  controller: controller,
  // 配置画板参数
  artBoardConfig: ArtBoardConfig(
    // 容器大小
    containerSize: const Size(300, 300),
    // 画板大小
    artBoardSize: const Size(3000, 3000),
    // 工具图标宽度
    toolIconWidth: 20,
    // 边框宽度
    borderWidth: 5,
    // 边框颜色
    borderColor: Colors.black,
    // 旋转小部件
    rotateWidget: Container(color: Colors.orange),
    // 删除小部件
    deleteWidget: Container(color: Colors.purple),
  ),
  // 背景颜色
  background: Container(color: Colors.green),
),

添加自定义小部件

// 添加自定义小部件
controller.add(
  CustomCanvasItem(
    // 自定义小部件内容
    child: Container(
      color: Colors.red,
      child: const Center(
        child: Text('text'),
      ),
    ),
    // 小部件配置
    canvasConfig: CanvasConfig(
      size: const Size(600, 600),
      transform: Matrix4.identity(),
      allowUserInteraction: true,
    ),
  ),
);

添加带有透明区域的图像小部件

// 加载图像
final ByteData data = await rootBundle.load('assets/image.png');
final imageBytes = data.buffer.asUint8List();
final image = img_lib.decodeImage(imageBytes);
if (image == null) return;

// 添加带有透明区域的图像小部件
controller.add(
  TransparentBgImageCanvasItem(
    image: image,
    imageBytes: imageBytes,
    canvasConfig: CanvasConfig(
      size: Size(image.width.toDouble(), image.height.toDouble()),
      transform: Matrix4.identity(),
      allowUserInteraction: true,
    ),
  ),
);

所有画布操作

// 添加小部件
void add<T extends CanvasItem>(T item);

// 插入小部件
void insert<T extends CanvasItem>(T item, int index);

// 移除小部件
void remove(Key key);

// 保留指定小部件并移除其他所有小部件
void removeExcept(Key key);

// 检查是否包含指定小部件
bool contain(Key key);

// 清空所有小部件
void clear();

// 将小部件移动到最顶层
void moveToTop();

// 将小部件移动到最底层
void moveToBottom();

// 移动小部件的位置
void move(int oldIndex, int newIndex);

// 重置所有小部件
void reset();

// 释放资源
void dispose();

示例代码

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

import 'package:image/image.dart' as img_lib;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:stack_art_board/stack_art_board.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 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final StackArtBoardController controller = StackArtBoardController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack Art Board Demo'),
      ),
      body: Center(
        child: StackArtBoard(
          stackArtBoardKey: UniqueKey(),
          controller: controller,
          artBoardConfig: ArtBoardConfig(
            containerSize: const Size(300, 300),
            artBoardSize: const Size(3000, 3000),
            toolIconWidth: 20,
            borderWidth: 5,
            borderColor: Colors.black,
            rotateWidget: Container(color: Colors.orange),
            deleteWidget: Container(color: Colors.purple),
          ),
          background: Container(color: Colors.green),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
            onPressed: () {
              controller.add(
                CustomCanvasItem(
                  child: Container(
                    color: Colors.red,
                    child: const Center(
                      child: Text('text'),
                    ),
                  ),
                  canvasConfig: CanvasConfig(
                    size: const Size(600, 600),
                    transform: Matrix4.identity(),
                    allowUserInteraction: true,
                  ),
                ),
              );
            },
            child: const Text('添加自定义画布'),
          ),
          ElevatedButton(
            onPressed: () async {
              final ByteData data = await rootBundle.load('assets/image.png');
              final imageBytes = data.buffer.asUint8List();
              final image = img_lib.decodeImage(imageBytes);
              if (image == null) return;
              controller.add(
                TransparentBgImageCanvasItem(
                  image: image,
                  imageBytes: imageBytes,
                  canvasConfig: CanvasConfig(
                    size: Size(image.width.toDouble(), image.height.toDouble()),
                    transform: Matrix4.identity(),
                    allowUserInteraction: true,
                  ),
                ),
              );
            },
            child: const Text('添加透明背景图像'),
          ),
          ElevatedButton(
            onPressed: () {
              controller.moveToTop();
            },
            child: const Text('移动到最顶层'),
          ),
          ElevatedButton(
            onPressed: () {
              controller.moveToBottom();
            },
            child: const Text('移动到最底层'),
          ),
        ],
      ),
    );
  }
}