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

Create Flutter Plugins

B6721fa2b0c10af071878ad23d190291?s=47 Victor Lee
August 27, 2019

Create Flutter Plugins

A brief tour to create platform-dependent plugins on Flutter

B6721fa2b0c10af071878ad23d190291?s=128

Victor Lee

August 27, 2019
Tweet

Transcript

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

  2. • 李 承益 (from Taiwan) • Joined Repro as SDK

    Engineer • APAC CRE (2019 Jul~) • ≒Technical Support • Started to learn recently @konyavic About
  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
  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)
  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)
  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)
  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
  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');
  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
  10. • flutter pub pub publish • Run checks before publish

    • Auth by Google account Pub.dev Flutter: Publish (1)
  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)
  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
  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
  14. The Plugin System of Flutter is wonderful!