{"id":15519391,"url":"https://github.com/alnitak/flutter_flow_chart","last_synced_at":"2025-04-13T10:07:33.908Z","repository":{"id":64567728,"uuid":"562207287","full_name":"alnitak/flutter_flow_chart","owner":"alnitak","description":"A #Flutter package that let you draw a flow chart diagram with different kind of customizable elements","archived":false,"fork":false,"pushed_at":"2025-03-13T15:56:07.000Z","size":13818,"stargazers_count":229,"open_issues_count":7,"forks_count":61,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-06T06:06:20.781Z","etag":null,"topics":["dashboard","diagrams","flowchart","flutter","package"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alnitak.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-05T16:24:15.000Z","updated_at":"2025-03-27T12:09:00.000Z","dependencies_parsed_at":"2024-01-16T11:40:56.003Z","dependency_job_id":"faf00025-426f-4cfe-a26b-eac874cded85","html_url":"https://github.com/alnitak/flutter_flow_chart","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnitak%2Fflutter_flow_chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnitak%2Fflutter_flow_chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnitak%2Fflutter_flow_chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnitak%2Fflutter_flow_chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alnitak","download_url":"https://codeload.github.com/alnitak/flutter_flow_chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695446,"owners_count":21146955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","diagrams","flowchart","flutter","package"],"created_at":"2024-10-02T10:21:22.379Z","updated_at":"2025-04-13T10:07:33.886Z","avatar_url":"https://github.com/alnitak.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flutter Flow Chart\n\nA package that let you draw a flow chart diagram with different kinds of customizable elements. Dashboards can be saved for later use.\n\n![Image](https://github.com/alnitak/flutter_flow_chart/raw/main/images/flowchart.gif)\n\nSee the online example [here](https://www.marcobavagnoli.com/flutter_flow_chart)\n\n## Features\n\n- _diamond, rectangle, oval, storage, parallelogram_ elements\n- elements can be customizable with background, border and text color, border thickness, text size, and weight.\n- interactively connect elements\n- save/load dashboard\n\n## Usage\n\nFirst create a _Dashboard_:\n\n```dart\nDashboard dashboard = Dashboard(\n    blockDefaultZoomGestures: false,    // optional\n    handlerFeedbackOffset: Offset.zero, // optional\n    minimumZoomFactor: 1.25,            // optional\n    defaultArrowStyle: ArrowStyle.curve,       // optional\n);\n```\n\n- Following arrow styles are available\n  - ArrowStyle.curve,\n  - ArrowStyle.segmented,\n  - ArrowStyle.rectangular,\n\nthen crete the [FlowChart] widget where you can react to the user interactions:\n\n```dart\nFlowChart(\n    dashboard: dashboard,\n    onDashboardTapped: ((context, position) {}),\n    onDashboardLongtTapped: ((context, position) {}),\n    onElementLongPressed: (context, element) {},\n    onElementPressed: (context, element) {},\n    onHandlerPressed: (context, position, handler, element) {},\n    onHandlerLongPressed: (context, position, handler, element) {},\n    onScaleUpdate: (newScale) {},\n)\n```\n\n    then use the _dashboard_ variable to add, remove, resize, etc. elements or load/save the dashboard.\n\n    In the [example](https://github.com/alnitak/flutter_flow_chart/blob/master/example/lib/main.dart), the [StarMenu](https://pub.dev/packages/star_menu) package is used to easily interact with user inputs.\n\n## The Dashboard\n\n    The **Dashboard** object contains all the methods described below used to interact with the flow chart.\n\n    | **relevant methods**       | **description**                                                                                                          |\n    | -------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\n    | _setGridBackgroundParams_  | set grid background parameters                                                                                           |\n    | _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 |\n    | _setElementResizable_      | set the element as resizable. A handle will be displayed on the bottom right and will disappear when finish resizing     |\n    | _addElement_               | add a _FlowElement_ to the dashboard                                                                                     |\n    | _removeAllElements_        | remove all elements                                                                                                      |\n    | _removeElementConnection_  | remove the given handler connection of the given element                                                                 |\n    | _removeElementConnections_ | remove all the connections from the given element                                                                        |\n    | _removeElementById_        | remove all the elements with the given id from the dashboard                                                             |\n    | _removeElement_            | remove the given element                                                                                                 |\n    | _addNextById_              | make a connection from the given sourceElement to the elements with the given id                                         |\n    | _recenter_                 | Recenter the dashboard relative to the first element in the element array                                                |\n    | _saveDashboard_            | save the dashboard into the given file path                                                                              |\n    | _loadDashboard_            | clear the dashboard and load the new one                                                                                 |\n    | _setZoomFactor_            | Zoom the entire dashboard and content by the given factor corresponding to the given epicenter                           |\n    | _dissectElementConnection_ | Dissect the connection into two segments from the given point. Only available on ArrowStyle.segmented                    |\n    | _dissectElementConnection_ | Remove dissection by the given pivot                                                                                     |\n    | _setArrowStyle_            | Update arrow style for single connection using the source and destination elements                                       |\n\n## The FlowElement\n\n    The _FlowElement_ defines the element kind with its position, size, colors and so on.\n\n    | **properties**    | **type**               | **description**                                                              |\n    | ----------------- | ---------------------- | ---------------------------------------------------------------------------- |\n    | _position_        | Offset                 | The position of the _FlowElement_                                            |\n    | _size_            | Size                   | The size of the _FlowElement_                                                |\n    | _text_            | String                 | Element text                                                                 |\n    | _textColor_       | Color                  | Text color                                                                   |\n    | _fontFamily_      | String                 | Text font family                                                             |\n    | _textSize_        | double                 | Text size                                                                    |\n    | _textIsBold_      | bool                   | Makes text bold if true                                                      |\n    | _kind_            | ElementKind            | Element shape: enum {rectangle, diamond, storage, oval, parallelogram}       |\n    | _handlers_        | List\u003cHandler\u003e          | Connection handlers: enum {topCenter, bottomCenter, rightCenter, leftCenter} |\n    | _handlerSize_     | Size                   | The size of element handlers                                                 |\n    | _backgroundColor_ | Size                   | Background color of the element                                              |\n    | _borderColor_     | Size                   | Border color of the element                                                  |\n    | _borderThickness_ | Size                   | Border thickness of the element                                              |\n    | _elevation_       | Size                   | Shadow elevation                                                             |\n    | _next_            | List\u003cConnectionParams\u003e | Shadow elevation                                                             |\n\n    | **relevant methods** | **description**                                                                                                                      |\n    | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n    | _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. |\n    | _setText_            | Set element text                                                                                                                     |\n    | _setTextColor_       | Set text color                                                                                                                       |\n    | _setTextSize_        | Set text size                                                                                                                        |\n    | _setTextIsBold_      | Set text bold                                                                                                                        |\n    | _setBackgroundColor_ | Set background color                                                                                                                 |\n    | _setBorderColor_     | Set border color                                                                                                                     |\n    | _setBorderThickness_ | Set border thickness                                                                                                                 |\n    | _setElevation_       | Set elevation                                                                                                                        |\n    | _changePosition_     | Change element position in the dashboard                                                                                             |\n    | _changeSize_         | Change element size                                                                                                                  |\n\n# Examples\n\n## Add an element to Dashboard\n\n```dart\nDashboard dashboard = Dashboard();\n\n///////////////////////////////////\n/// Define 2 elements\nFlowElement element1 = FlowElement(\n/// position in the local dashboard coordinates\nposition: const Offset(100, 100),\n/// element size\nsize: const Size(100, 100),\n/// text to show\ntext: 'diamond',\n/// rectangle, diamond, storage, oval or parallelogram element kind\nkind: ElementKind.diamond,\n/// which handler to make active\nhandlers: [\n    Handler.bottomCenter,\n    Handler.topCenter,\n    Handler.leftCenter,\n    Handler.rightCenter,\n]);\nFlowElement element2 = FlowElement(\n    position: const Offset(300, 100),\n    size: const Size(100, 150),\n    text: 'rect',\n    kind: ElementKind.rectangle,\n    handlers: [\n    Handler.bottomCenter,\n    Handler.topCenter,\n    Handler.leftCenter,\n    Handler.rightCenter,\n]);\n///////////////////////////////////\n/// Add the element to Dashboard\ndashboard.addElement(element);\n\n///////////////////////////////////\n/// Connect right handler of element1\n/// to the left handler of element2\ndashboard.addNextById(\n    element1,\n    element2.id,\n    ArrowParams(\n        thickness: 1.5,\n        color: Colors.Black,\n        startArrowPosition: Alignment.centerRight,\n        endArrowPosition: Alignment.centerLeft,\n    ),\n);\n\n///////////////////////////////////\n/// Save/load dashboard\nDirectory appDocDir = await path.getApplicationDocumentsDirectory();\n\ndashboard.saveDashboard('${appDocDir.path}/FLOWCHART.json');\n\ndashboard.loadDashboard('${appDocDir.path}/FLOWCHART.json');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falnitak%2Fflutter_flow_chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falnitak%2Fflutter_flow_chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falnitak%2Fflutter_flow_chart/lists"}