dynamic_ui_renderer 0.0.1

A Flutter package for rendering UI from JSON responses. Build dynamic forms, screens, and components from server-driven JSON.

dynamic_ui_renderer

A powerful Flutter package for rendering UI dynamically from JSON responses.

Build forms, screens, and components from server-driven JSON — without requiring app updates.

---

✨ Features

• ✅ Render UI dynamically from JSON
• ✅ Build dynamic forms with validation
• ✅ Server-Driven UI (update without releasing new app versions)
• ✅ Extensible architecture (add custom widgets easily)
• ✅ Type-safe Dart implementation
• ✅ Lightweight (minimal dependencies)
• ✅ Well tested with strong coverage
• ✅ Production ready — reusable across multiple apps

---

📦 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  dynamic_ui_renderer: ^0.0.1

Then run:

flutter pub get

---

🚀 Quick Start

import 'package:dynamic_ui_renderer/dynamic_ui_renderer.dart';

String json = '''
{
  "type": "column",
  "children": [
    {
      "type": "text",
      "properties": {
        "text": "Hello from Server!",
        "fontSize": 24,
        "color": "#2196F3",
        "fontWeight": "bold"
      }
    },
    {
      "type": "button",
      "children": [
        {
          "type": "text",
          "properties": {
            "text": "Click Me",
            "color": "#FFFFFF"
          }
        }
      ]
    }
  ]
}
''';

Widget myUI = DynamicUIRenderer.fromJsonString(json);

---

📖 Documentation

📝 JSON Schema Reference

---

🧾 Text Widget

{
  "type": "text",
  "properties": {
    "text": "Your text here",
    "fontSize": 16,
    "fontWeight": "bold",
    "color": "#FF0000",
    "textAlign": "center"
  }
}

Supported Properties

Property	Type	Description
text	String	Required
fontSize	Number	Optional
fontWeight	String	bold, normal, w100–w900
color	String	Hex color
textAlign	String	left, center, right

---

📦 Container Widget

{
  "type": "container",
  "properties": {
    "padding": 16,
    "margin": [8, 16, 8, 16],
    "color": "#F5F5F5",
    "width": 200,
    "height": 100
  },
  "children": []
}

Notes

• padding and margin can be:

  • Single number → applied to all sides
  • List [L, T, R, B]

---

🔘 Button Widget

{
  "type": "button",
  "children": [
    {
      "type": "text",
      "properties": {
        "text": "Submit"
      }
    }
  ],
  "actions": {
    "type": "navigate",
    "route": "/details"
  }
}

Supported Actions

Action Type	Description
navigate	Navigate to a route
callback	Trigger custom callback

---

📐 Column / Row Widget

{
  "type": "column",
  "properties": {
    "mainAxisAlignment": "center",
    "crossAxisAlignment": "stretch"
  },
  "children": []
}

Supported Alignments

Main Axis

• start
• center
• end
• spaceBetween
• spaceAround
• spaceEvenly

Cross Axis

• start
• center
• end
• stretch

---

🧩 Advanced Usage

🔐 Example: Login Form

String loginFormJson = '''
{
  "type": "column",
  "children": [
    {
      "type": "text",
      "properties": {
        "text": "Welcome Back!",
        "fontSize": 28,
        "fontWeight": "bold",
        "color": "#1976D2"
      }
    },
    {
      "type": "container",
      "properties": {
        "padding": 20,
        "margin": [0, 20, 0, 0],
        "color": "#FFFFFF"
      },
      "children": [
        {
          "type": "column",
          "children": [
            {
              "type": "text",
              "properties": {
                "text": "Email",
                "fontSize": 14
              }
            },
            {
              "type": "container",
              "properties": {
                "padding": 12,
                "color": "#F5F5F5"
              },
              "children": [
                {
                  "type": "text",
                  "properties": {
                    "text": "[e-mail]"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
''';

Widget loginForm = DynamicUIRenderer.fromJsonString(loginFormJson);

---

🌐 Fetch UI from Server

Future<Widget> fetchUIFromServer() async {
  try {
    final response = await http.get(
      Uri.parse('https://api.example.com/ui/home')
    );

    if (response.statusCode == 200) {
      return DynamicUIRenderer.fromJsonString(response.body);
    }

    return const Text('Failed to load UI');
  } catch (e) {
    return Text('Network error: $e');
  }
}

---

🧪 Testing

Run tests:

flutter test

Run with coverage:

flutter test --coverage

---

🏗 Architecture Overview

• JSON → Parsed into internal model
• Widget Factory → Maps type to Flutter widgets
• Properties Parser → Converts JSON values safely
• Action Handler → Handles navigation and callbacks

Extensible architecture allows registering custom widgets easily.

---

🤝 Contributing

Contributions are welcome!

1. Fork the repository

2. Create your feature branch

   git checkout -b feature/amazing-feature
   

3. Commit your changes

   git commit -m "Add amazing feature"
   

4. Push to branch

   git push origin feature/amazing-feature
   

5. Open a Pull Request

---

📄 License

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

---

🙏 Acknowledgments

Inspired by server-driven UI patterns used at Prowork, Airbnb, Lyft, and other tech companies.

Built with ❤️ for the Flutter community.

---

📞 Support

• 📧 Email: [e-mail]
• 🐛 Issues: https://github.com/Jashwanth-Gowda-R/dynamic_ui_renderer/issues

---