Interacting with native code & plugins in Flutter

In this presentation, I will show you how to connect your Flutter app with platform native code for iOS & Android. We will go through how Flutter interacts with native platforms under the hood, which APIs to use, and how to create a new plugin step by step.

Transcript

1. Interacting with native code in Flutter For iOS & Android
2. Hello, I’m Alek @MisterAlek github.com/MrAlek CTO @ doneservices.co
3. Discount Code FLUTTER300
4. Agenda • Flutter under the hood • Why interact with native? • Different ways of interacting with native code • Platform Channel • Dart:ffi (bonus) • Creating a plugin (w/ live coding!) • Considerations & Learnings
5. Flutter Internals • Flutter is built with Dart on top of a C++ engine • Does its own drawing with Skia – no platform UI
6. No native rendering needed High performance scrolling 60fps animations No bridge hopping when listening to scroll events No drawing / layout bugs between platforms
7. Why interact with platform native code? Platform-specific functionality & APIs e.g. Notifications Access hardware e.g. Camera, GPS, Speaker Irreproducible native views (like Maps) Existing libraries, e.g. SQLite, Intercom, Firebase ⛔ Not for drawing / layout, unlike React Native
8. Examples
9. How do Flutter apps run? • Flutter apps are hosted as frameworks inside native apps • The hosts are regular native apps. • FlutterView (Android) + FlutterViewController (iOS) is the bridge, only one per app. https://flutter.dev/docs/development/platform-integration/platform-channels
10. FlutterViewController & FlutterView • Forwards touches, keyboard, lifecycle events • Handles communication with native plugins • Passes messages between Dart and platform native code (Objective-C/Swift/Java/Kotlin) • …using Platform Channels https://flutter.dev/docs/development/platform-integration/platform-channels
11. Plugin The thing you get when combining Flutter, iOS & Android code together into a dart package
12. pub.dev
13. pubspec.yaml
14. Creating a plugin • Creates a package with iOS, Android and Dart code • + an example Flutter app for both platforms • Publish with
15. Creating a plugin • Creates a package with iOS, Android and Dart code • + an example Flutter app for both platforms • Publish with Android iO S Flutter
16. Platform Channels https://flutter.dev/docs/development/platform-integration/platform-channels • Identified by name e.g. ”flutter/lifecycle” • Passes binary messages • Uses a codec for serialization / deserialization • Can both send and receive • Used only on the main thread A simple mechanism for communicating between Dart code and platform code inside a hosted Flutter app.
17. BasicMessageChannel
18. BasicMessageChannel Swift Kotlin
19. Method Channels ✅ • Used to invoke different methods on the same channel to group functionality • Sends a ”method” name and parameters • Uses StandardMessageCodec to parse params & return values https://flutter.dev/docs/development/platform-integration/platform-channels
20. MethodChannel
21. MethodChannel Swift Kotlin
22. Event Channels ✅ • Used to send events over a stream • Example: Listening to device sensors (GPS, Accelerometer, Gyro) • Uses StandardMessageCodec just like method channels
23. EventChannel
24. Plugin dependencies Your plugins can have dependencies! 1. Other Dart packages (pubspec.yaml) 2. iOS CocoaPods (Podfile) 3. Gradle modules (build.gradle) Common Flutter plugins include SDK wrappers for native 3rd party frameworks • Intercom, Firebase, AWS
25. Learnings & Considerations • Use the host app where you run into plugin limitations • Platform channels have built in mocking. Use them for testing • channel.setMockMethodCallHandler • Be wary of Dart types
26. Bonus – Dart:ffi • A mechanism for directly calling functions exposed to the C/C++ runtime • Currently in beta (flutter channel dev; flutter upgrade) • Used to interact directly with native frameworks & functions, such as sqlite
27. Read more • https://flutter.dev/docs/development/platform-integration/platform-channels • https://github.com/flutter/flutter/ • https://github.com/flutter/plugins/tree/master/packages/battery • https://medium.com/flutter/flutter-platform-channels-ce7f540a104e ”Flutter Platform Channels” by Mikkel Ravn
28. Thank you! done. Psst, we’re still hiring @MisterAlek github.com/mralek