Complete Guide to Flows - Visual Logic Builder

What Are Flows?

Flows are Codular's visual logic system. Instead of writing code, you connect nodes in a graph to define what happens when users interact with your app.

Key Concepts

• Event (Start) - every flow begins with an event trigger
• Nodes - action blocks that do something (navigate, set variable, show alert)
• Edges - connections between nodes that define execution order
• Variables - data that flows can read and modify

Flow Node Categories

Trigger

Node	Description
Event (Start)	Every flow starts here

Actions

Node	Description
Navigate to Screen	Go to another screen
Set Variable	Store/update a value
Show Alert	Popup dialog
Show Toast	Brief message
API Call	Fetch data from web
Delay / Wait	Pause before continuing
Share	Open share dialog
Open URL	Open in browser
Copy to Clipboard	Copy text
Vibrate	Haptic feedback

Logic

Node	Description
If / Else	Branch on condition
Loop	Repeat actions
Switch	Multi-way branch

Data

Node	Description
Get Variable	Read a value
Transform Data	Map, filter, sort arrays
Console Log	Debug output

Storage

Node	Description
Save to Storage	Persist data on device
Load from Storage	Retrieve saved data
Remove from Storage	Delete saved data

Cloud Database

Node	Description
Read from Database	Fetch rows (Supabase/Firebase)
Insert into Database	Add new row
Update in Database	Modify existing rows
Delete from Database	Remove rows

Auth

Node	Description
Sign In	Login user
Sign Up	Create account
Sign Out	Logout
Get Current User	Get user info

Payments

Node	Description
Initiate Payment	Start Razorpay/Stripe/PayPal
Verify Payment	Confirm with server
Purchase Product	Google Play purchase
Check Subscription	Check if active

Building Your First Flow

Example: Todo App

• Add Item Flow:

Event (AddButton.onPress) → Set Variable (todoList, append from inputText) → Set Variable (inputText, clear) → Show Toast ("Added!")

• Delete Item Flow:

Event (List.onItemPress) → Show Alert ("Delete?") → Set Variable (todoList, remove item)

• Save Flow:

Event (after add/delete) → Save to Storage ("todos", todoList)

• Load Flow:

Event (Screen.onLoad) → Load from Storage ("todos", todoList)

Connecting on Mobile

On mobile, use the Connections panel in node properties:

• Tap a node to select it
• Scroll to "Connections" section
• Use the dropdown to connect to another node
• Tap the unlink icon to remove connections

Pro Tips

• Keep flows short and focused - one flow per action
• Name your flows descriptively (e.g. "Add Todo Item")
• Use variables to pass data between screens
• Test flows in Preview before building
• Use Console Log nodes to debug

Start building at mobcraft.in.