Implementation of SDUI with Flutter

Hello! Developers, I’m back with a #flutter recipe on building flutter UI dynamically with minimum lines of code.

I see you were so confused with the term called SDUI & what does it mean?

SDUI refers to Server Driven User Interface, i.e., the user interface, aka UI you see in the app, will be rendered through the code from the server.

for more info on the SDUI please feel free to refer my previous post

https://ravikirandhulipala.medium.com/how-apps-change-their-ui-easily-without-a-huge-update-dad8e2796073

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

To get started with Flutter, head on to flutter.dev

So let's see what we are going to cook🧑🏻‍🍳 today.

Flutter Implementation

without further delay, let's see what ingredients we need to cook it.

we need two dependencies called json_dynamic_widget and http

json_dynamic_widget | Flutter Package

http | Dart Package

we use the http package to fetch the JSON code from the server and the json_dynamic_widget package to convert it to a widget and render it onto the canvas.

First, create a flutter project in Android studio or visual studio code or whichever editor you like

Or you can use theflutter create command in your command prompt.

flutter create sduiapp
cd sduiapp

It takes few minutes to create a project.

Open pubspec.yaml file and add these two dependencies below cupertino_icons ( please be careful with the indentations)

http: ^0.13.3
json_dynamic_widget: ^2.1.0

and press ctrl + s / cmd + s or run flutter pub get command in terminal.

So you got your ingredients, and we are good to go for cooking.

Open lib/main.dart and add these two import statements at the top

import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:http/http.dart';

next replace _MyHomePageState class, with below code.

Replace line <YOUR_UICODE_URL> in line 71 with your URL containg the json code.

Code explanation

• inline no 41, we have used the FutureBuilder widget since we have to get the data via an HTTP request.
• We show a loading indicator while it fetches the data from the server.
• From lines 19 to 36, we have included the callback functions for the buttons on press activity.
• We wrote a function called _buildWidget for fetching the data from the server and converting it into a widget using JsonWidgetData.

Now it's time for the actual part of the recipe UI JSON code.

Host this JSON code on any server and provide that URL in the dart file.

The main part is adding the internet permission to the app, or else it will not load the JSON file from the server.

Open android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

add this line above the <application> tag (refer below image)

Hurray, you made it. You made your first recipe with flutter. Now it's time to taste it.

Connect your phone to your laptop and run your application to see things live.

To run your application, you can use flutter run command in your command prompt.

Make some changes to the JSON code and hit the refresh button in the app 💥 you can see the changes you made without much effort.

Build the apk using flutter build apk the command, share it with your Android friends, and surprise them with what you made.

Don't forget to appreciate my work with a 👏.

Soon I’ll be back with another exciting piece of information. Until then

stay Home 🏠

stay safe 😷

and Happy coding.