# How to Customize your Flutter App features Using Firebase Remote Config

## Introduction

[Flutter](https://flutter.dev/) is a popular open-source framework for building cross-platform mobile applications. It enables developers to create visually appealing and feature-rich apps that run smoothly on both iOS and Android. However, as apps grow in complexity, there's often a need to customize features on the fly without having to go through the entire development process. This is where Firebase Remote Config comes into play.

It’s a stressful and time-consuming process updating a mobile application that is already out in production, having to go through the uploading process, and also waiting for your app to be reviewed before updates are released. Firebase Remote Config makes it easier to change the behavior and appearance of our app without necessarily rolling out a new release for users to download.

In this article, you will explore how Firebase Remote Config can be used to customize your Flutter app's features, giving you the ability to update app configurations and settings in real-time. Whether you're a beginner or an experienced Flutter developer, this guide will provide you with the tools and knowledge you need to take your app to the next level.

## What is Firebase Remote Config?

Firebase Remote Config is a cloud-based service provided by Google’s Firebase platform that allows developers to dynamically change the behavior and appearance of their mobile applications without having to release a new app version. With Firebase Remote Config, developers can define and update app configuration values, such as text strings, themes, and feature flags, in real-time from a remote server. These values can then be fetched and applied within the app at runtime, enabling developers to make instant changes to their apps without having go through the time-consuming and stressful process of updating the app in production.

Firebase Remote Config is especially useful for A/B testing, enabling developers to test new features with a subset of users before rolling them out to the entire user base. This way, developers can get feedback on new features and make data-driven decisions about which changes to keep and which to discard.

Overall, Firebase Remote Config is a powerful tool that helps Flutter developers streamline the app development process, allowing them to quickly and easily customize their apps and deliver new features and improvements in real-time.

## Prerequisite

- A [Firebase Console](https://console.firebase.google.com) Account.

## Firebase Remote Config Installation

In this tutorial, you can work with your existing flutter application or you can create a new flutter app by following [flutter documentation](https://docs.flutter.dev/get-started/install).

Before installing the firebase remote, you will need to [add firebase to your flutter application](http://firebase.google.com/docs/flutter/setup?platform=ios). After which you can proceed with the few steps below.

- Add the firebase remote config plugin by running the command below from the root directory of your flutter project:

flutter pub add firebase_remote_config

- Adding the Firebase SDK for Google Analytics will also be needed for your app. You can add this by running the command below:

flutter pub add firebase_analytics

- Start your project:

flutter run

## Creating Parameter Values.

To be able to control your app behaviors remotely, you will need to define parameters and their respective values. To do this, go to your project on [firebase console](http://console.firebase.google.com) dashboard and click the Remote Config tab which is located in the left down, under the Build drop-down.


Then click on the Create Configuration button, this button will bring up a form for you to add parameters, the fields may include:

- Parameter name (The name used to access the parameter).
- Data type (The data type for the parameter).
- Description (A breif description about the parameter, this is optional).
- Default value(The default value for the parameter).

In this case, you be will setting two parameters:
* First, for your app’s primary color.
* Second, to control the behavior of the greeting dialog in your app.

Create first parameter


Edit parameter


## Setting Conditions

You can set conditions for these parameters so that they can have different values depending on specific conditions (which may include platform, languages, country/region, date time, etc).

To do this, Go to Add New => Conditional value => Create new condition

Here a dialog will pop up for you to fill in the conditions for this parameter. In this case, you will be setting different values for your parameters depending on the platform (IOS/Android) then click save.

Define Conditions


Edit parameters for condition


Finally, click on publish changes.

## Create Firebase Remote Config Service Class
Here are steps to create a Firebase Remote Config Service class in Flutter:

### Create Dart class

You will create a services folder that will contain a dart class named `RemoteConfigService.dart`


### Create helper methods

You will create two methods inside our `RemoteConfigService` class.

1. The `_init` method: This will be a private method. Inside here you will create a firebase remote config instance, set configurations for the remote config object, and `Fetch` and `Activate` all remote parameters. Your code should look like this :

  _init() async {
    final remoteConfig = FirebaseRemoteConfig.instance;
    await remoteConfig
        .setConfigSettings(RemoteConfigSettings(
      fetchTimeout: const Duration(microseconds: 1),
      minimumFetchInterval: const Duration(milliseconds: 100),
    ))
        .then((value) async {
      await remoteConfig.fetchAndActivate();

    });
  }

The create method : This method initializes FirebaseRemoteConfig by calling the _init method. Now the RemoteConfigService.dart should look like the code block below:

import 'dart:developer';

import 'package:firebase_remote_config/firebase_remote_config.dart';

class RemoteConfigsService {
  RemoteConfigsService._();

  /// [RemoteConfigsService] factory constructor.
  static Future<RemoteConfigsService> create() async {
    final RemoteConfigsService remoteConfigsService = RemoteConfigsService._();
    await remoteConfigsService._init();
    return remoteConfigsService;
  }

  _init() async {
    final remoteConfig = FirebaseRemoteConfig.instance;
    await remoteConfig
        .setConfigSettings(RemoteConfigSettings(
      fetchTimeout: const Duration(microseconds: 1),
      minimumFetchInterval: const Duration(milliseconds: 100),
    ))
        .then((value) async {
      await remoteConfig.fetchAndActivate();

      log('Initialized');
    });
  }
}

Here you used the `setConfigSettings()` method to set remote configurations for the current `FirebaseRemoteConfig` instance.

## Integrating into Flutter Project Using Parameters.

Now it's time to integrate your flutter project to work with your already defined parameters on the firebase console.

This tutorial will be working with a greeting app, which will display greetings according to the current time. It will use values from the firebase config to decide if to show these greetings using a dialog or bottom sheet. And it will also use these values to decide the primary color of your app.

To do this, start with the following steps:

1. Create a `RemoteConfigKeys.dart` class, this class will contain all our parameter keys:

class RemoteConfigKeys{
  static const String primaryColor = 'primary_color';
  static const String showDialog = 'show_dialog';
}

2. Initialize your firebase app and call the `create` method defined in the `RemoteConfigsService` class, in the `main.dart` file before the app runs:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await RemoteConfigsService.create();
  runApp( MyApp());
}

The above code will initialize a Firebase app, configure Firebase Remote Config and also `Fetch` and `Activate` all remote parameters.

Get the `primary_color` parameter value and use it as your app’s primary color.

class MyApp extends StatelessWidget {
  MyApp({super.key});

  FirebaseRemoteConfig firebaseRemoteConfig = FirebaseRemoteConfig.instance;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Greeting App',
      theme: ThemeData(
        primaryColor: HexColor.fromHex(
            firebaseRemoteConfig.getString(RemoteConfigKeys.primaryColor)),
      ),
      home: const HomeScreen(),
    );
  }
}

In the above code, you declared an instance of the `FirebaseRemoteConfig` class which will be used to retrieve the primary color value and use it as your app’s primary color.

Get the `show_dialog` parameter value in our home screen and use it to switch between showing a dialog or a bottom sheet. The `Homescreen.dart` file should look like this:

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _greeting = '';
  FirebaseRemoteConfig firebaseRemoteConfig = FirebaseRemoteConfig.instance;

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

    _updateGreeting();

//Periodically updating greeting
    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _updateGreeting();
      });
    });
  }

