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.

Made with ❤️ in Egypt 🇪🇬 by Salah Rashad
#FreePalestine 🇵🇸

Explore the docs »

View Example · Report Bug · Request Feature

Getting Started

Installation

• Method 1 (Recommended)

  run this line in your terminal:

  flutter pub add blueprint_system

• Method 2

  add this line to your pubspec.yaml dependencies:

  dependencies:
    blueprint_system: 0.1.2

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

  flutter pub get

Quick Implementation

• Method 1 (using children)

  Blueprint(
    children: [
      FloatingNode(
        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
     
     @override
     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)
     controller.addNode(node);
     // or
     controller.addNodes([node1, node2, ...]);

Learn More

• More info: Explore the docs
• See: Full Example

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:

• Fixed Node 📌
• Draggable Node 👆↔️
• Floating Node ✨
• Blueprint rulers 📏
• 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.
• #2
• Add an option to make the FloatingNode responsive to screen size changes.