Flutter Setup

📘

This doc supports the Flutter SDK through version 1.0.0.
Looking for the newest Nami SDK? Check out the latest docs

Please make sure you have completed the setup of your app on the Nami Control Center for all these steps to be successful.

Adding Nami to your app has a few steps for a basic app.

1. Add the SDK to your project
2. Configure the SDK
3. Show a paywall in your app
4. React to a purchase to grant access to paid content or features

We'll run through each of these below.

Add the SDK to your project

The Nami SDK for Flutter is available on pub.dev. The library is a bridge that links to our full native SDKs and allow access to various Nami capabilities. The Flutter bridge currently supports both Android and iOS. The code for the Flutter bridge is also available on our Github.

If you need help setting up your Flutter development environment, you can find instructions here:
https://flutter.dev/docs/get-started/install.

To add Nami to your Flutter project, add our package to your project dependencies in you pubspec.yaml file.

dependencies:
  nami_flutter: ^1.0.0

To install the package, run the following on the command line.

flutter pub get

Configure the SDK

We recommend that you configure the Nami SDK as early in your app's launch as possible. This will ensure the SDK is ready to receive and process purchases.

In Flutter apps we recommend placing this code in your initState method for your class that holds the App State.

First, make sure you have imported the correct modules.

import 'package:nami_flutter/nami.dart';
import 'package:nami_flutter/nami_configuration.dart';
import 'package:nami_flutter/nami_log_level.dart';

Now to setup Nami, you'll need to call the configure method with App Platform IDs for both Apple and Google.

@override
void initState() {
 	super.initState()
  
  var namiConfiguration = NamiConfiguration(
    appPlatformIDApple: "YOUR_APPLE_APP_PLATFORM_ID",
    appPlatformIDGoogle: "YOUR_GOOGLE_APP_PLATFORM_ID",
    namiLogLevel: NamiLogLevel.warn);
  Nami.configure(namiConfiguration);
  
  // other initialization
}

Nami recommends setting the log level to warn for apps on the store. info may be helpful during development to better understand what is going on. debug level has a lot of information and is likely only helpful to the Nami support team.

Show a paywall

Now that you have the SDK configured, let's show a paywall in your app. This step requires that you have a Configured paywall in the Nami Control Center and that you have a live Campaign with a User-Initiated Paywall.

We recommend using the preparePaywallForDisplay method, which allows you to optionally wait for images to download and provides helpful errors when the paywall cannot be displayed.

var preparePaywallResult =
   await NamiPaywallManager.preparePaywallForDisplay();
 if (preparePaywallResult.success) {
   NamiPaywallManager.raisePaywall();
 } else {
   print('preparePaywallForDisplay Error -> '
         '${preparePaywallResult.error}');
 }

Consult this guide for more details on Raising a Paywall .

Grant access to paid app features

Once a user has made a purchase, you'll need to make sure to give them access to the content and features in your app that require a purchase. This is managed on the Nami platform through our entitlement engine.

The first option is to check whether a specific entitlement is active. This is done with the following code.

if (NamiEntitlementManager.isEntitlementActive("premium_access")) {
  // allow access to paid app features 
}

Nami also triggers a callback any time there is a change to the state of an entitlement. In the callback, the full list of currently active entitlements is provided. You can use this to store the state of whether a user has access to premium features locally in your app.

We recommend creating callback listeners as early as possible in your app to ensure you always have the correct entitlement state. The best spot to do this is right after calling the configure method.

NamiEntitlementManager.entitlementChangeEvents()
  .listen((activeEntitlements) {
    // process activeEntitlements array
});

That's all the basics to get up and running with Nami using Flutter. For more use cases, explore the rest of our docs.