Adopting Flutter in Native Mobile Applications
0 likes53 views
This document discusses adopting Flutter in existing native mobile applications. It describes adding a Flutter module to projects, integrating Flutter with iOS and Android, communicating between Flutter and native code using MethodChannels, handling multiple Flutters, and recreating the FlutterActivity and FlutterViewController when navigating back to them to use a single Flutter engine. The goal is to migrate an app's UI to Flutter for better conversions and a modern design while keeping the existing native code and navigation.
Adopting Flutter in Native Mobile Applications
- 1. Adopting Flutter in Native Mobile Applications
- 3. About me Alexandru Terente [email protected] Passionate about mobile app development
- 4. What is Flutter? Build for any screen
- 5. UI toolkit And you write Dart code
- 6. Flutter in existing mobile applications
- 8. Flutter Module added to projects as Git Submodule
- 9. iOS Integration with CocoaPods
- 11. iOS - Swift UIKit Example
- 12. Run the iOS App Run in fl utter folder: Run in iOS folder: Open application .xcodeproj and hit Run
- 13. iOS Demo:
- 14. Android integration as Source Code settings.gradle & app/build.gradle
- 16. App build.gradle
- 17. FlutterActivity
- 20. Run the Android App Run in fl utter folder:
- 21. Android Demo:
- 22. Flutter MethodChannel Communication between fl utter and native code and writing platform speci fi c code.
- 23. Flutter MethodChannel • Communication between native and Dart/Flutter code • Write platform speci fi c code • Use native apis and 3rd party frameworks
- 25. MethodChannel iOS - Swift
- 27. MethodChannel iOS - Swift
- 28. Flutter Side
- 29. Request work from native
- 30. iOS Demo:
- 31. MethodChannel Android - Kotlin
- 34. Android Demo:
- 35. Multiple Flutters • https://docs. fl utter.dev/add-to-app/multiple- fl utters • Flutter documentation has solution for multiple fl utters • Uses multiple fl utter engines • Multiple Modules • The fl utter common code can be shared between modules via Flutter Packages
- 36. Problems with Multiple Flutters • Loads the system memory and CPU with multiple running engines • Multiple calls via MethodChannels to share the same data with different fl utter engines • Share state data between Flutter engines has to be done via the native platform
- 37. What is the Solution? Use only one Flutter Engine
- 38. New Problem • The Flutter Engine can have only one Activity or ViewController attached at a speci fi c time. • If you have nested native and fl utter navigation the FlutterActivity and FlutterViewController will remain stuck when navigating back to it.
- 39. The Solution Recreate the FlutterActivity an FlutterViewController each time we display it.
- 40. A/B Tests We have in place all the pieces of the puzzle to do A/B test with a remote con fi g to display either a fl utter or a native screen.
- 41. Result UI is migrated to Flutter because better conversions, fresh and modern design.
- 43. Q&A ?
- 44. Resources • https://docs. fl utter.dev/add-to-app • https://docs. fl utter.dev/platform-integration/platform-channels • https://docs. fl utter.dev/add-to-app/multiple- fl utters • https://github.com/ fl utter/put- fl utter-to-work • https://github.com/ fl utter/samples/tree/main/add_to_app