Remote config enables you to update your Flutter app's settings and behavior instantly without deploying new code or waiting for app store approval. This makes it perfect for controlling features on the fly and disabling problematic features if needed.
This tutorial shows you how to set up remote config in your Flutter app using PostHog. We'll create a basic Flutter app that displays a company logo and message, both of which we'll control using remote config.
1. Create a new Flutter app
First, ensure the Flutter extension for VS Code is installed and then create a new app by opening the VS Code command palette (Ctrl/Cmd + Shift + P), typing flutter and selecting Flutter: New Project.
Select Empty Application and name your app flutter_remote_config. Once created, replace your code in lib/main.dart with the following:
Dart
import'package:flutter/material.dart';
voidmain(){
runApp(constMyApp());
}
classMyAppextendsStatelessWidget{
constMyApp({super.key});
@override
Widgetbuild(BuildContext context){
returnconstMaterialApp(
title:'Flutter PostHog remote config demo',
home:MainScreen(),
);
}
}
classMainScreenextendsStatelessWidget{
constMainScreen({super.key});
@override
Widgetbuild(BuildContext context){
returnScaffold(
appBar:AppBar(
title:constText('PostHog remote config demo'),
),
body:Center(
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[
Image.network(
'https://picsum.photos/200',// We'll update this with remote config
width:200,
height:200,
),
constSizedBox(height:20),
constText(
'Welcome message goes here',// We'll update this with remote config
style:TextStyle(fontSize:20),
),
],
),
),
);
}
}
To test this works, we check for the emulation devices available with flutter devices and run the app for one of them. We'll use the web version and launch it like this:
Terminal
flutter run -d chrome
2. Add PostHog to your app
With our app set up, it's time to install and set up PostHog. If you don't have a PostHog instance, you can sign up for free.
To start, install PostHog's Flutter SDK by adding posthog_flutter to your pubspec.yaml:
YAML
dependencies:
flutter:
sdk: flutter
posthog_flutter: ^4.0.1
Next, we configure PostHog in each platform using our project API key and instance address which you can find in your project settings.
Android setup
For Android, add your PostHog configuration to your AndroidManifest.xml file located in android/app/src/main folder:
Under Served value, select Remote config (single payload)
Set the payload to a string of an image. We'll use PostHog's logo at "/brand/posthog-logo@2x.png"
Click Save
After this, repeat steps 1-5 to create another flag with key welcome-message and payload of "Welcome to our awesome app!"
4. Implement remote config in Flutter
Finally, we'll update our app to use these remote config values. To do this, we start by creating a new file in lib named config_provider.dart. In this file we create a ConfigProvider to manage our remote config state.
Finally, add the provider package to your pubspec.yaml:
YAML
dependencies:
flutter:
sdk: flutter
posthog_flutter: ^4.0.1
provider: ^6.1.1
Now, when we run our app, it fetches and displays the remote config values from PostHog. You either press r in the terminal or run your emulation device like flutter run -d chrome again to show this in action: