zeba_academy_ai_ui_builder 1.0.0

Build Flutter UI dynamically using JSON with dynamic forms, remote UI updates, theme switching, A/B testing and widget plugin system.

example/lib/main.dart

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

void main() {

  WidgetRegistry.register("text", (node) => DynamicText(node));
  WidgetRegistry.register("button", (node) => DynamicButton(node));
  WidgetRegistry.register("container", (node) => DynamicContainer(node));

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  ThemeMode themeMode = ThemeMode.light;

  void toggleTheme() {
    setState(() {
      themeMode =
      themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Zeba Academy AI UI Builder",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      darkTheme: ThemeData.dark(useMaterial3: true),
      themeMode: themeMode,
      home: HomePage(toggleTheme: toggleTheme),
    );
  }
}

class HomePage extends StatelessWidget {

  final VoidCallback toggleTheme;

  const HomePage({super.key, required this.toggleTheme});

  @override
  Widget build(BuildContext context) {

    final jsonUI = {
      "type": "container",
      "children": [
        {
          "type": "text",
          "props": {"text": "🚀 Zeba Academy AI UI Builder"}
        },
        {
          "type": "text",
          "props": {"text": "Build Flutter UI dynamically from JSON"}
        },
        {
          "type": "button",
          "props": {"text": "Get Started"}
        }
      ]
    };

    final formFields = [
      FormFieldModel(name: "name", type: "text", label: "Full Name"),
      FormFieldModel(name: "email", type: "text", label: "Email"),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text("AI UI Builder"),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.dark_mode),
            onPressed: toggleTheme,
          )
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [

            /// HEADER
            Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.blue.shade400,
                    Colors.purple.shade400,
                  ],
                ),
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Column(
                children: [
                  Icon(Icons.auto_awesome, color: Colors.white, size: 48),
                  SizedBox(height: 10),
                  Text(
                    "Zeba Academy AI UI Builder",
                    style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 6),
                  Text(
                    "Build Flutter UI dynamically using JSON configuration.",
                    style: TextStyle(color: Colors.white70),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),

            const SizedBox(height: 30),

            /// DYNAMIC UI SECTION
            _sectionTitle("Dynamic UI from JSON"),

            Card(
              elevation: 3,
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: DynamicUIBuilder(json: jsonUI),
              ),
            ),

            const SizedBox(height: 30),

            /// FORM SECTION
            _sectionTitle("Dynamic Form Builder"),

            Card(
              elevation: 3,
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: DynamicForm(
                  fields: formFields,
                  onSubmit: (data) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text("Submitted: $data"),
                      ),
                    );
                  },
                ),
              ),
            ),

            const SizedBox(height: 30),

            /// AB TEST SECTION
            _sectionTitle("A/B Testing"),

            Card(
              elevation: 3,
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Row(
                  children: [
                    const Icon(Icons.science, size: 30),
                    const SizedBox(width: 12),
                    Expanded(
                      child: Text(
                        "Selected Variant: ${ABTestManager.chooseVariant(["Variant A", "Variant B"])}",
                        style: const TextStyle(fontSize: 18),
                      ),
                    ),
                  ],
                ),
              ),
            ),

          ],
        ),
      ),
    );
  }

  Widget _sectionTitle(String text) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          text,
          style: const TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}