Rendering Flutter widgets from JSON easily
Creating beautiful screens on server-side!
Flutter is the Google toolkit for creating natively compiled cross-platform applications. Since its first public stable release in 2018, it has gained a lot of increasing attention, not only because it allows developing high performing apps but also the fast creation of an open-source community. From network requests packages to whole architecture patterns, pub.dev (the Dart/Flutter package manager) has become a great source of open-source code, libraries and ideas.
Let’s explore one of them, a great method to optimize the way we develop apps: the JSON Dynamic Widget package.
Common Widget Usage
Whenever we are creating Flutter apps, the core concept is:
Everything is a widget
Let’s suppose we want to create a simple app with a very important message. The code would probably look like this:
Great! Our app has what we want and it’s ready to be published. As we know, Flutter apps can be compiled as an Android app but also as an iOS app (also desktop and web, but for now we are going to ignore that). So, we compile both files and we upload the app to the stores. Everything goes well and after a couple of days, we have our app published and ready to be downloaded.
But after getting tons of downloads, the users demand a change: They want to change the background color from white to black, and the text color from black to white. Also, they don’t want the text centered, the users want the text on the upper right corner of the screen. So we start to work. We made all the changes they requested and the code now looks:
Perfect! And now we have to update the app in both stores. So we need to wait a couple of days until it’s released.
But, what if the users request a new change almost immediately? Do we have to wait until the app be released into the stores? Is there a better way? Maybe we can make these changes without updating the entire app.
And yes. We can change the app without publishing a new version for each requested change: Through the JSON Dynamic Widget package.
How does that package work? It allows us to build Flutter widgets from JSON objects! That means we can send to our app the widgets through a REST API for example, or from assets, and the app would be able to render and use them as if we wrote the Dart code!
Server Rendering
Let’s redo the previous example by using this package:
I created a simple server to make an API request to demonstrate one possible use of this package: https://medium-json-dynamic-widget.herokuapp.com/mainpage. Making an HTTP GET to this URL returns a JSON with the first screen (The simple one with the centered text) with the required format to use the JSON Dynamic Widget package. Here is the code of the server with the JSON widget it returns:
We can see all the properties we want are encoded in JSON. But, how do we use that inside Flutter?
First, we need to import the package (and the http package) into the pubspec.yaml:
http: ^0.12.2json_dynamic_widget: ^1.0.3
Also, we need to fetch our JSON from the server¹. To await fetching the widget, we can use a FutureBuilder. Finally, our app’s code looks like this:
Inside the FutureBuilder we can see the transformation from String to JSON (json.decode) and then from JSON to Widget (JsonWidgetData.fromDynamic). The app works! Here is how it looks:
And if we want to change the widget, we only need to change it on the server, we don’t need to re-compile the app and publish it to the stores!
Conclusion
This was only an introduction. This package also supports the creation and use of variables and functions inside the JSON. And even the creation of custom widgets to be encoded/decoded from JSON. For more info and examples please check out https://pub.dev/packages/json_dynamic_widget/.
Also, the app code can be found here: https://github.com/limonadev/tutorial/tree/main/json_dynamic_widget_medium
[1] This is not necessary, the JSON could be an asset inside the app but works as a demonstration of what this package can do.