ff_flutter_client_sdk
Last updated:
0 purchases
Description:
ff flutter client sdk
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
copied to clipboard
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
Install the SDK #
Add the Dependency #
Begin by adding the Feature Flag Flutter SDK dependency to your pubspec.yaml file:
ff_flutter_client_sdk: ^2.1.0
copied to clipboard
Import Necessary Packages #
Once you've added the dependency, import the necessary packages into your Dart files:
import 'package:ff_flutter_client_sdk/CfClient.dart';
import 'package:ff_flutter_client_sdk/CfConfiguration.dart';
import 'package:ff_flutter_client_sdk/CfTarget.dart';
copied to clipboard
Release mode for Android applications #
In release mode, Flutter applies optimizations that can affect the behavior of native Android code, including code used by our Flutter Android plugin.
Please add the following rule to your ProGuard configuration to ensure proper functionality when running your Android app in release mode
-keep class io.harness.cfsdk.** { *; }
SDK Installation for Flutter Web #
If you're targeting a Flutter web application:
Follow the steps mentioned above to set up the SDK in your project.
In addition, embed our JavaScript SDK by adding the following script tag to the <head> section of your web page:
<script src="https://sdk.ff.harness.io/1.19.2/sdk.client-iife.js"></script>
copied to clipboard
This installs our Feature Flags JavaScript SDK and makes it available to your application. Please ensure you regularly upgrade the
JavaScript SDK version to get the latest updates. For the newest JavaScript SDK updates, monitor:
JavaScript SDK GitHub Repo
official Feature Flags Releases Page
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:
Connect to the FF service.
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.
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)),
),
),
);
}
}
copied to clipboard
Certainly! Incorporating the recent details into the README section:
Running the Getting Started Example #
First, provide your API key in the .env file
You can then use Android Studio to run the getting started example
You can also run the getting started example using the Flutter CLI by following these steps:
Prerequisites:
Make sure Flutter is set up on your machine.
Decide whether you're targeting an Android emulator, iOS simulator, or a web browser.
Setting Up and Choosing Your Target:
Verification:
To see available devices/emulators:
flutter devices
copied to clipboard
The output will list your devices, for example:
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)
copied to clipboard
Android Emulator:
To start the Android emulator, use:
$ANDROID_SDK/emulator/emulator @Pixel_4.4_API_32
copied to clipboard
Replace @Pixel_4.4_API_32 with your own emulator device ID.
To run the Flutter app on your Android emulator:
flutter run -d emulator-5554
copied to clipboard
iOS Simulator:
To open the iOS simulator:
open -a simulator
copied to clipboard
To run the Flutter app on the iOS simulator:
flutter run -d 425E99F8-702F-4E15-8BBE-B792BF15ED88
copied to clipboard
Running the Example on Web:
If targeting a web browser, use:
flutter run -d chrome --hot
copied to clipboard
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>
copied to clipboard
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.
License:
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files In This Product:
Customer Reviews
There are no reviews.
