AB Tests

The fast_app brick includes basic A/B testing and feature flagging for your Flutter app. It supports multiple providers, including Firebase Remote Config and PostHog.

Usage

mason make fast_app

When asked what AB testing provider you would like to use, select one of the following options:

  • Firebase Remote Config
  • PostHog

Files

The fast_ab_test brick will generate the following files:

+-- lib
     +-- features
           +-- shared
                +-- services
                     +-- ab_test_service.dart  

Details

The ab_test_service.dart file includes code to setup and run basic A/B tests. The service wil be registered as a Singleton in GetIt and can be accessed from anywhere in your app using the abTestService getter.

Included in the service is a ConfigValue enum where you can define your feature flags. These value are used in by the service functions to retrieve the associated values.

The service also provides a convenient way to turn features on and off in Flutter web using cookies.


Options

Firebase Remote Config

Select the firebase_remote_config option during creation to use Firebase Remote Config as your A/B testing provider.

Generated Code

Selecting this option will add the firebase_remote_config package to your pubspec.yaml file.

Setup

To use Firebase Remote Config, you will need to add your Firebase project configuration to your app. First, create a Firebase project in the Firebase Console. Then, add the Firebase configuration to your app by running the following command in your terminal:

flutterfire config

PostHog

Select the posthog option during creation to use PostHog as your A/B testing provider.

Generated Code

The posthog_flutter package will be added to your pubspec.yaml file.

The following meta tags will be added to your AndroidManifest.xml and Info.plist files:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.posthog_flutter_example">
    <application>
        <activity>
            [...]
        </activity>
        <meta-data android:name="com.posthog.posthog.API_KEY" android:value="YOUR_API_KEY_GOES_HERE" />
        <meta-data android:name="com.posthog.posthog.POSTHOG_HOST" android:value="https://app.posthog.com" />
        <meta-data android:name="com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS" android:value="true" />
        <meta-data android:name="com.posthog.posthog.DEBUG" android:value="true" />
    </application>
</manifest>

The following keys will be added to your Info.plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	[...]
	<key>com.posthog.posthog.API_KEY</key>
	<string>YOUR_API_KEY_GOES_HERE</string>
	<key>com.posthog.posthog.POSTHOG_HOST</key>
	<string>https://app.posthog.com</string>
	<key>com.posthog.posthog.CAPTURE_APPLICATION_LIFECYCLE_EVENTS</key>
	<true/>
	<key>com.posthog.posthog.DEBUG</key>
	<true/>
	[...]
</dict>
</plist>

The following script will be added to the head tag in your index.html file:

<script>
      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
      posthog.init('YOUR_WRITE_KEY_GOES_HERE', {api_host: 'https://app.posthog.com'})
    </script>

Setup

To use PostHog, you will need to create a PostHog account and add your project configuration to your app. First, create a PostHog project in the PostHog Console. Then, add the PostHog API key to the config file in assets/config.json.