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

  1. Install Flutter.

  2. Install the development tools for you environment (iOS and/or Android).

  3. Create a new project.

    flutter create test_app
    cd test_app
    
  4. Add the flutter_opacity_core package:

    flutter pub add flutter_opacity_core
    
  5. Configure the project for Opacity. The exact way to do this depends on your target operating system.

    • iOS

      1. Edit ios/Podfile to specify the minimum iOS version.

        platform :ios, '14.0'
        
      2. Update the cocoapods.

        cd ios
        pod install --repo-update
        cd ..
        
    • Android

      1. 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' }
            }
        }
        
      2. Edit android/app/build.gradle to set android.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
           }
        
           .
           .
           .
        }
        
      3. 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.

  1. 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).

  1. Define these two variables.

    String _status = '';
    final _flutterOpacityCorePlugin = FlutterOpacityCore();
    
    Detailed explanation
    String _status = '';
    

    The Output from Opacity.

    final _flutterOpacityCorePlugin = FlutterOpacityCore();
    

    The Opacity API object.

  2. Modify or override the initState function, and add opacityInit and opacityResult:

    @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 then opacityInit, 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 call build to rebuild the UI.

  3. In the build function, add these children to the return 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

  1. Get the list of available emulators.

    flutter emulators
    
  2. 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
    
  3. Run the program.

    flutter run
    

    Select the target device or emulator.

Previous
React Native