Create Flutter Plugins potatotips#64 2019/08/27

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

• 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

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

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

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

• 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

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

• 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

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

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

• 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

• 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

The Plugin System of Flutter is wonderful!