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 version |

Next, 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  
);  

[…]  

void makePurchase async {  
  \_client.track(‘purchase’);  
  \_purchaseService.buy();  
}  
 |

| PurchaseButton(  
  onPressed: makePurchase  
);  

[…]  

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.

Conclusion

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.