Flutter update widgets using firebase remote config

Question

I am working on a flutter app and I want to update the widgets of a page without pushing new updates on the play store. I have researched a bit on this topic and found that I can use firebase remote config. My idea is to use firebase remote config to fetch the widgets and show them on the app so that I don't need to publish frequent updates for small changes.

For Example, the below code is used to show a circular loading bar:

import 'package:flutter/material.dart';

class LoadingWidget extends StatelessWidget {
  const LoadingWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: const CircularProgressIndicator(
        color: Colors.black,
      ),
    );
  }
}

But now even for the smallest change, let it be changes in color, alignment, or size I need to push a new update to the play store and users need to install the new update in order to reflect the changes.

I want to store the flutter widget in firebase remote config (JSON format) then in the app, it will fetch the JSON data from remote config and show the new changes.

user_9665257 · Answer

Once your RemoteConfig, you need do add key-value pair to match your needs:

key   : value
color : black

Thenm fetch the value:

myRemoteColor = remoteConfig.getString('color')

Now, your myRemoteColor has a string with value black.

user_209103 · Answer

Since you already know that Remote Config only stores primitive values, the problem becomes how to encode and decode a Flutter widget into a string.

I doubt that is going to be simple though, as it'd mean that your application would need to compile the JSON/string into a binary. You'd essentially be implementing something akin to Flutter's Hot Reload for your remote clients, something that'd be pretty cool but is not a built-in feature.

More feasible is to control specific widgets that you already have in your code, as for example Rubens answered. In a recent sample app I used Remote Config to enable/disable a new feature (a process known as feature flagging) with:

class _MyHomePageState extends State {
  final FirebaseRemoteConfig remoteConfig;

  _MyHomePageState(this.remoteConfig);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: remoteConfig.getBool("chat_enabled") ? 3 : 2,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                const Tab(icon: Icon(Icons.games_outlined)),
                const Tab(icon: Icon(Icons.swap_vert_circle_outlined)),
                if (remoteConfig.getBool("chat_enabled")) const Tab(icon: Icon(Icons.chat_bubble_outlined)),
              ],
            ),
            title: Text(widget.title),
          ),
          body: TabBarView(
            children: [
              const MyGame(key: Key('game')),
              const Leaderboard(key: Key('leaderboard')),
              if (remoteConfig.getBool("chat_enabled")) const Messageboard(key: Key('messageboard')),
            ],
          ),
        ),
      ),
    );
  }

Flutter update widgets using firebase remote config

2 Answers