Slide 1

Slide 1 text

Create Flutter Plugins potatotips#64 2019/08/27

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

• 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

Slide 4

Slide 4 text

• 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)

Slide 5

Slide 5 text

• ❌ • 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)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

• A Flutter plugin is.. • An Android Library • Has it’s own build.gradle file with 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

Slide 8

Slide 8 text

• Native 
 public class ReproFlutterPlugin implements MethodCallHandler {
 public void onMethodCall(MethodCall call, Result result) {
 if ("getUserID".equals(call.method)) {
 final String ret = getUserID();
 ... 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');

Slide 9

Slide 9 text

• 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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

• 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)

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

The Plugin System of Flutter is wonderful!