Flutterexperts

Flutter is Google’s free, open-source software development kit (SDK) for cross-stage mobile application advancement. Utilizing a solitary stage rationalist codebase, Flutter assists developers with building superior execution, and versatile applications with alluring and utilitarian UIs for Android or IOS. Flutter depends on a library of pre-made widgets that simplify it for even individuals with restricted programming or development experience to rapidly send off their mobile applications.

From network requests packages to entire architecture patterns, pub. dev (the Dart/Flutter package manager) has turned into an incredible wellspring of open-source code, libraries, and thoughts.

This article will explore the Flutter Rendering Widgets Using JSON Data. We will see how to implement a demo program. We will be displaying the widgets on screen with the help of JSON Data using the json_dynamic_widget package in your flutter applications.

Table Of Contents::

Introduction

Implementation

Code Implement

Code File

Conclusion

---

---

Introduction:

Flutter furnishes us with countless in-built widgets, which we can straightforwardly use to make a delightful and engaging UI for our applications. In any case, the Rendering of UI through JSON Data comes into the image when we have distributed the applications onto PlayStore and AppStore and some principal UI Changes should be finished.

As of now, we need to upload the applications again on PlayStore and AppStore after rolling out the expected improvements yet if we are utilizing JSON Data for example through an API, we simply have to roll out the improvements in JSON Data, not in the applications.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  json_dynamic_widget: 

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: 

Step 2: Import

import 'package:json_dynamic_widget/json_dynamic_widget.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

First, we will be rendering the data with the help of the sample.json file on the assets folder, we can create the API for the same and render data.

{
  "args": {
    "appBar": {
      "args": {
        "title": {
          "args": {
            "text": "Flutter Rendering UI Using JSON Data"
          },
          "type": "text"
        }
      },
      "type": "app_bar"
    },
    "body": {
      "child": {
        "type": "network_image",
        "args": {
          "fit": "cover",
          "src": "https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png"
        }
      },
      "type": "center"
    }
  },
  "type": "scaffold"
}

Create a new dart file called main.dart inside the lib folder.

Inside main. dart file, we will create RenderingWidget class. In this class, first, we will add Map <dynamic, dynamic> mapData is equal to the curly bracket. Also, we will create a var registry that is equal to the JsonWidgetRegistry.instance.

Map<dynamic, dynamic> mapData = {};
var registry = JsonWidgetRegistry.instance;

Now, we will create a readJson() widget with Future<Map>. In this widget, we will add the final String response is equal to the await rootBundle.loadString (‘’your json file path‘). Then, we will add the final data is equal to the await json. decode(response) and return data.

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

In the Widget build, we will add the readJson() dot then the value is navigated to mapData is equal to the value. Then, the var widget is equal to the JsonWidgetData.fromDynamic(mapData, registry: registry), and then, return the widget!.build(context: context).

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

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

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(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
        home: const RenderingWidget());
  }
}

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

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

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

  Future<Map> readJson() async {
    final String response = await rootBundle.loadString('assets/sample.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);
  }
}

Conclusion:

In the article, I have explained the Rendering Widgets Using JSON Data in a flutter; you can modify this code according to your choice. This was a small introduction to Rendering Widgets Using JSON Data On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Rendering Widgets Using JSON Data in your flutter projects. We will show you what the Introduction is?. Make a demo program for working on Rendering Widgets Using JSON Data using the json_dynamic_widget package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---