relations 1.0.0
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()  {
        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(
                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.



pub points


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



API reference




bloc, flutter, flutter_bloc, rxdart, vector_math


Packages that depend on relations