flowboard_flutter 0.0.3

A versatile suite of UI components and flow management tools for building dynamic onboarding and dashboards in Flutter.

Flowboard

A generic, JSON-driven UI rendering engine for Flutter.

Features

• Dynamic layout engine (Column, Row, Container, etc.)
• Advanced Layering (stack, positioned) for complex UI
• Premium Styling (Gradients for buttons, containers, and text)
• FontAwesome 6 Icon Support via Hex Codes
• Form inputs, sliders, Lottie animations, and more.

Documentation

• UI Components Guide - Recommended for SaaS Team
• Icon System Guide

Usage

import 'package:flowboard_flutter/flowboard.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Flowboard.init(
    apiToken: 'YOUR_BEARER_TOKEN',
    debug: true,
  );
  runApp(const MyApp());
}

Launch a specific onboarding by ID:

await Flowboard.launchOnboardingById(
  context,
  onboardingId: 'FLOW_ID',
  locale: 'fr_FR',
  version: FlowboardFlowVersion.draft,
);

Custom Navigation

Use jump_to when a widget should navigate directly to a specific screen by ID:

{
  "type": "button",
  "action": "jump_to",
  "actionData": {
    "screenId": "signup"
  },
  "properties": {
    "label": "Jump to Sign Up"
  }
}

Inside a custom screen, the same behavior is available through FlowboardContext.onJumpTo:

customScreenBuilder: (ctx) {
  return ElevatedButton(
    onPressed: () => ctx.onJumpTo('signup'),
    child: const Text('Jump to Sign Up'),
  );
},

Icon System (Guide for SaaS Team)

The icon component uses FontAwesome 6. To ensure 100% compatibility without code changes, we use Hex Codes.

⚠️ Tree-shaking on iOS
Apple requires IconData instances to be compile-time constants. Because Flowboard resolves icons dynamically from JSON, you might need to disable the icon handler temporarily (and show placeholders) when submitting an app. Pass enableFontAwesomeIcons: false to FlowboardRenderer to force every icon to render as a generic helper icon until the store review is complete.

JSON Structure

{
  "type": "icon",
  "properties": {
    "icon": "HEX_CODE",   // e.g., "f004"
    "style": "STYLE",     // "solid", "regular", or "brands"
    "size": 24,           // Optional, default 24
    "color": "0xFF000000" // Optional, default black
  }
}

How to Find the Hex Code

1. Go to the FontAwesome Search.
2. Find your icon (e.g., "Heart").
3. Copy the Unicode/Hex value (e.g., f004).
4. Choose your style (solid is usually default).

Examples

Solid Heart (Red)

{
  "type": "icon",
  "properties": {
    "icon": "f004",
    "style": "solid",
    "color": "0xFFFF0000"
  }
}

Regular Heart (Outlined)

{
  "type": "icon",
  "properties": {
    "icon": "f004",
    "style": "regular",
    "color": "0xFF000000"
  }
}

Apple Logo (Brand)

{
  "type": "icon",
  "properties": {
    "icon": "f179",
    "style": "brands",
    "size": 32
  }
}