Flutter : Dynamically Customize Your App’s Appearance with Firebase Remote Config
As a mobile developer, you’re always trying to deliver fresh and engaging user experiences. But pushing frequent app updates to tweak the UI can be time-consuming and may lead to user fatigue. This is where Firebase Remote Config comes in handy. It’s a powerful tool that allows you to modify your app’s appearance and behavior on the fly, without the need for an app store release. In this guide, we’ll walk through how to use Firebase Remote Config in a simple Flutter app to toggle a festive Christmas mode dynamically.
Prerequisites
- Flutter SDK: Installed and configured on your development machine.
- Firebase Project: A Firebase project created via the Firebase Console.
- FlutterFire CLI: Installed for Firebase configuration (Installation Guide).
If you don’t know how to add firebase to to your project, refer this article.
Setting Up Firebase in Your Flutter Project
First, integrate Firebase into your Flutter project. This involves adding the necessary Firebase packages and initializing Firebase in your app.
1. Add Firebase Dependencies
Update your pubspec.yaml to include the required Firebase packages.
dependencies:
flutter:
sdk: flutter
firebase_core: ^3.8.1
firebase_remote_config: ^5.2.0
simple_snowfall: ^1.0.0 # For the snow animationRun flutter pub get to fetch the packages.
2. Initialize Firebase
//main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MainApp());
}Note: Ensure you have the firebase_options.dart file generated by the FlutterFire CLI, which contains your Firebase project configuration.
Configuring Firebase Remote Config
Below is a wrapper class around FirebaseRemoteConfig(singleton object).
/// A service class that wraps Firebase Remote Config functionality.
///
/// This class provides methods to manage remote configuration values
/// specifically for Christmas mode feature.
///
/// Example usage:
/// ```dart
/// final remoteValueService = RemoteValueService(remoteConfig: firebaseRemoteConfig);
/// await remoteValueService.setDefaultsAndFetch();
/// await remoteValueService.setConfigurations();
/// bool isChristmasModeEnabled = remoteValueService.christmasModeEnabledKey;
/// ```
///
/// The service includes:
/// * Setting default values and fetching remote config
/// * Configuring fetch timeout and interval settings
/// * Retrieving Christmas mode enabled status
import 'package:firebase_remote_config/firebase_remote_config.dart';
/// Wrapper around [FirebaseRemoteConfig].
class RemoteValueService {
static const _christmasModeEnabledKey = 'christmas_mode';
FirebaseRemoteConfig remoteConfig;
RemoteValueService({required this.remoteConfig});
Future<void> setDefaultsAndFetch() async {
await remoteConfig.setDefaults(<String, dynamic>{
_christmasModeEnabledKey: false,
});
await remoteConfig.fetchAndActivate();
}
Future<void> setConfigurations() async {
await remoteConfig.setConfigSettings(RemoteConfigSettings(
fetchTimeout: const Duration(minutes: 1),
minimumFetchInterval: const Duration(seconds: 20),
));
}
bool get christmasModeEnabledKey => remoteConfig.getBool(
_christmasModeEnabledKey,
);
}2. Understanding the Service
- _christmasModeEnabledKey: The key used to toggle Christmas mode.
- setDefaultsAndFetch(): Sets default values and fetches remote configurations.
- setConfigurations(): Configures fetch settings like timeout and fetch interval.
- christmasModeEnabledKey: Getter to retrieve the current value of the Christmas mode flag.
Implementing Remote Config in Flutter
With Firebase and Remote Config set up, let’s implement the UI logic that reacts to remote configuration changes.
//main.dart
class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
final remoteConfig =
RemoteValueService(remoteConfig: FirebaseRemoteConfig.instance);
late bool isChristmas;
@override
void initState() {
super.initState();
isChristmas = remoteConfig.christmasModeEnabledKey;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
body: Center(
child: isChristmas
? Stack(
children: [
const Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: Center(
child: Text(
'Merry Christmas 🎅🎄🎁!!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
),
SnowfallWidget(
gravity: 0.1,
windIntensity: 1,
size: Size(
MediaQuery.sizeOf(context).width,
MediaQuery.sizeOf(context).height,
),
),
],
)
: const Text('Hello World!'),
),
);
}
}UI Behavior
- Normal Mode: Displays a simple “Hello World!” message.
- Christmas Mode: Shows a festive message with a snowfall animation.
Updating Remote Config Parameters
To dynamically change the app’s appearance without an update, update the Remote Config parameters via the Firebase Console.
1. Navigate to Remote Config
2. Add Parameter
3. Create a New Parameter Value
Fill the parameter name and press save button.
4. Publish Changes
After you save the parameter press the publish changes button.
Go back to your Remote Config Console and look at the value in the Fetch column and you’ll see that it changed to 100%.
That’s it!Now hotstart the app. now your users can feel the christmas eve in your app.
Also if you think you don’t want to restart the app. You can Listen for updates in real time. For that use the below code snippet.
remoteConfig.onConfigUpdated.listen((event) async {
await remoteConfig.activate();
// Use the new config values here.
});Checkout Full Source Code.
Happy coding, and may your strings always concatenate smoothly! 🚀✨ Also Don’t forget to drop me a few claps 👏 👏 👏 … !
Contact me via LinkedIn
