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.

🎥 Video Tutorial

📚 Summary

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.

🛠️ Dependencies

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

firebase_remote_config | Flutter Package

firebase_core | Flutter Package

🔭 Implementation

→ Update the main.dart file.

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  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). 👇

Integrating Firebase and Flutter app 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']),
          child:
              toWidget(element['attributes'], element['attributes']['types']),
        );
      case 'Text':
        return Text(element['txtData']);

      default:
        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;

  @override
  State<HomePage> createState() => _HomePageState();
}

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

  @override
  void initState() {
    super.initState();
    getVal();
  }

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

  @override
  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:👉 https://www.youtube.com/watch?v=kFwrb0z5ZxE

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

VIJAY R is Content Creator

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,