relations 1.0.0 copy "relations: ^1.0.0" to clipboard
relations: ^1.0.0 copied to clipboard

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

website: https://allround.net

3
likes
40
points
42
downloads

Publisher

verified publisherdev.allround.net

Weekly Downloads

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

Homepage

License

MIT (license)

Dependencies

bloc, flutter, flutter_bloc, rxdart, vector_math

More

Packages that depend on relations