Flutter绘图与图表插件 flutter_drawio 的使用

flutter_drawio 是一个用于在Flutter应用中进行画布绘制的插件，它提供了绘制、擦除、序列化和反序列化绘制数据的功能。

特性

• 涂鸦
• 绘制形状（矩形、圆形、三角形、星形）
• 擦除功能
• 支持按区域或绘制轨迹擦除
• 绘制数据的序列化和反序列化

视频示例

开始使用

添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_drawio: ^1.1.0

或者使用命令行添加：

flutter pub add flutter_drawio

然后在 Dart 文件中导入：

import 'package:flutter_drawio/flutter_drawio.dart';

使用方法

下面是一个简单的示例，展示如何在应用中使用 flutter_drawio 插件：

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ExamplePage(),
      theme: ThemeData.dark(),
    );
  }
}

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

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final DrawingController controller = DrawingController();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          const Spacer(),
          IconButton(
            icon: const Icon(Icons.clear),
            onPressed: () => controller.clearDrawings(),
          ),
          IconButton(
            icon: const Icon(Icons.color_lens),
            onPressed: () => controller.changeColor(
              controller.color == Colors.red ? Colors.blue : Colors.red,
            ),
          ),
          IconButton(
            icon: switch (controller.drawingMode) {
              DrawingMode.line => const Icon(Icons.shape_line),
              DrawingMode.shape => const Icon(Icons.format_shapes),
              _ => const Icon(Icons.brush),
            },
            onPressed: () => controller.changeDrawingMode(
              switch (controller.drawingMode) {
                DrawingMode.line => DrawingMode.sketch,
                DrawingMode.shape => DrawingMode.line,
                _ => DrawingMode.shape,
              },
            ),
          ),
          // 图标按钮用于选择不同形状
          IconButton(
            icon: const Icon(Icons.circle_outlined),
            onPressed: () => controller.changeShape(Shape.circle),
          ),
          IconButton(
            icon: const Icon(Icons.star),
            onPressed: () => controller.changeShape(Shape.star),
          ),
          IconButton(
            icon: const Icon(Icons.crop_square),
            onPressed: () => controller.changeShape(Shape.rectangle),
          ),
          IconButton(
            icon: const Icon(Icons.signal_cellular_0_bar_rounded),
            onPressed: () => controller.changeShape(Shape.triangle),
          ),
          const Spacer(),
        ],
      ),
      body: DrawingCanvas(
        size: Size(
          MediaQuery.of(context).size.width * 0.9,
          MediaQuery.of(context).size.height * 0.9,
        ),
        controller: controller,
      ),
    );
  }
}