Published in


Flutter-Server Driven UI -using Firebase Remote Config

In this article we will discuss about how to perform server driven UI using Firebase remote config service in our Flutter app.

Using Server Driven UI we will be able to update the UI components or their layouts in real-time without updating the app. This technique avoids the need for users to re-install or update the entire app just to visualize the changes in UI components. This is made possible by storing the piece of code right in the server (meta data of the layouts) and then using the logic in the front-end code to render the corresponding components in the screen. In our case we shall get the help of Firebase service called the Firebase Remote Config, which will help us implement this technique in our flutter app.

In the pubspec.yaml file try adding these two packages. 👇

→ Update the main.dart file.

Future main() async {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
runApp(const MyApp());

→ Create a project in Firebase and integrate it with our flutter app.

To integrate our flutter app with Firebase, Check out our article that will guide us with the integration process (easily integrate Firebase and flutter apps in 3 simple steps). 👇

→ Create JSON data in Firebase Remote Config

After completing the integration process, in the Firebase console, navigate to remote config service and start by creating a parameter containing the JSON values as follows 👇

  • Specify the parameter name (eg.,DynamicWidget in our case).
  • Set the data type as JSON
  • If you want, you can apply conditional check (condition can be based on date/time, region, platform etc.,)
  • Then finally specify the JSON for value and default value tabs.

→ Read JSON data from Firebase Remote Config

After creating the data in Firebase, let’s now try to read that data from our flutter app.

  final remoteConfig = FirebaseRemoteConfig.instance;

Future initializeConfig() async {
await remoteConfig.setConfigSettings(RemoteConfigSettings(
fetchTimeout: const Duration(minutes: 30),
minimumFetchInterval: const Duration(minutes: 30),
await remoteConfig.fetchAndActivate();
var temp = remoteConfig.getString('DynamicWidget');
return temp;

With the help of above function we will be able to read the JSON bundle from the Firebase. All we need to do is just pass in the key (DynamicWidget) to the getString() method.

→ Map JSON data to Flutter Widgets

We have successfully read the data from Firebase, Now let’s start writing the logic for mapping the JSON data to corresponding Flutter Widgets.

The decoding logic is as follows.,

class MapDataToWidget {
List<Widget> serverWidgets = [];

mapWidgets(serverUI) {
for (var element in jsonDecode(serverUI)) {
String type = element['type'];
serverWidgets.add(toWidget(element, type));
return serverWidgets;

toWidget(element, type) {
switch (type) {
case 'FlutterLogo':
return FlutterLogo(
size: (element['size']).toDouble(),
case 'Container':
return Container(
width: (element['width']).toDouble(),
height: (element['height']).toDouble(),
color: HexColor(element['color']),
toWidget(element['attributes'], element['attributes']['types']),
case 'Text':
return Text(element['txtData']);

return (const Text('Error'));

→ Update the UI components

Now we have the UI data ready to be rendered in the screen. Hence the Homepage.dart file can we written as follows.,

class HomePage extends StatefulWidget {
const HomePage({super.key, required this.title});

final String title;

State<HomePage> createState() => _HomePageState();

class _HomePageState extends State<HomePage> {
List<Widget> serverWidgets = [];

void initState() {

getVal() async {
var serverJsonList = (await FirebaseRemoteConfigClass().initializeConfig());
() => serverWidgets = MapDataToWidget().mapWidgets(serverJsonList));

Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(appBarTitle: widget.title),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [...serverWidgets],

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉



A list of Flutter Tutorials and app templates

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vijay R

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: