DIGIT Flow Builder

A JSON-driven dynamic UI rendering framework that builds complete screens and workflows from configuration.

Overview

DIGIT Flow Builder is a powerful JSON-driven dynamic UI rendering framework that enables the creation of configurable forms and templates without code changes. It provides a declarative approach to building complex user interfaces with integrated state management, data binding, and action handling capabilities.

Link to the Pub Package:

digit_flow_builder | Flutter packageDart packages

Features

• Render complete screens (forms or templates) from JSON flow configuration registered in FlowRegistry

• Two screen types — FORM (powered by digit_forms_engine) and TEMPLATE (custom layout with 26+ widgets)

• 12 built-in action types — create, update, search, navigate, scan QR, show toast, clear state, and more

• Conditional action execution — run actions only when formula conditions are met

• Template interpolation — dynamically resolve values in labels, properties, and actions using {{key}} syntax

• Bidirectional pagination with scroll listeners

• Transform form data to entities and reverse-transform entities back to form data for editing

• Accumulated search filters across multiple search interactions

• Custom widget registration — plug in your own widgets alongside built-in ones

• Screen capture protection on sensitive screens

Screen Types

Type	Description	Powered By
FORM	Multi-page configurable forms with validation, visibility conditions, and summary	digit_forms_engine
TEMPLATE	Custom layouts with header, body, footer using 26+ built-in widgets	WidgetRegistry

Supported Actions

Action	Description
CREATE_EVENT	Create new entities from form data
UPDATE_EVENT	Update existing entities with change detection
SEARCH_EVENT	Search entities with filters, pagination, and proximity
REFRESH_SEARCH	Re-execute previous search with new pagination
FETCH_TRANSFORMER_CONFIG	Map form data to entity models using transformer config
REVERSE_TRANSFORM	Map entities back to form data for pre-filling
NAVIGATION	Navigate to another page or flow (push, replace, pop)
BACK_NAVIGATION	Handle back button with custom logic
OPEN_SCANNER	Open QR/barcode scanner
CLEAR_STATE	Clear filters, widget data, or full state
CLOSE_POPUP	Close an action popup

Built-in Widgets (for TEMPLATE screens)

Category	Widgets
Layout	Column, Row, Card, Expandable, Panel Card
Input	Text Input, Dropdown, Radio, Switch, Search Bar, Filter
Display	Text, Tag, Icon, Info Card, Menu Card, Label Pair List, Table
List	ListView (with scroll pagination)
Selection	Selection Card
Scanner	QR Scanner, QR View
Navigation	Button, Back Link, Action Popup
Search	Proximity Search

How It Works

1. The host application registers flow configs into FlowRegistry

2. ScreenBuilder reads the config from the registry and checks the screen type

3. FORM screens are handed off to digit_forms_engine for rendering

4. TEMPLATE screens are rendered by LayoutRendererPage using WidgetRegistry

5. User interactions trigger actions defined in the config

6. ActionHandler executes the right action executor based on actionType

7. State is managed per screen instance via FlowCrudStateRegistry

Sequence Diagram