Rendering Widgets Using JSON in Flutter

Tanya Goel

4 July 2023

Rendering Widgets Using JSON in Flutter, thinking about is it really even possible.

The answer is a big “YES“.

Read about the Flutter app development services offered by Mobikul.

So here we will be displaying the widgets on screen with the help of JSON Data.

Now, the Most Important Question arises, we are already having widgets in a flutter with some well-defined properties, then What is the need of rendering the widgets with the help of JSON??

Flutter provides us with a huge number of in-built widgets, which we can directly use to create a beautiful and appealing UI for our applications.

But, the Rendering of UI through JSON Data comes into the picture when we have published the apps on to PlayStore and AppStore and some basic UI Changes need to be done.

Currently, we have to upload the apps again on PlayStore and AppStore after making the required changes but if we are using JSON Data i.e. through an API, we just need to make the changes in JSON Data, not in the apps.

Steps for Rendering UI through JSON Data

Step – 1-> Firstly, we will need to add the json_dynamic_widget dependency in pubspec.yaml file

json_dynamic_widget: ^5.0.0+1

1	json_dynamic_widget: ^5.0.0+1

Step – 2-> In order to bring data from the server API, we will also need to add a networking package.

Here, we can use the HTTP package.

http: ^0.13.4

1	http: ^0.13.4

In this blog, we will be rendering the data with the help of a .json file, we can create the API for the same and render data.

JSON File

{
  "args": {
    "appBar": {
      "args": {
        "title": {
          "args": {
            "text": "Rendering UI Through JSON Data"
          },
          "type": "text"
        }
      },
      "type": "app_bar"
    },
    "body": {
      "child": {
        "type": "network_image",
        "args": {
          "fit": "fitWidth",
          "src": "https://i.pinimg.com/originals/c2/23/88/c22388a126bd2c5e479821bb61f663ea.jpg"
        }
      },
      "type": "center"
    }
  },
  "type": "scaffold"
}

{

"args": {

"appBar": {

"args": {

"title": {

"args": {

"text": "Rendering UI Through JSON Data"

"type": "text"

}

"type": "app_bar"

"body": {

"child": {

"type": "network_image",

"args": {

"fit": "fitWidth",

"src": "https://i.pinimg.com/originals/c2/23/88/c22388a126bd2c5e479821bb61f663ea.jpg"

}

"type": "center"

}

"type": "scaffold"

}

Final Code

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:json_dynamic_widget/json_dynamic_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: const DynamicRendering());
  }
}

class DynamicRendering extends StatefulWidget {
  const DynamicRendering({Key? key}) : super(key: key);

  @override
  _DynamicRenderingState createState() => _DynamicRenderingState();
}

class _DynamicRenderingState extends State<DynamicRendering> {
  Map<dynamic, dynamic> mapData = {};
  var registry = JsonWidgetRegistry.instance;

  Future<Map> readJson() async {
    final String response = await rootBundle.loadString('assets/ui.json');
    final data = await json.decode(response);
    return data;
  }

  @override
  Widget build(BuildContext context) {
    readJson().then((value) => mapData = value);
    var widget = JsonWidgetData.fromDynamic(mapData, registry: registry);
    return widget!.build(context: context);
  }
}

import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:json_dynamic_widget/json_dynamic_widget.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.red,

home: const DynamicRendering());

}

class DynamicRendering extends StatefulWidget {

const DynamicRendering({Key? key}) : super(key: key);

@override

_DynamicRenderingState createState() => _DynamicRenderingState();

}

class _DynamicRenderingState extends State<DynamicRendering> {

Map<dynamic, dynamic> mapData = {};

var registry = JsonWidgetRegistry.instance;

Future<Map> readJson() async {

final String response = await rootBundle.loadString('assets/ui.json');

final data = await json.decode(response);

return data;

}

@override

Widget build(BuildContext context) {

readJson().then((value) => mapData = value);

var widget = JsonWidgetData.fromDynamic(mapData, registry: registry);

return widget!.build(context: context);

}

Output

Here’s the final output

Conclusion

In this blog, we have discussed how can we render the UI in Flutter apps using JSON Data.

I hope it will help you out in understanding.

Here, are some of the blogs you can check out – https://mobikul.com/blog/

Thanks for reading!!

References

https://medium.com/@limonadev/rendering-flutter-widgets-from-json-easily-3db02490519e

https://pub.dev/packages/json_dynamic_widget