Flutter is Google’s open-source SDK for building multi-platform apps. In the years since its launch, it’s become one of the most widely used tools for cross-platform development. We want to make it easy for developers to integrate Split into their apps by releasing this official Flutter plugin for Split.
This post will explore how we’d use it with a simple use case. We’ll demonstrate how to verify which design for a particular screen in our app is most suitable for maximizing purchases.
Our Experiment
Imagine we have our Flutter app and want to ensure we’re showing our users the most effective design for a particular screen.
We can’t know with certainty which of our design choices is best, so we need to create an experiment to find that out. Lucky for us, we know that Split can help us with this.
Connecting Split Mobile SDKs
Before getting into the plugin usage, let’s take a step back and consider what it’s meant up to this point to use Split in Flutter. If you’ve tried it, you had two options, each with its own set of challenges:
Option 1: Create a Plugin Yourself
Build an interface in Dart with the functionality you needed from the SDK, and use a platform channel to communicate with our native SDKs.
This means, you’d have to:
- Take care of properly delivering messages between Flutter and each native platform
- Ensure you keep SDK versions up to date
- Face challenges when implementing new features
Option 2: Communicate With Our API
Performing HTTP requests to interact with the platform; which entails:
- Synchronization, caching and evaluation logic need to be implemented
- Limited functionality
- Lots of work for even basic usage
Regardless of your integration implementation process, building and maintaining it is a hassle. More importantly, it undeniably distracts you from working on features that provide value to your users.
At Split, we love to provide developers with the best possible experience, which is why we’re taking on the responsibility of handling that extra work for you. Let’s take a look at how easy it can be to implement our experiment using our Flutter plugin.
Step 1: Set Up
First things first: We need to add the Flutter plugin to our project’s dependencies. At the time of this writing, the latest version is 0.1.2. Make sure to verify that on pub.dev:
dependencies:
split: any # replace with the latest versionNext, we should instantiate the plugin object and get a reference to our client. The client instance will allow us to check the treatment value for this specific user:
final Splitio _split = Splitio("my_split_api_key", "user_identifier");
final SplitClient _client = await _split.client().whenReady();Step 2: Create the Feature Flag
To be able to switch between the two screen variants, we must have a split in place.
Let’s create one in the Split console and call it “buy_screen.” To do so, navigate to splits in the left menu and click on the “Create split” button at the top.
We’ll set the treatments of this split to be “variant_1” and “variant_2” for each screen option.
Once we’ve done that, we can check the treatment value for our split in our app to decide which screen to build:
String? _screenVariant;
@override
void initState() {
super.initState();
_client
.getTreatment('buy_screen')
.then((treatment) => setState(() => _screenVariant = treatment));
}
@override
Widget buildScreen(BuildContext context) {
if (_screenVariant == 'variant_1') {
return _buildScreenOne();
} else if (_screenVariant == 'variant_2' {
return _buildScreenTwo();
} else {
return _buildLoadingIndicator();
}
}Step 3: Track an Event
To measure which variant is most successful, we need a metric and, for that, we’ll create a “purchase” event.
Since we’re interested in measuring how effective our layout is in maximizing purchase actions, we should track the event when tapping the BUY button. We can use our previously created client to do so:
PurchaseButton(
onPressed: makePurchase
);
// code...
void makePurchase async {
_client.track('purchase');
_purchaseService.buy();
}The Split platform will keep track of this event and use it to determine whether any of our screens is better than the other.
Measuring Impact
Once we’ve launched this experiment to our customers, we can check from the Split console for the results. For example, it may show that our first variant has increased our purchases by 10 percent! This is very helpful in itself; we’ve ensured we’re launching the most suitable screen design. But we can dig deeper:
Adding properties to our track method, we can extend it to include details like:
- The total purchase amount
- Amount of items in the cart
- Least or most expensive item in the cart
With this new information, we could reach conclusions that can help us better understand our users’ behavior. We can take action to adjust our product to suit their needs better.
Summary
Although this was a simple example, it illustrates how easy it is to integrate feature flagging in a Flutter application and quickly get valuable data to help your business perform better.
What’s Next?
Initially we are launching this Flutter plugin to target mobile platforms—Android and iOS—and we plan to extend it to the web in the following months. Check out our docs to find out more about the rest of the available features!
We look forward to you trying it out and hearing your feedback.
Get Split Certified
Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.
Switch It On With Split
Split gives product development teams the confidence to release features that matter faster. It’s the only feature management and experimentation solution that automatically attributes data-driven insight to every feature that’s released—all while enabling astoundingly easy deployment, profound risk reduction, and better visibility across teams. Split offers more than a platform: It offers partnership. By sticking with customers every step of the way, Split illuminates the path toward continuous improvement and timely innovation. Switch on a trial account, schedule a demo, or contact us for further questions.