---
updatedAt: 2026-06-11T13:39:34.000Z
agentTools:
projectIndex: https://developers.wingify.com/v2/llms.txt
---
# Demo App
Using the Wingify demo app, you can try Mobile App A/B testing.\
To try the demo app, you will need `ApiKey`.
### Installation
```shell
git clone https://github.com/wingify/vwo-flutter-sdk
cd vwo-flutter-sdk/example
flutter pub get
```
### iOS/Android
```shell
flutter run
```
## Enter ApiKey
You need to add an app to your Wingify account. Please refer to [Adding an App](https://developers.wingify.com/reference/android-adding-an-app) for details.\
Copy your `ApiKey`.\
Run the app from Android Studio/Xcode.
After the app is running, click the **Menu** icon in the upper-left corner.
Select **Enter API Key** from the menu options and then type your API key.
# Sorting Campaign
Showing a list of items is a common requirement for many apps.\
How do you know what sequence is better? What better way to tell than to A/B test!
## Defining Variation
Steps to run Sorting Campaign:
1. Under Mobile App A/B, click **Create Menu** and then choose your App, platform and set test key to "sorting". Click Next for Variations screen.
2. On the **Variations** screen, update the variation names as seen in the image below
In your app, click the **Refresh** icon located in the upper-right corner of the navigation bar.\
This should change the sequence of items. Items are now sorted by price
Following code handles the A/B testing for Sorting campaign
```typescript Dart
String variationName =
await VWO.getVariationNameForTestKey(Constants.TEST_KEY_SORTING);
if (variationName != null) {
switch (variationName) {
case Constants.TEST_KEY_VALUE_SORT_BY_NAME:
mobileList.sort((a, b) => a.name.compareTo(b.name));
break;
case Constants.TEST_KEY_VALUE_SORT_BY_PRICE:
mobileList.sort((a, b) => a.price.compareTo(b.price));
break;
default:
mobileList.sort((a, b) => a.id.compareTo(b.id));
break;
}
}
```
The code above does following things
1. Get the variation name for campaign whose test key is "sorting"
2. Depending on the variation name we decide if the sorting is to be done alphabetically or by price
3. Once the list is sorted we reload the table data
## Defining Goals
Click **Next**, and then define a goal using the following goal identifier.
We can see if the goals work correctly.\
Click **Verify**.
Select your device from the drop-down menu.
On selecting any product (phone) from the list, you can see the product details.
When you select the product, Goal 1 becomes Verified.
This happens because, we have placed `VWO.trackConversion( "productView")` code upon selecting a product.
If you want to verify the goal for variation, select **Variation** from the drop-down menu, select refresh in the app, and then repeat the same process.
## Finalize Campaign
Click **Next** to move to the final stage of campaign creation. You can set percentage traffic allocation and then do advance targeting.
To start the campaign, click **Finish**.
# Variable Campaign
How do you know what content would appeal to your users\
This campaign helps us test various alerts by presenting various titles and content
## Defining Variation
Steps to run Layout Campaign:
1. Under Mobile App A/B, click **Create** and then choose your mobile app.
2. In the **Variations** screen, create variable named **heading** and **content** of String type
3. Set the values accordingly
4. You can use the code generated on right side
After creating the variables add them to your campaign and set values accordingly
Select your device from the options(three dots), and then select **Preview on Device**.
In your app, click on any house in the list and you can verify the look and feel of all the variation\
The variation section of the demo app will change.
## Defining Goals
Click **Next** and then define a goal using the following goal identifier.
We can see if goals work correctly.\
Click **Verify**.
From the device drop-down menu, select your device.
When you tap on upgrade button in the alert, the goal will get verified
This happens because , we have placed `VWO.markConversionFor(goal: "upgrade-clicked")` code on tapping the upgrade button.
If you want to verify the goal for the variation, select **Variation** from the Control drop-down menu and then tap on Upgrade button in alert
## Finalize Campaign
To move to the final stage of campaign creation, click **Next**. Now, you can set percentage traffic allocation and perform advance targeting.
To start the campaign, click **Finish**.