JSON Page Renderer Render complex Flutter pages directly using JSON configurations. With this package, you can create dynamic UIs by simply passing JSON strings, either from assets or API responses, to your navigation stack. This makes your Flutter app modular and highly customizable.

Features Dynamic UI Rendering: Render Flutter pages dynamically from JSON configurations. JSON-Driven Design: Design complex layouts like forms, buttons, rows, and columns entirely through JSON. Ease of Use: Seamlessly integrate with existing navigation stacks using Navigator. Customizable: Supports flexible styling and widget properties directly from JSON. Lightweight and Efficient: Reduces hardcoded UI elements and promotes reusable design principles. Getting Started To use this package, ensure you have Flutter installed and a working project. Add the following dependency to your pubspec.yaml:

yaml Copy code dependencies: json_page_renderer: ^1.0.0 Then run flutter pub get to install the package.

Usage To render a page, pass a JSON string to the renderingPage widget. Here's a quick example:

Example Code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:json_page_renderer/json_page_renderer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("JSON Page Renderer"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              String screen = await rootBundle.loadString('assets/json/screen.json');
              navigatorKey.currentState?.push(MaterialPageRoute(
                builder: (context) => RenderingPage(jsonString: screen),
              ));
            },
            child: const Text("Render Page"),
          ),
        ),
      ),
    );
  }
}

JSON Example Save the following JSON in your project (e.g., assets/json/screen.json):

{
  "type": "scaffold",
  "args": {
    "appBar": {
      "type": "app_bar",
      "args": {
        "title": {
          "type": "text",
          "args": {
            "text": "Sign Up",
            "style": {
              "color": "#000000",
              "fontWeight": "bold"
            }
          }
        },
        "backgroundColor": "#1569C7"
      }
    },
    "body": {
      "type": "single_child_scroll_view",
      "args": {
        "child": {
          "type": "column",
          "args": {
            "children": [
              {
                "type": "container",
                "args": {
                  "padding": [20, 20, 20, 20],
                  "child": {
                    "type": "safe_area",
                    "args": {
                      "child": {
                        "type": "form",
                        "args": {
                          "child": {
                            "type": "column",
                            "args": {
                              "children": [
                                {
                                  "type": "row",
                                  "args": {
                                    "children": [
                                      {
                                        "type": "asset_image",
                                        "args": {
                                          "height": 30,
                                          "width": 30,
                                          "name": "assets/images/Prefix_mobile.png"
                                        }
                                      },
                                      {
                                        "type": "sized_box",
                                        "args": {
                                          "width": 10
                                        }
                                      },
                                      {
                                        "type": "expanded",
                                        "args": {
                                          "child": {
                                            "type": "stack",
                                            "args": {
                                              "children": [
                                                {
                                                  "type": "text_form_field",
                                                  "args": {
                                                    "keyboardType": "number",
                                                    "obscureText": true,
                                                    "decoration": {
                                                      "labelText": "Enter your PIN",
                                                      "labelStyle": {
                                                        "color": "#1569C7",
                                                        "fontWeight": "bold",
                                                        "fontSize": 15
                                                      }
                                                    }
                                                  }
                                                }
                                              ]
                                            }
                                          }
                                        }
                                      }
                                    ]
                                  }
                                },
                                {
                                  "type": "elevated_button",
                                  "args": {
                                    "child": {
                                      "type": "text",
                                      "args": {
                                        "text": "Login",
                                        "style": {
                                          "color": "#FFFFFF"
                                        }
                                      }
                                    },
                                    "style": {
                                      "backgroundColor": "#1569C7"
                                    },
                                    "onPressed": "handleLogin"
                                  }
                                }
                              ]
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

Example Output A dynamically rendered page with a sign-up form, PIN input, and a login button.