Dynamic UI Executor

A powerful Flutter plugin that enables you to build beautiful, interactive user interfaces dynamically at runtime from JSON or String definitions. Perfect for server-driven UI, A/B testing, and rapid prototyping.

Features

• Dynamic Widget Creation: Build Flutter widgets from JSON or string definitions
• Runtime UI Generation: Create and modify UI components on the fly
• Server-Driven UI: Update your app's interface without app store releases
• 50+ Supported Widgets: Comprehensive support for Flutter's most common widgets
• Action Handling: Built-in support for user interactions and callbacks
• Theme Integration: Seamless integration with Flutter's theming system
• Cross-Platform: Works on Android, iOS, Web, Windows, macOS, and Linux
• A/B Testing Ready: Perfect for testing different UI configurations
• Easy Integration: Simple API with minimal setup required

Quick Start

Installation

• Scaffold, AppBar, Column, Row, Stack, Positioned
• Container, SizedBox, Padding, Center, Expanded, Flexible
• Wrap, SingleChildScrollView, ListView, GridView

Material Widgets

• Card, ListTile, Divider, Chip
• ElevatedButton, TextButton, OutlinedButton, IconButton
• FloatingActionButton, Switch, TextField

Display Widgets

• Text, Icon, Image.network, Image.asset
• CircleAvatar

Advanced Features

• Color Support - 20+ predefined colors plus custom hex colors
• Icon Library - 25+ commonly used Material icons
• Image Handling - Network and asset images with error handling
• Responsive Layouts - Flexible and expanded widgets
• Action System - Custom event handling with parameter passing
• Cross-Platform: Works on iOS, Android, Web, and Desktop
• Enterprise-Grade: Includes error handling, logging, and validation

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  dynamic_ui_executor: ^1.0.0

Then run:

flutter pub get

Quick Start

String-Based UI Definition

import 'package:flutter/material.dart';
import 'package:dynamic_ui_executor/dynamic_ui_executor.dart';

class MyApp extends StatelessWidget {
  final String serverWidgetString = """
    Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to Dynamic UI!'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () { print('Button Pressed'); },
              child: Text('Click Me'),
            )
          ],
        ),
      ),
    )
  """;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DynamicWidgetExecutor(
        widgetDefinition: serverWidgetString,
        actionHandler: (action, [params]) {
          if (action == "showSnackBar") {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text("Button Pressed!"))
            );
          }
        },
      ),
    );
  }
}

JSON-Based UI Definition

final Map<String, dynamic> jsonUI = {
  "type": "scaffold",
  "properties": {
    "appBar": {
      "type": "appbar",
      "properties": {
        "title": {
          "type": "text",
          "properties": {"text": "JSON UI Demo"}
        }
      }
    },
    "body": {
      "type": "center",
      "children": [
        {
          "type": "column",
          "children": [
            {
              "type": "text",
              "properties": {
                "text": "Hello from JSON!",
                "style": {
                  "fontSize": 24,
                  "fontWeight": "bold",
                  "color": "Colors.blue"
                }
              }
            },
            {
              "type": "elevated_button",
              "properties": {
                "action": "showSnackBar",
                "actionParams": {"message": "JSON Button Clicked!"},
                "child": {
                  "type": "text",
                  "properties": {"text": "Click Me"}
                }
              }
            }
          ]
        }
      ]
    }
  }
};

// Use it in your widget
DynamicWidgetExecutor(
  widgetDefinition: jsonEncode(jsonUI),
  isJson: true,
  actionHandler: myActionHandler,
)

Supported Widgets

Layout Widgets

• Scaffold: Main app structure with AppBar, body, etc.
• Column: Vertical layout
• Row: Horizontal layout
• Stack: Overlapping widgets
• Center: Centers child widget
• Container: Box model with padding, margin, decoration
• Padding: Adds padding around child
• Expanded: Takes available space in Flex widgets
• Flexible: Flexible space allocation

Display Widgets

• Text: Text display with styling
• Image: Network and asset images
• Icon: Material Design icons
• Card: Material Design card

Interactive Widgets

• ElevatedButton: Raised button with elevation
• TextButton: Flat text button

List Widgets

• ListView: Scrollable list of widgets

Utility Widgets

• SizedBox: Fixed size spacing
• AppBar: Application bar for Scaffold

Action Handling

The plugin provides a flexible action handling system:

void handleAction(String action, [Map<String, dynamic>? params]) {
  switch (action) {
    case 'navigate':
      Navigator.pushNamed(context, params?['route'] ?? '/');
      break;
    case 'showSnackBar':
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(params?['message'] ?? 'Action executed'))
      );
      break;
    case 'custom':
      // Handle custom actions
      break;
  }
}

Built-in Actions

• navigate: Navigate to routes
• showSnackBar: Display snack bars
• showDialog: Show alert dialogs
• setState: Trigger UI refresh

Styling and Theming

Text Styling

{
  "type": "text",
  "properties": {
    "text": "Styled Text",
    "style": {
      "fontSize": 18,
      "fontWeight": "bold",
      "color": "#FF5722",
      "fontFamily": "Roboto"
    }
  }
}

Color Formats

• Hex: "#FF5722" or "#FFFF5722"
• Flutter Colors: "Colors.blue"
• RGBA: {"r": 255, "g": 87, "b": 34, "a": 1.0}
• Integer: 0xFF5722

Padding and Margins

{
  "padding": {"all": 16},
  "margin": {
    "left": 8,
    "top": 16,
    "right": 8,
    "bottom": 16
  }
}

Error Handling

The plugin includes comprehensive error handling:

DynamicWidgetExecutor(
  widgetDefinition: invalidDefinition,
  errorWidget: Container(
    child: Text('Custom error message'),
  ),
)

Custom Widget Extensions

Extend the plugin with custom widgets:

final customParsers = {
  'myCustomWidget': (BuildContext context) {
    return MyCustomWidget();
  },
};

DynamicWidgetExecutor(
  widgetDefinition: definition,
  customParsers: customParsers,
)

Validation

The plugin validates widget definitions before parsing:

import 'package:dynamic_ui_executor/dynamic_ui_executor.dart';

// Validate JSON
final result = DynamicUIValidator.validateJson(jsonData);
if (!result.isValid) {
  print('Validation errors: ${result.errors}');
}

// Validate string
final stringResult = DynamicUIValidator.validateString(stringDefinition);
if (stringResult.hasIssues) {
  print('Issues found: ${stringResult.message}');
}

Use Cases

• Enterprise Apps: Dynamic dashboards and forms
• CMS-Driven Apps: Content-managed layouts
• A/B Testing: Runtime UI variations
• Multi-tenant Apps: Customizable interfaces per tenant
• Remote Configuration: Update UI without app store releases

Example App

Run the example app to see the plugin in action:

cd example
flutter run

The example demonstrates both string and JSON-based dynamic UIs with interactive elements.

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.