Flutter Flow Chart
A package that let you draw a flow chart diagram with different kind of customizable elements. Dashboards can be saved for later use.
See online example here
Features
- diamond, rectangle, oval, storage, parallelogram elements
- elements can be customizable with background, border and text color, border thickness, text size and weight.
- interactively connect elements
- save/load dashboard
Usage
First create a Dashboard:
Dashboard dashboard = Dashboard();
then crete the [FlowChart] widget where you can react to the user interactions:
FlowChart(
dashboard: dashboard,
onDashboardTapped: ((context, position) {}),
onDashboardLongtTapped: ((context, position) {}),
onElementLongPressed: (context, element) {},
onElementPressed: (context, element) {},
onHandlerPressed: (context, position, handler, element) {},
onHandlerLongPressed: (context, position, handler, element) {},
)
then use the dashboard variable to add, remove, resize etc. elements or load/save the dashboard.
In the example, the StarMenu package is used to easily interact with user inputs.
The Dashboard
The Dashboard object contains all the methods described below used to interact with the flow chart.
| relevant methods | description |
|---|---|
| setGridBackgroundParams | set grid background parameters |
| setHandlerFeedbackOffset | set the feedback offset to help on mobile device to see the end of arrow and not hiding behind the finger when moving it |
| setElementResizable | set the element as resizable. A handle will be displayed on the bottom right and will disappear when finish resizing |
| addElement | add a FlowElement to the dashboard |
| removeAllElements | remove all elements |
| removeElementConnection | remove the given handler connection of the given element |
| removeElementConnections | remove all the connections from the given element |
| removeElementById | remove all the elements with the given id from the dashboard |
| removeElement | remove the given element |
| addNextById | make a connection from the given sourceElement to the elements with the given id |
| saveDashboard | save the dashboard into the given file path |
| loadDashboard | clear the dashboard and load the new one |
The FlowElement
The FlowElement defines the element kind with its position, size, colors and so on.
| properties | type | description |
|---|---|---|
| position | Offset | The position of the FlowElement |
| size | Size | The size of the FlowElement |
| text | String | Element text |
| textColor | Color | Text color |
| textSize | double | Text size |
| textIsBold | bool | Makes text bold if true |
| kind | ElementKind | Element shape: enum {rectangle, diamond, storage, oval, parallelogram} |
| handlers | List | Connection handlers: enum {topCenter, bottomCenter, rightCenter, leftCenter} |
| handlerSize | Size | The size of element handlers |
| backgroundColor | Size | Background color of the element |
| borderColor | Size | Border color of the element |
| borderThickness | Size | Border thickness of the element |
| elevation | Size | Shadow elevation |
| next | List | Shadow elevation |
| relevant methods | description |
|---|---|
| setIsResizing | When setting to true, a handler will disply at the element bottom right to let the user to resize it. When finish it will disappear. |
| setText | Set element text |
| setTextColor | Set text color |
| setTextSize | Set text size |
| setTextIsBold | Set text bold |
| setBackgroundColor | Set background color |
| setBorderColor | Set border color |
| setBorderThickness | Set border thickness |
| setElevation | Set elevation |
| changePosition | Change element position in the dashboard |
| changeSize | Change element size |
Examples
Add an element to Dashboard
Dashboard dashboard = Dashboard();
///////////////////////////////////
/// Define 2 elements
FlowElement element1 = FlowElement(
/// position in the local dashboard coordinates
position: const Offset(100, 100),
/// element size
size: const Size(100, 100),
/// text to show
text: 'diamond',
/// rectangle, diamond, storage, oval or parallelogram element kind
kind: ElementKind.diamond,
/// which handler to make active
handlers: [
Handler.bottomCenter,
Handler.topCenter,
Handler.leftCenter,
Handler.rightCenter,
]);
FlowElement element2 = FlowElement(
position: const Offset(300, 100),
size: const Size(100, 150),
text: 'rect',
kind: ElementKind.rectangle,
handlers: [
Handler.bottomCenter,
Handler.topCenter,
Handler.leftCenter,
Handler.rightCenter,
]);
///////////////////////////////////
/// Add the element to Dashboard
dashboard.addElement(element);
///////////////////////////////////
/// Connect right handler of element1
/// to the left handler of element2
dashboard.addNextById(
element1,
element2.id,
ArrowParams(
thickness: 1.5,
color: Colors.Black,
startArrowPosition: Alignment.centerRight,
endArrowPosition: Alignment.centerLeft,
),
);
///////////////////////////////////
/// Save/load dashboard
Directory appDocDir =
await path.getApplicationDocumentsDirectory();
dashboard.saveDashboard('${appDocDir.path}/FLOWCHART.json');
dashboard.loadDashboard('${appDocDir.path}/FLOWCHART.json');
Comments are closed.