Adding Flutter to an existing Android/iOS app

Transcript

1. Enzo Lizama Adding Flutter to an existing Android/iOS app Mobile Developer at Mandü @enzoftware
2. Previous concepts
5. Platform Channels?
7. Method Channel The Flutter side sends notifications to the native side, usually used to call a method of native.
8. Event Channel Used for data stream communication, it has the function of monitoring, such as pushing directly to the Flutter terminal after the change of power.
9. Basic Message Channel Data used to pass strings or semi-structured objects.
11. Project structure
16. Integration with Android
17. Using Android Studio
20. Adding flutter module manually
21. flutter create --template module flutter_module
23. Depend on the Android Archive (AAR)
25. android { // ... } repositories { maven { url 'some/path/my_flutter/build/host/outputs/repo' // This is relative to the location of the build.gradle file // if using a relative path. } maven { url 'http://download.flutter.io' } } dependencies { // ... debugImplementation 'com.example.flutter_module:flutter_debug:1.0' profileImplementation 'com.example.flutter_module:flutter_profile:1.0' releaseImplementation 'com.example.flutter_module:flutter_release:1.0' }
26. android { // ... } repositories { maven { url 'some/path/my_flutter/build/host/outputs/repo' // This is relative to the location of the build.gradle file // if using a relative path. } maven { url 'http://download.flutter.io' } } dependencies { // ... debugImplementation 'com.example.flutter_module:flutter_debug:1.0' profileImplementation 'com.example.flutter_module:flutter_profile:1.0' releaseImplementation 'com.example.flutter_module:flutter_release:1.0' }
27. Depend on the module’s source code
28. // settings.gradle import javax.naming.Binding include ':.android' include ':app' setBinding(new Binding([gradle: this])) evaluate(new File(settingsDir.parentFile, 'flutter_android_ios/flutter_module/flutter_module/.android/include_flutter.groovy ' ))
29. // settings.gradle import javax.naming.Binding include ':.android' include ':app' setBinding(new Binding([gradle: this])) evaluate(new File(settingsDir.parentFile, 'flutter_android_ios/flutter_module/flutter_module/.android/include_flutter.groovy ' ))
30. apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { ... compileOptions { sourceCompatibility = 1.8 targetCompatibility = 1.8 } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation Dependencies.kotlin ... androidTestImplementation Dependencies.mockk androidTestImplementation Dependencies.junit implementation project(path: ':flutter') }
31. apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { ... compileOptions { sourceCompatibility = 1.8 targetCompatibility = 1.8 } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation Dependencies.kotlin ... androidTestImplementation Dependencies.mockk androidTestImplementation Dependencies.junit implementation project(path: ':flutter') }
32. Integration with iOS
33. Embed with CocoaPods and the Flutter SDK
34. target 'ios_app' do flutter_application_path = 'ROUTE_TO_FLUTTER_MODULE' # /Users/enzoftware/Projects/add_flutter_to_existing_app/flutter_module load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') install_all_flutter_pods(flutter_application_path) # Comment the next line if you don't want to use dynamic frameworks use_frameworks! # Pods for ios_app target 'ios_appTests' do inherit! :search_paths # Pods for testing end target 'ios_appUITests' do # Pods for testing end end
35. target 'ios_app' do flutter_application_path = 'ROUTE_TO_FLUTTER_MODULE' # /Users/enzoftware/Projects/add_flutter_to_existing_app/flutter_module load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') install_all_flutter_pods(flutter_application_path) # Comment the next line if you don't want to use dynamic frameworks use_frameworks! # Pods for ios_app target 'ios_appTests' do inherit! :search_paths # Pods for testing end target 'ios_appUITests' do # Pods for testing end end
36. Embed frameworks in Xcode
37. flutter build ios-framework --output=some/path/MyApp/Flutter/
38. Embed application and plugin frameworks in Xcode and Flutter framework with CocoaPods
39. flutter build ios-framework --cocoapods --output=some/path/MyApp/Flutter/ # In your Podfile pod 'Flutter', :podspec => 'some/path/MyApp/Flutter/{build_mode}/Flutter.podspec'
42. Adding screens to work with Android
43. myButton.setOnClickListener { startActivity( FlutterActivity.createDefaultIntent(this) ) } The easiest way
44. myButton.setOnClickListener { startActivity( FlutterActivity .withNewEngine() .initialRoute("/my_route") .build(this) ) } The easiest way, with routes
45. lateinit var flutterEngine : FlutterEngine override fun onCreate() { super.onCreate() // Instantiate a FlutterEngine. flutterEngine = FlutterEngine(this) // Start executing Dart code to pre-warm the FlutterEngine. flutterEngine.dartExecutor.executeDartEntrypoint( DartExecutor.DartEntrypoint.createDefault() ) // Cache the FlutterEngine to be used by FlutterActivity. FlutterEngineCache .getInstance() .put("my_engine_id", flutterEngine) } Pre-warm engine
46. myButton.setOnClickListener { startActivity( FlutterActivity .withCachedEngine("my_engine_id") .build(this) ) } Pre-warm engine call
47. var newFlutterFragment = FlutterFragment.createDefault() flutterFragment = newFlutterFragment fragmentManager .beginTransaction() .add( R.id.fragment_container, newFlutterFragment, TAG_FLUTTER_FRAGMENT ) .commit() Fragments? Yes!
48. Adding screens to work with iOS
49. @objc func showFlutter() { let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil) present(flutterViewController, animated: true, completion: nil) } FlutterViewController with your FlutterEngine
50. let flutterEngine = FlutterEngine(name: "my flutter engine") flutterEngine.navigationChannel.invokeMethod("setInitialRoute", arguments:"/onboarding") flutterEngine.run() Working with routes
52. Demo! Let’s see the code
53. Limitations • Running multiple Flutter instances or running in partial screen views may have undefined behavior. • Using Flutter in background mode is still a WIP. • Packing a Flutter library into another shareable library or packing multiple Flutter libraries into an application isn’t supported.
54. https://flutter.dev/docs/resources/faq#how-big-is-the-flutter-engine How big is the Flutter engine?
56. Summary
57. Enzo Lizama THANKS! Mobile Developer at Mandü @enzoftware https://github.com/enzoftware/add_flutter_to_existing_app