Firebase remote config tutorial | Flutter

Firebase Remote Config :

Firebase Remote Config is the easiest way to customize your mobile app once you release it to play and app store’s. In general you need to update the app if you any changes.

These updates needs to be pushed to the stores after proper testing and approvals though it might be a small change but to make it live needs a lot of time.

And also all the users may not update the app once you release it so you this process may further get delayed.

To avoid all these situations we make use of a remote config option available with Firebase. Which will make it easier to deal with content changes within the app.

In this tutorial we will see firebase remote config implementation in flutter app, using which we will try to update a image and text in our app much faster than before.

Firebase Remote Config Video Tutorial :

Go through the below tutorial for more details on implementation.

pubspec.yaml :

Add the required dependencies i.e, firebase core and firebase remote config to pubspec file. Also make sure you provide the latest versions over here to avoid code level issues..

firebase_core: ^1.10.6
firebase_remote_config: ^1.0.3

main.dart :

Initialize the void main and make it async so that it will carry out initialization’s of firebase as below

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp());
}

We are creating a function to fetch the result from remote config

Future<RemoteConfig> setupRemoteConfig() async {
  final RemoteConfig remoteConfig = RemoteConfig.instance;

  await remoteConfig.fetch();
  await remoteConfig.activate();

//testing
  print(remoteConfig.getString("Text"));

  return remoteConfig;
}

Now try to call this method and capture the result in snapshot as below

FutureBuilder<RemoteConfig>(
  future: setupRemoteConfig(),
  builder: (BuildContext context, AsyncSnapshot<RemoteConfig> snapshot) {
    return snapshot.hasData
        ? Home(remoteConfig: snapshot.requireData)
        : Container(
            child: Text("No data available"),
          );
  },
),

Now we will try to create a class Home which will extend AnimatedWidget which will listen to the changes here we will listen to the new data coming from remote config.

class Home extends AnimatedWidget {

final RemoteConfig remoteConfig;

Home({required this.remoteConfig}) : super(listenable: remoteConfig);

Now we will create a design using which we will populate the data coming from remote config

SizedBox(
  height: 150.0,
),
Image.network(remoteConfig.getString("Image")),
SizedBox(
  height: 50.0,
),
Text(
  remoteConfig.getString("Text"),
  style: TextStyle(fontSize: 20.0),
),
SizedBox(
  height: 20.0,
),
Text(remoteConfig.lastFetchStatus.toString()),
SizedBox(
  height: 20.0,
),
Text(remoteConfig.lastFetchTime.toString()),
SizedBox(
  height: 20.0,
),

Add a floating action button to refresh data

FloatingActionButton(onPressed: () async {
  try {
    await remoteConfig.setConfigSettings(RemoteConfigSettings(
        fetchTimeout: Duration(seconds: 10),
        minimumFetchInterval: Duration.zero));
    await remoteConfig.fetchAndActivate();
  } catch (e) {
    print(e.toString());
  }
},child: const Icon(Icons.refresh),)

Providing the full code for Firebase remote config implementation.

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Remote Config",
    home: FutureBuilder<RemoteConfig>(
      future: setupRemoteConfig(),
      builder: (BuildContext context, AsyncSnapshot<RemoteConfig> snapshot) {
        return snapshot.hasData
            ? Home(remoteConfig: snapshot.requireData)
            : Container(
                child: Text("No data available"),
              );
      },
    ),
  ));
}

class Home extends AnimatedWidget {
  final RemoteConfig remoteConfig;

  Home({required this.remoteConfig}) : super(listenable: remoteConfig);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Remote Config"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Column(
            children: [
              SizedBox(
                height: 150.0,
              ),
              Image.network(remoteConfig.getString("Image")),
              SizedBox(
                height: 50.0,
              ),
              Text(
                remoteConfig.getString("Text"),
                style: TextStyle(fontSize: 20.0),
              ),
              SizedBox(
                height: 20.0,
              ),
              Text(remoteConfig.lastFetchStatus.toString()),
              SizedBox(
                height: 20.0,
              ),
              Text(remoteConfig.lastFetchTime.toString()),
              SizedBox(
                height: 20.0,
              ),
              FloatingActionButton(onPressed: () async {
                try {
                  await remoteConfig.setConfigSettings(RemoteConfigSettings(
                      fetchTimeout: Duration(seconds: 10),
                      minimumFetchInterval: Duration.zero));
                  await remoteConfig.fetchAndActivate();
                } catch (e) {
                  print(e.toString());
                }
              },child: const Icon(Icons.refresh),)
            ],
          ),
        ),
      ),
    );
  }
}

Future<RemoteConfig> setupRemoteConfig() async {
  final RemoteConfig remoteConfig = RemoteConfig.instance;

  await remoteConfig.fetch();
  await remoteConfig.activate();

//testing
  print(remoteConfig.getString("Text"));

  return remoteConfig;
}

Output :

The screen below depicts the usage of firebase remote config in flutter app.

If you are having any query’s in this tutorial on firebase flutter config do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.