Blueprint System

A Flutter library that creates blueprint widgets with nodes (child widgets) that may be added to them. These nodes can be moved, resized, and modified.

Explore the docs ยป

View Example ยท Report Bug ยท Request Feature


Getting Started


  • run this line in your terminal:

    flutter pub add blueprint_system
  • Method 2

    add this line to your pubspec.yaml dependencies:

      blueprint_system: 0.1.2

    then get packages, (Alternatively, your editor might support this)

    flutter pub get

Quick Implementation

  • Method 1 (using children)

      children: [
          initPosition: Offset(300, 500),
          initSize: const Size(200, 100),
          child: (c) => Container(
            color: Colors.blue,
  • Method 2 (using a controller)

    1. Initialize controller and assign it to Blueprint widget

      BlueprintController controller = BlueprintController.instance
      Widget build(BuildContext context) {
          return Scaffold(
              body: Blueprint(controller: controller),
    2. Control your blueprint anywhere in the project

      DraggableNode node = DraggableNode(
          initPosition: const Offset(50, 100),    // optional, default is (100, 100)
          initSize: const Size(200, 100),         // optional, default is (100, 100)
          child: (c) => Container(
              color: Colors.red,
              child: Text(c.position.toString()),
      // add node(s)
      // or
      controller.addNodes([node1, node2, ...]);

Learn More

Known Issues

  • Transferring a DraggableNode from a Blueprint to another.

    Explanation: When dragging and dropping a DraggableNode in another Blueprint, a new node is created in the second Blueprint with the same values (different id of course.), and simply removing the old DraggableNode from the first Blueprint, could make it lost in both blueprints forever if the transferring operation failed. So I need to think about a better solution for this.

    Track this issue here #2

Additional Information

This package is still under development ๐Ÿšง and I will do my best to make it more stable.
If you encounter any bugs, please file an issue and I will try to fix them as soon as possible.
Pull requests are always welcome! ๐Ÿฆ„

// TODO:

  • x Fixed Node ๐Ÿ“Œ
  • x Draggable Node ๐Ÿ‘†โ†”๏ธ
  • x Floating Node โœจ
  • x Blueprint rulers ๐Ÿ“
  • x Add the ability to resize nodes (visually not programmatically).
  • Connecting Nodes using arrows (like the flow chart).
  • Blueprint (Export to / Import from) JSON, YAML, XML, etc.
  • Blueprint Themes/Templates.
  • https://github.com/salah-rashad/blueprint_system/issues/2
  • Add an option to make the FloatingNode responsive to screen size changes.