zeba_academy_ai_ui_builder

A powerful Flutter package to build UI dynamically from JSON with support for dynamic forms, remote UI updates, theme switching, A/B testing, and widget plugins.

This package enables developers to change UI without updating the app, making it ideal for low‑code platforms, admin dashboards, and remotely configurable apps.

✨ Features

  • 🔧 Dynamic UI Builder Build Flutter widgets directly from JSON configuration.

  • 🧩 Dynamic Forms Generate forms dynamically with validation and state management.

  • 🌐 Remote UI Updates Update UI remotely without publishing a new app version.

  • 🎨 Theme Switching Support for light/dark and custom themes dynamically.

  • 🧪 A/B Testing Support Serve different UI versions to different users.

  • 🔌 Widget Plugin System Register custom widgets and use them in JSON layouts.

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_ai_ui_builder: ^1.0.0

Then run:

flutter pub get

🚀 Basic Usage

Example JSON UI

{
  "type": "column",
  "children": [
    {
      "type": "text",
      "data": "Welcome to Zeba Academy"
    },
    {
      "type": "button",
      "label": "Click Me"
    }
  ]
}

Build UI from JSON

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

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    final jsonUI = {
      "type": "text",
      "data": "Hello Dynamic UI"
    };

    return Scaffold(
      appBar: AppBar(title: const Text("Dynamic UI Example")),
      body: DynamicUIBuilder.build(jsonUI),
    );
  }
}

🧩 Dynamic Form Example

{
  "type": "form",
  "fields": [
    {
      "type": "text",
      "label": "Name"
    },
    {
      "type": "email",
      "label": "Email"
    }
  ]
}

🔌 Register Custom Widget

You can extend the system by registering custom widgets.

DynamicWidgetRegistry.register(
  "customCard",
  (config) => Card(
    child: Text(config["text"]),
  ),
);

Then use it in JSON:

{
  "type": "customCard",
  "text": "Hello Plugin Widget"
}

🧪 A/B Testing Example

Serve different UI layouts dynamically.

if (userGroup == "A") {
  loadLayout("layout_a.json");
} else {
  loadLayout("layout_b.json");
}

📂 Project Structure

lib/
 ├─ core/
 │   ├─ dynamic_ui_builder.dart
 │   ├─ widget_registry.dart
 │
 ├─ widgets/
 │   ├─ text_widget.dart
 │   ├─ button_widget.dart
 │
 ├─ forms/
 │   ├─ dynamic_form.dart
 │
 └─ zeba_academy_ai_ui_builder.dart

🎯 Use Cases

This package is perfect for:

  • Low‑code Flutter apps
  • Admin controlled UI systems
  • Feature experiments
  • Dynamic form builders
  • Remote UI configuration
  • White‑label applications

📚 Documentation

For full tutorials and guides:

https://zeba.academy/flutter/

🤝 Contributing

Contributions are welcome.

  1. Fork the repository
  2. Create a new feature branch
  3. Commit your changes
  4. Submit a pull request

📄 License

This project is licensed under the GNU General Public License v3.0.

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at

https://sufyanism.com/

Or connect with me on LinkedIn

https://www.linkedin.com/in/sufyanism

🚀 Zeba Academy – Your All-in-One No-Bloat Tech Hub

🚀 Explore cutting-edge resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated directives, real-world projects, and hands-on experience. Level up your tech game today.

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy ➡ Explore hands-on courses and resources: https://code.zeba.academy ➡ Check out our YouTube tutorials: https://www.youtube.com/@zeba.academy ➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting.

Libraries

zeba_academy_ai_ui_builder