Adopting Flutter in Native Mobile Applications

Flutter in Existing Mobile Apps: - Discuss the challenges in adopting Flutter in existing mobile applications based on real code examples. Challenge the idea of why "Multiple Flutter screens or views" is wrong.
Case Study: - Adopting Flutter and doing A/B Tests between native and Flutter in a published application with more than two million monthly users.

Transcript

1. Adopting Flutter in Native Mobile Applications
3. About me Alexandru Terente alex.terente@gmail.com 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
7. Flutter Module
8. Flutter Module added to projects as Git Submodule
9. iOS Integration with CocoaPods
10. Flutter Engine & FlutterViewController
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
15. Project settings.gradle
16. App build.gradle
17. FlutterActivity
18. AndroidManifest.xml
19. Start 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
26. MethodCallHandler - iOS
27. MethodChannel iOS - Swift
28. Flutter Side
29. Request work from native
30. iOS Demo:
31. MethodChannel Android - Kotlin
32. MethodCallHandler - Android
33. invokeMethod - Android
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.
42. Source Code https://github.com/orgs/ FlutterIasiMeetup/repositories
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