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_app
Add the
flutter_opacity_core
package:flutter pub add flutter_opacity_core
Configure the project for Opacity. The exact way to do this depends on your target operating system.
iOS
Edit
ios/Podfile
to specify the minimum iOS version.platform :ios, '14.0'
Update the cocoapods.
cd ios pod install --repo-update cd ..
Android
Edit
android/build.gradle
to 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.gradle
to setandroid.defaultConfig.minSdk
to 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.xml
to 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
initState
function, and addopacityInit
andopacityResult
:@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("flow:github:profile"); setState(() { _status = response.toString(); }); }
Make sure to replace
[Your OPACITY API KEY]
with your Opacity API Key.Detailed explanation
@override void initState() {
Override the
initState
function 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 ); }
Initialize the Opacity client.
Future<void> opacityResult() async { final response = await _flutterOpacityCorePlugin.get("flow: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
setState
function call so it will also callbuild
to rebuild the UI.In the
build
function, add these children to thereturn
statement.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
opacityResult
and a text field to show the result.
Run the application
Get the list of available emulators.
flutter emulators
Run the appropriate (iOS or Android) emulator. You can just enter the first few characters of the emulator Id. For example:
flutter emulators --launch apple
Run the program.
flutter run
Select the target device or emulator.