ff_flutter_client_sdk 2.0.0

Feature Flag Management platform from Harness. Flutter SDK can be used to integrate with the platform in your Flutter applications.

Flutter SDK For Harness Feature Flags

Table of Contents

Intro
Requirements
Quickstart
Further Reading

Flutter SDK For Harness Feature Flags

Use this README to get started with our Feature Flags (FF) SDK for Flutter. This guide outlines the basics of getting started with the SDK and provides a full code sample for you to try out.

This sample doesn't include configuration options, for in depth steps and configuring the SDK, for example, disabling streaming or using our Relay Proxy, see the Flutter SDK Reference.

Requirements

To use version 2 of the SDK, make sure you've:

• Installed Flutter SDK >= 2.10.4
• Minimum Dart SDK is 2.12
• For iOS Apps Xcode
• For Android Apps
  Android Studio or the Android SDK for CLI only
  

To use version 1 of the SDK, make sure you've:

• Installed Flutter SDK >= 2.10.4
• Minimum Dark SDK is 2.7
• For iOS Apps Xcode
• For Android Apps
  Android Studio or the Android SDK for CLI only
  

You can use Flutter doctor to verify you have the neccessary prerequisites

flutter doctor

To follow along with our test code sample, make sure you've:

• Created a Feature Flag on the Harness Platform.
• Created a [server/client] SDK key and made a copy of it

Installing the SDK

To add the SDK to your own project run

ff_flutter_client_sdk: ^2.0.0

Then, you may import package to your project

import 'package:ff_flutter_client_sdk/CfClient.dart';

Code Sample

The following is a complete code example that you can use to test the harnessappdemodarkmode Flag you created on the Harness Platform. When you run the code it will:

1. Connect to the FF service.
2. Report the value of the Flag every 10 seconds until the connection is closed. Every time the harnessappdemodarkmode Flag is toggled on or off on the Harness Platform, the updated value is reported.
3. Close the SDK.

To use this sample, copy it into your project and enter your SDK key into the FF_API_KEY field.

// @dart=2.12.0
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:ff_flutter_client_sdk/CfClient.dart';

// The SDK API Key to use for authentication.  Configure it when installing the app by setting FF_API_KEY
// e.g..
const apiKey = String.fromEnvironment('FF_API_KEY', defaultValue: '');

// The flag name
const flagName = String.fromEnvironment('FF_FLAG_NAME', defaultValue: 'harnessappdemodarkmode');

void main() => runApp(MyApp());

// A simple StatelessWidget that fetches the latest value from the FF Service.
// Everytime it receives an update the value of the flag is updated.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Harness Flutter SDK Getting Started', home: FlagState());
  }
}

class FlagState extends StatefulWidget {
  @override
  _FlagState createState() => _FlagState();
}

class _FlagState extends State<FlagState> {
  bool _flagValue = false;

  @override
  void initState() {
    super.initState();

    // Create Default Configuration for the SDK.  We can use this to disable streaming,
    // change the URL the client connects to etc
    var conf = CfConfigurationBuilder().build();

    // Create a target (different targets can get different results based on rules.  This include a custom attribute 'location')
    var target = CfTargetBuilder().setIdentifier("fluttersdk").setName("FlutterSDK").build();

    // Init the default instance of the Feature Flag Client
    CfClient.getInstance().initialize(apiKey, conf, target)
        .then((value){
      if (value.success) {
        print("Successfully initialized client");

        // Evaluate flag and set initial state
        CfClient.getInstance().boolVariation(flagName, false).then((value) {
          print("$flagName: $value");
          setState(() {
            _flagValue = value;
          });
        });

        // Setup Event Handler
        CfClient.getInstance().registerEventsListener((data, eventType) {
          print("received event: ${eventType.toString()} with Data: ${data.toString()}");
          switch (eventType) {
                case EventType.EVALUATION_CHANGE:
                    String flag = (data as EvaluationResponse).flag;
                    dynamic value = (data as EvaluationResponse).value;
                    // If the change concerns the flag we care about, then update the state
                    if ( flag == flagName ) {
                        setState(() {
                           _flagValue = value.toLowerCase() == 'true';
                        });
                    }
                    break;
          }
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Harness Flutter SDK Getting Started'),
      ),
      body: Container(
        child: Center(
          child: new Text("${flagName} : ${_flagValue}", style: TextStyle(fontSize: 25)),
        ),
      ),
    );
  }
}

Running the example

If you want to run the getting started example, then you can use flutter to on the cli. You just need to have either an Android or iOS emulator running.

To start an android emulator run (replace @Pixel_4.4_API_32 with your own device id)

$ANDROID_SDK/emulator/emulator @Pixel_4.4_API_32

or for iOS run

open -a simulator

Confirm you have an iOS or Android device with

flutter devices
2 connected devices:

sdk gphone64 x86 64 (mobile) • emulator-5554                        • android-x64    • Android 12 (API 32) (emulator)
iPhone 13 (mobile)           • 425E99F8-702F-4E15-8BBE-B792BF15ED88 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)

Build the project

Using the SDK API key, and a device ID from above you can build and install your app on a emulator

cd examples/getting_started
export FF_API_KEY=<your api key>

flutter pub get
flutter run --dart-define=FF_API_KEY=$FF_API_KEY -d <device id>

The app should show the configured flags current value. As you toggle the flag in the Harrness UI you will see the value update.

Additional Reading

For further examples and config options, see the Flutter SDK Reference and the test Flutter project.

Further Reading
Getting Started Example
Advanced Example

For more information about Feature Flags, see our Feature Flags documentation.