Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Create Flutter Plugins

Victor Lee
August 27, 2019

Create Flutter Plugins

A brief tour to create platform-dependent plugins on Flutter

Victor Lee

August 27, 2019
Tweet

More Decks by Victor Lee

Other Decks in Programming

Transcript

  1. Create Flutter Plugins
    potatotips#64 2019/08/27

    View full-size slide

  2. • 李 承益 (from Taiwan)
    • Joined Repro as SDK Engineer
    • APAC CRE (2019 Jul~)
    • ≒Technical Support
    • Started to learn
    recently
    @konyavic
    About

    View full-size slide

  3. • Today’s talk
    • The surprisingly easy story to create a platform-dependent plugin on
    Flutter
    • Comparison with other platforms
    • NOT including
    • Topics on UI
    • Intro to Dart
    (We probably can skip the intro to Flutter )
    Flutter

    View full-size slide

  4. • Two types
    • package: pure dart code
    • plugin: platform-dependent code
    • You can create it by either
    • Android Studio (with Flutter Plugin)
    • flutter create --org com.example --template=plugin hello
    Based on Dart package
    Flutter: Plugin System (1)

    View full-size slide

  5. • ❌
    • plugin name: repro_flutter_plugin
    • => generated class name: ReproFlutterPluginPlugin
    • ✅
    • plugin name: repro_flutter
    • => generated class name: ReproFlutterPlugin
    ℹ TIP: The plugin’s name will become a part of the class name
    Flutter: Plugin System (2)

    View full-size slide

  6. • The generated directory structure:


    ./

    android/

    ios/

    lib/

    example/

    android/

    ios/

    lib/
    Every plugin created from the template contains also an example app!
    Flutter: Plugin System (3)

    View full-size slide

  7. • A Flutter plugin is..
    • An Android Library
    • Has it’s own build.gradle file with com.android.library applied
    • A Pod for iOS
    • Has it’s own podspec
    • Setup dependency to native libraries as building a native library
    Gradle & CocoaPods serve everything!
    Flutter: Dependency to Native Library

    View full-size slide

  8. • Native

    public class ReproFlutterPlugin implements
    MethodCallHandler {

    ...

    public void onMethodCall(MethodCall call,
    Result result) {


    if ("getUserID".equals(call.method)) {

    final String ret = getUserID();

    result.success(ret);

    }

    ...
    Flutter uses Platform Channel to communicate with native code
    Flutter: Bridge Code
    • Dart

    static const MethodChannel _channel = const
    MethodChannel('io.repro.flutter');


    final String userID = 

    await _channel.invokeMethod('getUserID');

    View full-size slide

  9. • No special gimmicks for project settings; do it in the native way
    • i.e. Turn on Capabilities in Xcode
    • Commits platform specific code to the repository
    Flutter leaves platform specific code for edit
    Flutter: Project Settings

    View full-size slide

  10. • flutter pub pub publish
    • Run checks before publish
    • Auth by Google account
    Pub.dev
    Flutter: Publish (1)

    View full-size slide

  11. • You won’t be able to delete a
    published plugin easily!
    • You have to create an issue on
    Github and make a
    confirmation!
    ℹ TIP: Make sure everything is right before publishing
    Flutter: Publish (2)

    View full-size slide

  12. • Plugin System: every plugin is build as a npm module
    • Cordova did the same before 2014
    • Native Dependency: react-native link
    • Not easy for CocoaPods
    • Not to say Expo
    Underdeveloped environment for plugins .
    Compare: React Native

    View full-size slide

  13. • Plugin System: Cordova Plugin
    • plugin.xml & config.xml: The magic to add dependencies and project settings
    • Spec changes between versions
    • Processed by all of: cordova-cli, cordova-ios, cordova-android (One goes
    wrong can break the build)
    • Eventually, hook scripts can do anything (while ignoring other libraries)
    • Platform-specific code is considered as generated code (some people/
    platform does not commit them into the repository)
    Doing too much on needless work because of a wrong design
    Compare: Cordova

    View full-size slide

  14. The Plugin System of Flutter is wonderful!

    View full-size slide