A #Flutter package that let you draw a flow chart diagram with different kind of customizable elements

Overview

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.

Image

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');
You might also like...

Design system flutter - A framework contains SBB (Swiss Federal Railways) UI elements for Flutter Apps

Design System Mobile for Flutter Design System Mobile in Flutter (yes, it could

Dec 22, 2022

A periodic table app with 3D view of the elements built using flutter.

A periodic table app with 3D view of the elements built using flutter.

A flutter app which takes you on a 3d visualisation of the 118 elements of the periodic table. promo.mp4 Tech Stack Deployed using How it all began It

Nov 16, 2022

A modern app made with Flutter to track the chemical elements.

A modern app made with Flutter to track the chemical elements.

Elements A modern app to track the chemical elements. Including all 118 elements, with their weight, radiation, consistency, type, block, and electron

Nov 28, 2021

Canton Design System elements and resources for Flutter.

Canton Design System elements and resources for Flutter.

Canton UI Canton UI elements and resources for Flutter. Examples in Apps Notes App News App Elisha Description This includes things such as themes (co

Dec 17, 2022

A simple widget for having UI elements that respond to taps with a spring animation.

spring_button A simple widget for having child widgets that respond to gestures with a spring animation. Media | Description | How-to-Use Media Watch

Oct 26, 2022

Grad text package - A Flutter Widget to draw gradients into text

Grad text package - A Flutter Widget to draw gradients into text

grad_text A Flutter Widget to draw gradients into text.(Null safe) Demo Install

Jan 31, 2022

Pokedex-Flutter - Pokedex demonstrates modern Flutter development with GetX, Hive, Flow, Adaptive/Responsive Design

Pokedex-Flutter - Pokedex demonstrates modern Flutter development with GetX, Hive, Flow, Adaptive/Responsive Design

Pokedex-Flutter Pokedex demonstrates modern Flutter development with GetX, Hive,

Aug 17, 2022

App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

Rotas app App que simula um fluxo de telas para o curso de navegação e rotas com

Dec 19, 2021
Comments
  • Text Editor Bug/Crash

    Text Editor Bug/Crash

    Hello Marco,

    We notice when using your flutter_flow_chart, that when attempting to input text into an object, the editor quickly closes (before we can input any text), due to the following exception (see below):

    Note: The exception below can cause the flutter app (consisting solely of your code example) to crash (please see attached video Bug-Crash.mp4 for more information).

    https://user-images.githubusercontent.com/33987270/203934265-b4b59bc5-0f3d-44b7-bb6a-35f1156af026.mp4

    `======== Exception caught by scheduler library ============================================== The following assertion was thrown during a scheduler callback: Cannot get renderObject of inactive element.

    In order for an element to have a valid renderObject, it must be active, which means it is part of the tree. Instead, this element is in the _ElementLifecycle.defunct state. If you called this method from a State object, consider guarding it with State.mounted. The findRenderObject() method was called for the following element: StatefulElement#6d185(DEFUNCT) no widget When the exception was thrown, this was the stack: #0 Element.findRenderObject. (package:flutter/src/widgets/framework.dart:4093:9) #1 Element.findRenderObject (package:flutter/src/widgets/framework.dart:4106:6) #2 StarMenuState._showMenu (package:star_menu/src/star_menu.dart:387:36) #3 StarMenuState.showMenu (package:star_menu/src/star_menu.dart:375:7) #4 StarMenuState.resetForChanges (package:star_menu/src/star_menu.dart:236:7) #5 StarMenuState.didChangeMetrics. (package:star_menu/src/star_menu.dart:221:7) #6 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15) #7 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:9) #8 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1015:5) #9 _invoke (dart:ui/hooks.dart:148:13) #10 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:318:5) #11 _drawFrame (dart:ui/hooks.dart:115:31) ==============================================================================`

    Thank you for any help you can provide.

    opened by bl12345 2
Owner
Marco Bavagnoli
C/C++, Qt Ambassador, Certified BlackBerry Builder for Native, Android java/NDK but Flutter :blue_heart: dev
Marco Bavagnoli
A CustomPaint example where we can draw with different colors and different stroke sizes

CustomPaint A CustomPaint example where we can draw with different colors and different stroke sizes. A Flutter application which runs on iOS, Android

Behruz Hurramov 0 Dec 27, 2021
This project is a NGO which let you donate anything or even let you ask for help to people.

ngo_app This app is written in flutter using dart language. Getting Started This project is a NGO which let you donate anything or even let you ask fo

null 1 May 8, 2022
Dart Class Diagram Generator

Dart Class Diagram Generator A small command line utility to generate a class (UML or similar) diagram from a Dart package. Examples Below is a UML di

George Lesica 118 Dec 29, 2022
A Flutter package with an advanced dropdown Button which let you give different design on DropdownButton

Use decorated_dropdown button to add DropdownButton with decoration properties l

Hari Prasad Chaudhary 1 Dec 17, 2021
In this app, it's possible to find some different kind of flutter animations

flutter_animations Apprendre à utiliser les animations avec Flutter Getting Started This project is a starting point for a Flutter application. A few

MOISE Rajesearison 0 Dec 24, 2021
This package allows you to draw dotted lines with Flutter.

About This package allows you to draw dotted lines with Flutter. Usage Parameter Default Description direction Axis.horizontal The direction of the en

umechanhika 33 Nov 16, 2022
[email protected] - A third party Weibo client for Android with Material You theming (iOS version later). 💪 Powered by Flutter 💪

[email protected] - A third party Weibo client for Android with Material You theming (iOS version later). ?? Powered by Flutter ??

妇校长 6 Sep 19, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Adam Jonsson 364 Dec 6, 2022
Doddle - A Flutter app where you can draw symmetrical drawing

doddle - (still under development) Amazing magical doodle game provide a creativ

Naser 53 Dec 28, 2022
It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Parabeac-Core Parabeac-Core converts design files into Flutter code driven by open-source & community. Contribute · Discord Community · Designer Proto

Parabeac 536 Jan 4, 2023