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() {
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