Flutter主题数据绘图插件flutter_painter_themedata的使用

简介

flutter_painter 是一个纯 Flutter 包，用于在应用中进行绘画。它提供了丰富的功能，包括自由式绘制、对象编辑（如文本、形状、图像）以及擦除工具等。

功能概览

• 自由式绘制：可以自由绘制线条，设置颜色和宽度。
• 对象操作：支持移动、缩放和旋转的对象，例如文本、形状和图像。
• 自由式擦除：可以擦除任何部分的绘制内容或对象。
• 背景设置：支持颜色或图片作为画布背景，并能导出为图片。

示例代码

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

import 'dart:typed_data';
import 'dart:ui';

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter Painter Example",
      theme: ThemeData(primaryColor: Colors.brown, accentColor: Colors.amberAccent),
      home: const FlutterPainterExample(),
    );
  }
}

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

  @override
  _FlutterPainterExampleState createState() => _FlutterPainterExampleState();
}

class _FlutterPainterExampleState extends State<FlutterPainterExample> {
  late PainterController controller;

  @override
  void initState() {
    super.initState();
    controller = PainterController(
      settings: PainterSettings(
        freeStyle: const FreeStyleSettings(color: Colors.blue, strokeWidth: 5),
        text: const TextSettings(textStyle: TextStyle(fontSize: 18, color: Colors.red)),
        shape: ShapeSettings(paint: Paint()..color = Colors.green),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter Painter Example")),
      body: Column(
        children: [
          // 绘画区域
          Expanded(
            child: FlutterPainter(
              controller: controller,
            ),
          ),
          // 工具栏
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // 擦除模式
              IconButton(
                icon: Icon(Icons.eraser),
                onPressed: () {
                  controller.freeStyleMode = FreeStyleMode.erase;
                },
              ),
              // 绘制模式
              IconButton(
                icon: Icon(Icons.brush),
                onPressed: () {
                  controller.freeStyleMode = FreeStyleMode.draw;
                },
              ),
              // 添加文本
              IconButton(
                icon: Icon(Icons.text_fields),
                onPressed: () {
                  controller.addText();
                },
              ),
              // 添加形状
              IconButton(
                icon: Icon(Icons.circle),
                onPressed: () {
                  controller.addShape(OvalFactory());
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

使用步骤

1. 初始化 PainterController

PainterController 是 flutter_painter 的核心类，用于管理所有绘制内容和设置。可以通过构造函数初始化并设置初始配置。

PainterController controller = PainterController(
  settings: PainterSettings(
    freeStyle: FreeStyleSettings(color: Colors.blue, strokeWidth: 5),
    text: TextSettings(textStyle: TextStyle(fontSize: 18, color: Colors.red)),
    shape: ShapeSettings(paint: Paint()..color = Colors.green),
  ),
);

2. 使用 FlutterPainter 构建画布

将 PainterController 传递给 FlutterPainter，即可创建一个可交互的画布。

FlutterPainter(
  controller: controller,
)

3. 添加回调与工具栏

通过监听 PainterController 的变化，可以动态更新 UI 或添加更多功能。

IconButton(
  icon: Icon(Icons.eraser),
  onPressed: () {
    controller.freeStyleMode = FreeStyleMode.erase;
  },
)

注意事项

1. 约束问题：FlutterPainter 不会定义自身的尺寸限制，因此建议将其包裹在一个具有尺寸约束的容器中，例如 SizedBox 或 AspectRatio。
2. 多控制器管理：如果多个部件依赖同一个 PainterController，可以使用 ValueListenableBuilder 来自动更新 UI。
3. 擦除模式：启用擦除模式后，所有对象将被锁定，无法修改。

导出图片

可以通过 PainterController 将绘制内容导出为图片。

Uint8List? renderImage(Size size) async {
  final ui.Image renderedImage = await controller.renderImage(size);
  final Uint8List? byteData = await renderedImage.pngBytes;
  return byteData;
}