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: development@allround.net

website: https://allround.net

Libraries

bloc
collision
data_state
edge
gesture_transformable
graph
graph_bloc
graph_edge
graph_event
graph_node
graph_state
inertial_motion
math_util
node_arrangement
relations
selectable
stage
stage_bloc
stage_config
stage_entity
stage_event
stage_session_data
stage_theme
stage_wrapper
wrapper_box