Canvas Editor

CanvasEditor allows you to add various widgets over a customizable background (image or color) and provides functionalities to move, resize, rotate, and manipulate these widgets.

screenshot

Features

  • Change editor background color.
  • Add any widget as the background in the editor.
  • Overlay any widget over the editor.
  • Move, resize, flip, zoom, and rotate added widgets.
  • Update added widgets with another widget.
  • Support undo and redo actions.
  • Allow single and multiple selections.
  • Customize border color and remove icon.
  • Remove added widgets.
  • Handle all actions manually.

Installation

Add canvas_editor to your pubspec.yaml file:

dependencies:
  canvas_editor: ^1.0.0

Then, import the package:

import 'package:canvas_editor/canvas_editor.dart';

Usage

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late CanvasEditorController _canvasEditorController;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Canvas Editor Example'),
      ),
      body: CanvasEditorView(
        onInitialize: (controller) {
          setState(() {
            _canvasEditorController = controller;
          });
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _canvasEditorController.addView(
            child: Text('New Widget'),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Additional Configuration

  • borderColor: Sets the border color of widgets (default: Colors.black).
  • removeIcon: Sets the remove icon (default: Icon(Icons.cancel)).
  • addBackgroundColor: Sets the background color.
  • addBackgroundView: Adds a background widget over the editor.
  • addView: Adds a new widget over the editor.
  • updateView: Updates an existing widget in the editor.
  • canEditMultipleView: Enables multi-selection (default: true).
  • hideViewControl: Hides widget controls (borders/icons).
  • showViewControl: Shows widget controls (borders/icons).
  • onClick: Callback when a widget is clicked.
  • clickToFocusAndMove: Enables movement and transformation on click (default: false).
  • moveView: Moves a widget programmatically.
  • rotateView: Rotates a widget programmatically.
  • zoomInOutView: Zooms in or out a widget programmatically.
  • flipView: Flips a widget horizontally or vertically.
  • updateMatrix: Updates a widget's matrix.

Example

For a full implementation, check the /example/lib/main.dart file in the package repository.

License

This package is licensed under the MIT License. See the LICENSE file for details.

Libraries

canvas_editor