Supported SDKs
Opacity Flutter SDK
The flutter-opacity-core SDK integrates Opacity features into your Flutter project. Follow the steps below to install and set up the package for both iOS and Android.
Set up Flutter and Opacity
Install Flutter.
Install the development tools for you environment (iOS and/or Android).
Create a new project.
flutter create test_app cd test_appAdd the
flutter_opacity_corepackage:flutter pub add flutter_opacity_coreConfigure the project for Opacity. The exact way to do this depends on your target operating system.
iOS
Edit
ios/Podfileto specify the minimum iOS version.platform :ios, '14.0'Update the cocoapods.
cd ios pod install --repo-update cd ..
Android
Edit
android/build.gradleto add the bottom two repositories.allprojects { repositories { google() mavenCentral() maven { url "https://maven.mozilla.org/maven2/" } maven { url 'https://jitpack.io' } } }Edit
android/app/build.gradleto setandroid.defaultConfig.minSdkto version 24.android { . . . defaultConfig { // TODO: Specify your own unique Application ID (https://developer.android.c$ applicationId = "com.example.test_app" // You can update the following values to match your application needs. // For more information, see: https://flutter.dev/to/review-gradle-config. minSdk = 24 targetSdk = flutter.targetSdkVersion versionCode = flutter.versionCode versionName = flutter.versionName } . . . }Edit
android/app/src/main/AndroidManifest.xmlto add this activity inside the application tag.<activity android:name="com.opacitylabs.opacitycore.InAppBrowserActivity" android:theme="@style/Theme.AppCompat.DayNight" />This activity will be used to launch the in-app web browser when needed.
Use the SDK
Edit the lib/main.dart file.
Import the necessary libraries.
import 'dart:async'; import 'package:flutter_opacity_core/flutter_opacity_core.dart';Detailed explanation
import 'dart:async';Calls to Opacity traverse the network and are therefore slow. We need to run them asynchronously.
import 'package:flutter_opacity_core/flutter_opacity_core.dart';The Opacity API.
The rest of the changes are in the object that extends State<MyHomePage> (typically, _MyHomePageState).
Define these two variables.
String _status = ''; final _flutterOpacityCorePlugin = FlutterOpacityCore();Detailed explanation
String _status = '';The Output from Opacity.
final _flutterOpacityCorePlugin = FlutterOpacityCore();The Opacity API object.
Modify or override the
initStatefunction, and addopacityInitandopacityResult:@override void initState() { super.initState(); opacityInit(); } Future<void> opacityInit() async { await _flutterOpacityCorePlugin.init( '[Your OPACITY API KEY]', false, OpacityEnvironment.production, true ); } Future<void> opacityResult() async { final response = await _flutterOpacityCorePlugin.get("github:profile"); setState(() { _status = response.toString(); }); }Make sure to replace
[Your OPACITY API KEY]with your Opacity API Key.Note the
initfunction accepts your API key and should be set to the production environment. The second argument should be set to false as it pertains to adryRundebug mode. Finally, the fourth argumentshouldShowErrorsInWebViewif true will surface errors in a flow's webview in case of debugging.Detailed explanation
@override void initState() {Override the
initStatefunction of the superclass (State<MyHomePage>).super.initState(); opacityInit(); }Call the superclass
initState, which we overrode, and thenopacityInit, defined below.Future<void> opacityInit() async {Future<void>Is the return type for a Dart function that returns a promise but does not return any data.await _flutterOpacityCorePlugin.init( '[Your OPACITY API KEY]', false, OpacityEnvironment.production, true ); }Initialize the Opacity client.
Note the
initfunction accepts your API key and should be set to the production environment. The second argument should be set to false as it pertains to adryRundebug mode. Finally, the fourth argumentshouldShowErrorsInWebViewif true will surface errors in a flow's webview in case of debugging.Future<void> opacityResult() async { final response = await _flutterOpacityCorePlugin.get("github:profile");Call the Opacity API. If necessary, Opacity will open a web browser so you can authenticate to the system (in this case, GitHub).
setState(() { _status = response.toString(); }); }This is how you modify a state variable in Dart. You put it in a
setStatefunction call so it will also callbuildto rebuild the UI.In the
buildfunction, add these children to thereturnstatement.ElevatedButton( onPressed: opacityResult, child: Text("Use Opacity"), ), Text(_status),Detailed explanation
ElevatedButton( onPressed: opacityResult, child: Text("Use Opacity"), ), Text(_status),Create a button that calls
opacityResultand a text field to show the result.
Run the application
Get the list of available emulators.
flutter emulatorsRun the appropriate (iOS or Android) emulator. You can just enter the first few characters of the emulator Id. For example:
flutter emulators --launch appleRun the program.
flutter runSelect the target device or emulator.