flow chart app with zoomable canvas

Widgets & Design

Hi everyone,

I'm new to flutterflow and don't have experience in flutter. I only know basic html/css.

I want to build a "sport MindMapping app" in FlutterFlow that requires a zoomable, interactive mind map interface similar to a flowchart( attached image is an iOS app called MindNotes )

Is it possible to build such an app in FlutterFlow ?
Is there an example of such an app ?

Thank you !

What have you tried so far?

I've asked chatgpt and it gave me the following :

1. Canvas Zoom and Pan:

  • FlutterFlow doesn’t have built-in support for fully zoomable and pannable canvases.

  • However, you could create a pseudo-zoom effect by allowing elements to scale up or down when users interact with them, simulating a zoomed view.

  • For true zoom and pan functionality, you’d likely need to use custom Flutter code (e.g., using a Transform widget with GestureDetector for pinch-to-zoom and drag). You can integrate custom code in FlutterFlow by using custom actions or custom widgets, though this requires knowledge of Flutter.

2. Interactive Mind Map with Expandable Nodes:

  • The structure of linked nodes, like a mind map, can be achieved by placing widgets in a stack or dynamically using collections (like Firestore) to populate the content.

  • Each node (e.g., "Subtopic") could be a button or a container that navigates to additional details or branches.

3. Scrolling or Dragging for Navigation:

  • You could use a Stack widget inside a SingleChildScrollView for horizontal and vertical scrolling, enabling users to navigate through a large layout.

  • For a more fluid navigation experience, you'd again need custom code to add features like dragging across the screen.

Did you check FlutterFlow's Documentation for this topic?
No
2
1 reply