Render Dynamic Flutter Widgets Using JSON

2 min readJul 4, 2022

Sometimes we observe the UI or feature changes in the applications like Facebook, Instagram, Whatsapp, etc. without getting any new release or update on the Play Store or App Store.
How does this magic happen without a new version release?

Basically, it's all about dynamic applications which means you can control your frontend features and UI from the backend and render it using the JSON responses.

Now, let’s discover this unique trick to develop dynamic applications.

Introduction

In this article, we will learn about rendering dynamic widgets using JSON with the help of the json_dynamic_widget package in your flutter applications.

This package helps us to create a widget tree in terms of JSON format and render it dynamically so in the future we can modify our widgets without rolling out the new version of the application to store again.

Implementation

Step#01

Initially, we need to add the json_dynamic_widget dependency to the pubspec.yaml file of the project.

dependencies:
  json_dynamic_widget:
  flutter:
    sdk: flutter

Run the flutter pub get command to get the package details into the project.

Step#02

Import the dependency to the main.dart file.

Step#03

Let’s create a JSON to generate the dynamic widgets. You can get the JSON via Restful API as well.

JSON is a key-value data structure so keep in mind that the type key will indicate the widget like a scaffold, column, row, circular_progress_indicator, network_image, etc whereas the args key indicates the properties of the widget like height, width, body, appBar, color, etc.

Step#04

Now, move to the main.dart file, create a class with any name just like DynamicWidgets, and follow the steps.

Initialize a variable of type Map in which we will hold our JSON and assign a default widget json.

Create a variable to hold the JSON registry instance.

Write a function to read JSON from assets.
You can place an API function as well if your data is coming from API.

Finally, override the build function of the class by returning the build state of the JsonWidgetData object after getting the dynamic widgets JSON.