relations 0.0.3

Flutter package for drag or connect nodes, and for doing operations on them.

Allround Relations

A flutter package to set up a zoomable and scrollable area where you can manage nodes in realtime.

External packages are:

• bloc
• flutter_bloc
• rxdart
• vector_math

Features

• You can scroll the stage area by panning with one finger (just like in google maps).
• Zooming is also available by using two fingers.
• Nodes and the links between them are selectable by tapping on them.
• After connection mode has enabled, you can select two boxes (nodes) to connect them.
• After you have selected a node, you can move that by panning with your finger.
• Touching to the empty area will casuse to unselect a selected item. If no item is selected, a popup menu will be opened and you can add a new node to the scene, choose an arrangment method or zoom to the tapped position.
• By pressing home button the view will be reset.
• In the background, the state of nodes is represented by a graph. So by pressing on save icon, you will receive the actual state of the stage in the given callback, containing the graph as a parameter.

Usage

You can create a GraphNode with the following parameters:

• id
  • optional
  • if no id is given, the package will automatically generate one
  • Ids are used for inside identification
• position
  • relative to the top-left corner of the stage (0,0)
• size
  • optional
  • if no size is provided, the wrapper box sizes itself to match the child
  • if size is provided, the wrapper box will be a fixed size box and child will not overflow
• visible
• data
  • any type of data to store
• widget
  • the widget to display inside the box

GraphNode _getNode()  {
    return 
      GraphNode( 
        position: Offset(20, 40), 
        size: const Size(80, 80),
        data: "Some data to store", 
        widget: Container(
          color: Colors.lightBlue,
          padding: EdgeInsets.all(10.0),
          child: FittedBox(
            fit: BoxFit.contain, 
            child: Text(
              "A node",
              style: TextStyle(
                color: Colors.orange[300],
                decoration: TextDecoration.none
              )
            )
          )
        )
      );
}

To set up the stage:

StageConfig config = StageConfig(
    nodes: _getNodes(),
    onSave: _handleSave,
    onAddNew: _nodeProvider,
    initialZoom: 0.4,
    stageSize: const Size(2000, 2000),
    theme: const StageTheme()
);

For further practical information please take a look at the example.

Contact

Allround Informatika Kft.

email: [e-mail]

website: https://allround.net