Skip to content

Integrating the Braze Flutter SDK

Learn how to integrate the Braze Flutter SDK natively on Android and iOS. After integrating, you’ll be able to use the Braze API within Flutter apps written in Dart. This plugin provides basic analytics functionality and lets you integrate in-app messages and Content Cards for both iOS and Android with a single codebase.

Prerequisites

Before you integrate the Braze Flutter SDK, you’ll need to complete the following:

Integrating the SDK

Step 1: Integrate the Braze library

Add the Braze Flutter SDK package from the command line. This will add the appropriate line to your pubspec.yaml.

1

flutter pub add braze_plugin

Step 2: Complete native SDK setup

To connect to Braze servers, create a braze.xml file in your project’s android/res/values folder. Paste the following code and replace the API identifier key and endpoint with your values:

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">YOUR_APP_IDENTIFIER_API_KEY</string>
<string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>

Add the required permissions to your AndroidManifest.xml file:

1
2

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Add Braze SDK import at the top of the AppDelegate.swift file:

1
2

import BrazeKit
import braze_plugin

In the same file, create the Braze configuration object in the application(_:didFinishLaunchingWithOptions:) method and replace the API key and endpoint with your app’s values. Then, create the Braze instance using the configuration, and create a static property on the AppDelegate for easy access:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

static var braze: Braze? = nil

func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
) -> Bool {
  // Setup Braze
  let configuration = Braze.Configuration(
    apiKey: "<BRAZE_API_KEY>",
    endpoint: "<BRAZE_ENDPOINT>"
  )
  // - Enable logging or customize configuration here
  configuration.logger.level = .info
  let braze = BrazePlugin.initBraze(configuration)
  AppDelegate.braze = braze

  return true
}

Import BrazeKit at the top of the AppDelegate.m file:

1

@import BrazeKit;

In the same file, create the Braze configuration object in the application:didFinishLaunchingWithOptions: method and replace the API key and endpoint with your app’s values. Then, create the Braze instance using the configuration, and create a static property on the AppDelegate for easy access:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Setup Braze
  BRZConfiguration *configuration =
      [[BRZConfiguration alloc] initWithApiKey:@"<BRAZE_API_KEY>"
                                      endpoint:@"<BRAZE_ENDPOINT>"];
  // - Enable logging or customize configuration here
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazePlugin initBraze:configuration];
  AppDelegate.braze = braze;

  [self.window makeKeyAndVisible];
  return YES;
}

#pragma mark - AppDelegate.braze

static Braze *_braze = nil;

+ (Braze *)braze {
  return _braze;
}

+ (void)setBraze:(Braze *)braze {
  _braze = braze;
}

Step 3: Set up the plugin

To import the plugin into your Dart code, use the following:

1

import 'package:braze_plugin/braze_plugin.dart';

Then, initialize an instance of the Braze plugin by calling new BrazePlugin() like in our sample app.

Testing the integration

You can verify that the SDK is integrated by checking session statistics in the dashboard. If you run your application on either platform, you should see a new session in dashboard (in the Overview section).

Open a session for a particular user by calling the following code in your app.

1
2

BrazePlugin braze = BrazePlugin();
braze.changeUser("{some-user-id}");

Search for the user with {some-user-id} in the dashboard under Audience > Search Users. There, you can verify that session and device data have been logged.

Github   Edit this page on GitHub
HOW HELPFUL WAS THIS PAGE?
New Stuff!