Integrate Firebase Remote Config in Flutter

Vandana Sharma

1 May 2023

In this blog, we will learn “Integrate Firebase Remote Config in Flutter“.

First of all, let’s discuss remote Config.

Firebase Remote Config is a cloud service that lets you do any change in your app without requiring users to download for updates.

When using Remote Config, you create in-app default values that control your app.

Then, you can later use the Firebase console to override in-app default values for all app users.

Your app controls when updates are applied, and it can frequently check for updates.

Then apply them with a negligible impact on performance.

By creating a dummy project, I’ll explain the implementation of the firebase remote config in flutter.

Read more about Flutter app development company.

Implementation:-

Add the following dependency in your Pubspec.yaml file.

Step 1: Add dependancy

dependencies:
  flutter:
    sdk: flutter
  firebase_remote_config: ^0.11.0+1

dependencies:

flutter:

sdk: flutter

firebase_remote_config: ^0.11.0+1

Step 2: Method Implementation

Import the following packages.

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

1 2	import 'package:firebase_remote_config/firebase_remote_config.dart'; import 'package:firebase_core/firebase_core.dart';

add the following code in your file where you want the changes at runtime.

Also added the keys which you wanna change and keys should same as in your firebase console.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Author:$author",//key i want to change at runtime
              style: TextStyle(fontSize: 30),
            ),
            Text(
              "channel:$channel",//key i want to change at runtime
              style: TextStyle(fontSize: 28),
            )
          ],
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text(

"Author:$author",//key i want to change at runtime

style: TextStyle(fontSize: 30),

Text(

"channel:$channel",//key i want to change at runtime

style: TextStyle(fontSize: 28),

)

);

}

Step 3: initialise the remote config in initState method

Now, you need to add the following code in your initState method.

@override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) async {
final remoteConfig = await RemoteConfig.instance;
final defaultValue=<String,dynamic>{
'author':'developer',
"channel":"developer"
};
try {
await remoteConfig.setConfigSettings(RemoteConfigSettings(
fetchTimeout: const Duration(hours: 4), //cache refresh time
minimumFetchInterval: Duration.zero,
));
await remoteConfig.fetchAndActivate();

} on PlatformException catch (exception) {
// Fetch exception.
print(exception);
} catch (exception) {
print('Unable to fetch remote config. Cached or default values will be '
'used');
print("exception===>$exception");
}
setState(() {

author = remoteConfig.getString("author");
channel = remoteConfig.getString("channel");

});
});
}

@override

void initState() {

super.initState();

WidgetsBinding.instance!.addPostFrameCallback((_) async {

final remoteConfig = await RemoteConfig.instance;

final defaultValue=<String,dynamic>{

'author':'developer',

"channel":"developer"

};

try {

await remoteConfig.setConfigSettings(RemoteConfigSettings(

fetchTimeout: const Duration(hours: 4), //cache refresh time

minimumFetchInterval: Duration.zero,

));

await remoteConfig.fetchAndActivate();

} on PlatformException catch (exception) {

// Fetch exception.

print(exception);

} catch (exception) {

print('Unable to fetch remote config. Cached or default values will be '

'used');

print("exception===>$exception");

}

setState(() {

author = remoteConfig.getString("author");

channel = remoteConfig.getString("channel");

});

}

now refer the following image for firebase console changes in the remote config service.

that’s it on the firebase console, now publish the changes and re-run your application.

you will observe that changes are drawn in the application too.

see the output in the below-attached image.

Here you can see that I have done the changes to my firebase console.

And those changes are reflected in my application.

NOTE:-Please, be confirm that your project should be registered on the flutter firebase console.

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding of integrating firebase remote config in flutter.

Thanks for reading.😇