Explore NamiSign Up

Flutter SDK Setup

A complete guide to the basics of adding Nami to your Flutter app.

Suggest Edits

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. Launch a campaign to show a paywall
  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 as is an example project.

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: ^3.1.1

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 live Campaign configured in the Control Center with a Paywall.

You may also optionally check if the SDK is able to raise the paywall at the time you are trying to display it. 

var launchCampaignResult =
   await NamiCampaignManager.launch();
 if (launchCampaignResult.error) {
   print('Campaign Launch Error -> '
         '${launchCampaignResult.error}');
 }

If you campaign has a label, you can specify it as well.

var launchCampaignResult =
   await NamiCampaignManager.launch(label: "your_campaign_label");
 if (launchCampaignResult.error) {
   print('Campaign Launch Error -> '
         '${launchCampaignResult.error}');
 }

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.registerActiveEntitlementsHandler()
        .listen((activeEntitlements) {
      if (activeEntitlements.isNotEmpty) {
        print("Active entitlements found!");
        activeEntitlements.forEach((element) {
          print(element.toString());
        });
      } else {
        print("No active entitlements");
      }
    });

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

Next Steps

🎉 Congrats on having the basics in place!

Now you are ready to go further based upon your use cases:

Updated about 1 month ago

What’s Next