A/B tests help you improve your Flutter app by enabling you to compare the impact of changes on key metrics. To show you how to set one up, we create a basic Flutter app, add PostHog, create an A/B test, and implement the code for it.
1. Create a new Flutter app
Our app will have two screens:
The first screen will have a button which takes you to a second screen.
The second screen will either have a red or green background color, depending on whether the user is in the control or test variant of our A/B test. This screen will also have a button which captures an event when it's pressed. We'll use this event as our goal metric for our test.
To set this up, install the Flutter extension for VS Code. Then, create a new app by opening the Command Palette in VS Code (Ctrl/Cmd + Shift + P), typing flutter and selecting Flutter: New Project.
Select Empty Application and name your app flutter_ab_tests. Then, replace your code in lib/main.dart with the following:
lib/main.dart
import'package:flutter/material.dart';
import'feature_screen_view.dart';
voidmain(){
runApp(constMyApp());
}
classMyAppextendsStatelessWidget{
constMyApp({super.key});
@override
Widgetbuild(BuildContext context){
returnconstMaterialApp(
title:'Flutter A/B Test App',
home:MainScreen(),
);
}
}
classMainScreenextendsStatelessWidget{
constMainScreen({super.key});
@override
Widgetbuild(BuildContext context){
returnScaffold(
appBar:AppBar(title:constText('Main Screen')),
body:Center(
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[
constText('Hello, world!'),
ElevatedButton(
child:constText('Go to Next Screen'),
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(builder:(context)=>constFeatureScreenView(isTestVariant:false)),// We update this later
);
},
),
],
),
),
);
}
}
Lastly, in the lib directory, create a new file for our second screen called feature_screen_view.dart. Add the following code to it:
<meta-dataandroid:name="com.posthog.posthog.POSTHOG_HOST"android:value="https://us.i.posthog.com"/><!-- usually 'https://us.i.posthog.com' or 'https://eu.i.posthog.com' -->
You'll also need to update the minimum Android SDK version to 21 in android/app/build.gradle:
android/app/build.gradle
// rest of your config
defaultConfig {
minSdkVersion 21
// rest of your config
}
// rest of your config
iOS setup
For iOS, you'll need to have Cocoapods installed. Then add your PostHog configuration with your project API key and instance address to the Info.plist file located in the ios/Runner directory:
The first part of setting up our A/B test in PostHog is setting up the goal metric. We'll use the number of clicks on the button on FeatureScreenView as our goal.
To measure this, we capture a custom eventfeature_button_clicked when the button is clicked. To do this, update the code in feature_screen_view.dart to call Posthog().capture in onPressed:
That's it! Your A/B test is now ready. When you run your app, you see either green or red as the background color of FeatureScreenView and PostHog will capture button clicks for each variant to calculate if changing the color has a statistically significant impact.