To start, you’ll need to add particle_connect to your Flutter application; this will need to be done before moving onto platform-specific configuration.

flutter pub add particle_connect

After adding and installing the SDK, you’re ready to move onto configuration; this will differ depending on the platform you intend on using (iOS or Android).

But beforehand, you’ll need to retrieve three key values from the Particle dashboard: your project ID, client key, and app ID. These are used to authenticate your instance of Particle Connect and connect your project to the dashboard; these are required to properly initialize the SDK, regardless of platform.

To grab these keys, follow the steps outlined below:

For more information on the Particle dashboard, take a look at the dashboard quickstart.

Android

If you’re planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect compatibility issues):

Prerequisites

• minSdkVersion 23 or higher.
• compileSdkVersion, targetSdkVersion 34 or higher.
• JavaVersion 17.
• Jetpack (AndroidX).
• Android Gradle Plugin Version: 8.5.1 or higher.
• Gradle Version: 8.9 or higher.

To configure Particle Connect and prepare for initialization, you can begin by going ahead and opening your build.gradle file, often found at the following file path: ${project name}/android/app/build.gradle

Within your build.gradle file, you’ll need to add four new lines to ensure Particle Connect runs properly:

1. minSdkVersion. In most cases, this will be set to 23.
2. manifestPlaceholders["PN_PROJECT_ID"], the project ID previously retrieved from the Particle dashboard.
3. manifestPlaceholders["PN_PROJECT_CLIENT_KEY"], the client key previously retrieved from the Particle dashboard.
4. manifestPlaceholders["PN_APP_ID"], the app ID previously retrieved from the Particle dashboard.

An example of this has been included below.

// Example
defaultConfig {
  applicationId "com.example.particle_auth_test"

  minSdkVersion 23 // Required
  targetSdkVersion flutter.targetSdkVersion
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName

  manifestPlaceholders["PN_PROJECT_ID"] = "YOUR PROJECT ID"
  manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "YOUR CLIENT KEY"
  manifestPlaceholders["PN_APP_ID"] = "YOUR APP ID"
}

Additionally, staying within your build.gradle file, you’ll need to ensure that you’re using version 17 of Java in both compileOptions and kotlinOptions, alongside enabling dataBinding.

// Example
compileOptions {
  sourceCompatibility JavaVersion.VERSION_17
  targetCompatibility JavaVersion.VERSION_17
}

kotlinOptions {
  jvmTarget = JavaVersion.VERSION_17.toString()
}

dataBinding {
  enabled = true
}

iOS

Before beginning, ensure your project meets the following prerequisites:

• Xcode 15.0 or later.

• iOS 14 or later.

With these requirements set, you’ll need to open an exported iOS project and find ios/{project name}.xcworkspace.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>PROJECT_UUID</key>
  <string>YOUR_PROJECT_UUID</string>
  <key>PROJECT_CLIENT_KEY</key>
  <string>YOUR_PROJECT_CLIENT_KEY</string>
  <key>PROJECT_APP_UUID</key>
  <string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>

import ParticleConnect

override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
  if ParticleConnect.handleUrl(url) {
      return true
  } else {
      return super.application(app, open: url, options: options)
  }
}

<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

Having now installed and configured Particle Connect, the only step remaining before the SDK can be used is initialization.

Particle Connect can be initialized by simply calling the init method on ParticleConnect. This takes the following parameters:

• chainInfo, representing the primary chain you intend to use (for example, ChainInfo.Ethereum, chainInfo.Polygon).
• dappMetaData, derived from DappMetaData
• env, affecting the information logged within your environment (Env.dev, Env.production, or Env.staging).

The snippet below is an example of this.

final dappInfo = DappMetaData(
    "Particle Connect",
    "https://connect.particle.network/icons/512.png",
    "https://connect.particle.network",
    "Particle Connect Flutter Demo");
// Initialize ParticleConnect and ParticleAuthCore.
ParticleConnect.init(currChainInfo, dappInfo, Env.dev);
ParticleAuthCore.init();

Now that Particle Connect has been installed, configured, and initialized, you’re ready to facilitate connection through the Particle Connect modal.

To do this, you’ll need to establish a connectKitConfig instance specifying the:

• Onboarding mechanisms you’d like to support, through connectOptions (such as .EMAIL, .PHONE, SOCIAL, WALLET).
• Social login providers you’d like to support, through socialProviders (such as .GOOGLE, .APPLE).
• Wallets you’d like to be included as options within the modal, through walletProviders (specified through an instance of EnableWalletProvider, as shown below).
• (Optionally), layout options altering the format of the connection modal through additionalLayoutOptions.
• (Optionally), additional customizations, such as a custom icon, through logo.

Upon generating this config (with ConnectKitConfig), you’ll be able to call ParticleConnect.connectWithConnectKitConfig, initiating the resulting connection modal.

final config = ConnectKitConfig(
  logo: "", // base64 or image URL
  connectOptions: [
    ConnectOption.EMAIL,
    ConnectOption.PHONE,
    ConnectOption.SOCIAL,
    ConnectOption.WALLET,
  ], // Changing the order will alter the UI
  socialProviders: [
    EnableSocialProvider.GOOGLE,
    EnableSocialProvider.TWITCH,
    EnableSocialProvider.APPLE,
    EnableSocialProvider.DISCORD,
    EnableSocialProvider.TWITTER,
    EnableSocialProvider.FACEBOOK,
    EnableSocialProvider.GITHUB,
    EnableSocialProvider.MICROSOFT,
    EnableSocialProvider.LINKEDIN,
  ], // Changing the order will alter the UI
  walletProviders: [
    EnableWalletProvider(EnableWallet.MetaMask,
        label: EnableWalletLabel.RECOMMENDED),
    EnableWalletProvider(EnableWallet.OKX),
    EnableWalletProvider(EnableWallet.Trust,
        label: EnableWalletLabel.POPULAR),
    EnableWalletProvider(EnableWallet.Bitget),
    EnableWalletProvider(EnableWallet.WalletConnect),
  ], // Changing the order will alter the UI
  additionalLayoutOptions: AdditionalLayoutOptions(
    isCollapseWalletList: false,
    isSplitEmailAndSocial: true,
    isSplitEmailAndPhone: false,
    isHideContinueButton: false,
  ),
);

final account = await ParticleConnect.connectWithConnectKitConfig(config);