This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Privacy Policy. Click Preferences to customize your cookie settings.
Accept
Reject
Preferences
Log in to ask a question
Log in to ask a question

Connecting Native Mobile Application Code to Flutter through Pigeon Connector

Posted on 12-08-2022 02:29 PM
and filed in cloud-community-blog
bhardwaju
Staff

Authored by:

  • Shivank Awasthi (@shivankawasthi) Strategic Cloud Engineer, Google
  • Utkarsh Bhardwaj (@bhardwaju) Cloud Migration Consultant, Google

pigeon-flutter-app.png

Pigeon is a code generator tool to make communication between Flutter and the host platform type-safe, easier, and faster. Pigeon generates automated code, which defines the channels to communicate from Flutter to native code and vice versa so that users do not have to write the channel definitions for iOS and Android, but instead, only write about the details needed above this communication bridge. 

With the help of Pigeon, one can communicate to the host platform to perform operations, which is not supported over Flutter yet.

Usage 

To add the Pigeon module to dev dependencies, follow the instructions here: https://pub.dev/packages/pigeon

1. Then, generate a dart file to define an abstract class containing a host API or Flutter API and define the configuration to generate dart and native files.
bhardwaju_0-1670537759783.png

2. Run the Pigeon command to generate respective dart files and native code files, which will be used for Flutter to native communication, and vice versa.

e.g.: flutter pub run pigeon --input pigeon/facebook/facebook.dart --dart_out lib/core/platform/facebook/facebook.dart --objc_header_out ios/Runner/Source/Facebook/FacebookTargetMessage.h --objc_source_out ios/Runner/Source/Facebook/FacebookTargetMessage.m —java_out ./android/app/src/main/kotlin/au/com/test/flutter_test/facebook/FacebookTargetMessage.java --java_package "au.com.test.flutter_test.facebook"

3. To communicate through Pigeon, call the respective Flutter class from the generated dart file along with the method and pass the parameter to the methods as required, and it can be further accessed in the native code as per requirement.

flutter-class-pigeon.png

4. The methods from the abstract class can be overridden to implement it as per the requirement, e.g. integration of the Facebook SDK was done on the native side rather than Flutter itself.

bhardwaju_2-1670537900158.png

Difference between @FlutterAPI and @HostAPI

  • Flutter API is used to communicate from the host platform to Flutter base
  • Host API is used to communicate from Flutter base to the host platform

Example: /Flutter-Test/pigeon/facebook/facebook.dart

Notes

  • One should not edit the automatically generated code, if anything such as type of method or parameter names are to be modified, one should modify the abstract class and run the Pigeon command again to regenerate the dart and native code files.
  • For Swift code base, the method names are modified in the generated .h file and the newly-generated method name is to be referred to in the usage and not the one which is defined in the abstract class.

Have questions? Please leave a comment below and someone from the Community or Google Cloud team will be happy to help. 

2 0 4,627