// Updating the greeting variable with respect to time 

  void _updateGreeting() {
    var now = DateTime.now();
    if (now.hour < 12) {
      _greeting = 'Hello Good morning';
    } else if (now.hour < 17) {
      _greeting = ' Hello Good afternoon';
    } else {
      _greeting = 'Good evening';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text('Greeting App'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'Hello \nWelcome to the greeting App',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 16,
              ),
              const Text('Click on the button below to show greeting'),
              const SizedBox(
                height: 16,
              ),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Theme.of(context).primaryColor,
                  ),
                  onPressed: () {
										// Retreiving the value for the show_dialog parameter and 
										// using its value to decide if to show a dialog of bottomsheet
                    firebaseRemoteConfig.getBool(RemoteConfigKeys.showDialog)
                        ? showDialog(
                            context: context,
                            builder: (context) => Dialog(
                                shape: const RoundedRectangleBorder(),
                                child: SizedBox(
                                  height: 200,
                                  child: GreetingWidget(
                                    greeting: _greeting,
                                  ),
                            )),
                          )
                        : showModalBottomSheet(
                            context: context,
                            constraints: const BoxConstraints(maxHeight: 200),
                            builder: (context) =>
                                GreetingWidget(greeting: _greeting));
                  },
                  child: const Text('Show greeting'))
            ],
          ),
        ),
      ),
    );
  }

In the above code, you designed your home screen to have an app bar and an elevated button. After which you created an `_updateGreeting()` method which updates a greeting String variable concerning the current time. Also, you created an instance of `FirebaseRomoteConfig` that was used to retrieve the `show_dialog` boolean parameter. And finally, you used the value of this parameter to determine the behavior of your greeting app either to show greetings using a dialog or a bottom sheet.

## Testing App

You can test your app with the command below:

flutter run

### ANDROID RESULT


### IOS RESULT


Bravos! You have just integrated our app to have different appearance and behavior on `IOS` and `ANDROID`

## Conclusion.

In conclusion, customizing your Flutter app's features has never been easier, thanks to Firebase Remote Config. This powerful tool allows you to change the behavior and appearance of your app on-the-fly, without the need to re-publish it in the app stores.

Whether you want to experiment with different features, target specific groups of users, or simply update your app's look and feel, Firebase Remote Config makes it all possible. With its user-friendly interface, detailed documentation, and seamless integration with Flutter, Firebase Remote Config is an essential tool for any Flutter app developer looking to bring their app to the next level.

You can take your app to the next level and start customizing its features like never before, get started with Firebase Remote Config today!