MissingPluginException` when adding `phyllo_connect` to FlutterFlow

[vedantatech]

Body:

Environment

• FlutterFlow project
• phyllo_connect version: 0.3.5

Description

I'm trying to integrate the phyllo_connect plugin into a FlutterFlow project, but I'm encountering a MissingPluginException. I have followed the steps to add the plugin as per the example provided on pub.dev but have been unable to resolve this issue due to the limitations within FlutterFlow's environment.

Steps to Reproduce

1. Added phyllo_connect to the pubspec dependencies via FlutterFlow's UI.
2. Tried to utilize the plugin in a custom action.
3. Encountered the MissingPluginException.

Expected Behavior

The plugin should be recognized, and no MissingPluginException should occur after adding it through the FlutterFlow UI.

Actual Behavior

The plugin is causing a MissingPluginException, indicating that it is not properly linked or recognized by the FlutterFlow environment.

Additional Information

Here is the example code I'm trying to use in FlutterFlow, adapted from the plugin's example on pub.dev:

// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

// Additional imports for Phyllo Connect and logging
import 'package:phyllo_connect/phyllo_connect.dart';
import 'dart:async';
import 'dart:developer' as developer;

Future<String> connectWithInstagramFlutter(BuildContext context) async {
  // Assuming these values are retrieved securely from your server/environment
  final String clientId = '------------------';
  final String clientSecret = '------------------';
  // The user ID and token should be dynamically obtained from your backend
  final String userId = '------------------';
  final String sdkToken = '------------------'; 

  final _phylloConnect = PhylloConnect.instance;

  Map<String, dynamic> config = {
    'clientDisplayName': 'Vedanta tech',
    'environment': 'sandbox', // Change to 'production' as needed
    'userId': userId,
    'token': sdkToken,
    'workPlatformId':
        '------------------', // Replace with actual Instagram ID from Phyllo
  };

  String result = "Initialization Failed";
  try {
    _phylloConnect.initialize(config);
    _phylloConnect.open();

    // Setup callback listeners
    _phylloConnect.onConnectCallback(
      onAccountConnected: (accountId, workPlatformId, userId) {
        developer
            .log('onAccountConnected: $accountId, $workPlatformId, $userId');
        result = "Success: Connected with account ID: $accountId";
      },
      onAccountDisconnected: (accountId, workPlatformId, userId) {
        developer
            .log('onAccountDisconnected: $accountId, $workPlatformId, $userId');
        result = "Disconnected: Account ID: $accountId";
      },
      onTokenExpired: (userId) {
        developer.log('onTokenExpired: $userId');
        result = "Error: Token expired for user ID: $userId";
      },
      onExit: (reason, userId) {
        developer.log('onExit: $reason, $userId');
        result = "User exited: $reason";
      },
      onConnectionFailure: (reason, workPlatformId, userId) {
        developer.log('onConnectionFailure: $reason, $workPlatformId, $userId');
        result = "Connection Failure: $reason";
      },
    );
  } catch (error) {
    developer.log('Error initializing Phyllo Connect: $error');
    result = "Error initializing Phyllo Connect: $error";
  }

  return result;
}

Given the constraints within FlutterFlow (e.g., inability to run flutter clean, flutter pub get, or restart the IDE), I am limited in what troubleshooting steps I can take. Any guidance or assistance on resolving this issue would be greatly appreciated.

---

@erpankajpatel @mohitkmr07 @chiragphyllo

Could you please look into this? If there are any additional steps needed to ensure compatibility with FlutterFlow, that information would be very helpful.

Thank you for your time and assistance.

[erpankajpatel]

@vedantatech we had tried to looked into this logs , we aren't supporting with Flutter web in Phyllo Connect SDK, as i have seen Flutter Flow is considering as Web platform when you will directly run in web simulator . due to web simulator its giving MissingPluginException exceptions . you can try to download APK and try it , definitely it will work for you .

[sohaan07]

@vedantatech we had tried to looked into this logs , we aren't supporting with Flutter web in Phyllo Connect SDK, as i have seen Flutter Flow is considering as Web platform when you will directly run in web simulator . due to web simulator its giving MissingPluginException exceptions . you can try to download APK and try it , definitely it will work for you .

I think he may be trying to build it for a webapp, in that case @vedantatech use the phyllo web SDK by adding the script tag to your flutterflow webapp settings. As for mobile, its working perfectly fine. Also regarding your code, I see that there are a few mistakes.

1. It would be wise to not use your clientSecret in this code.
2. Due to the asynchronous nature of the callbacks within the Phyllo Connect SDK. The result variable is returned before the callbacks have a chance to execute. To handle this, you need to set up a way to wait for the callbacks to complete before returning the result. To achieve this, you can use a Completer object in Dart to manage the asynchronous flow. The Completer allows to create a future that can be completed later when the callback is triggered.