Adding Flutter to existing Android app

Transcript

1. @ibhavikmakwana Adding Flutter to existing Android app
2. Flutter?
3. Why?
5. Everything is magic
7. Look and Feel
8. iOS Android
9. Your code Android/iOS runner Hardware GPU, ARM, x86 chips C++ Flutter engine (Skia, Text,Dart runtime, dart:ui) Flutter Framework in Dart (widgets,-Gestures, Animation, etc)
10. Compiles directly into machine code
11. Headless Testing
13. Runs on almost every screen
16. $ cd some/path/ $ flutter create -t module --org com.example my_flutter Create a Flutter module
18. android { //... compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 } } Host app requirements
19. $ cd some/path/my_flutter $ flutter build aar Make the host app depend on the Flutter module
20. build/host/outputs/repo └── com └── example └── my_flutter └── flutter_release ├── 1.0 │ ├── flutter_release-1.0.aar │ ├── flutter_release-1.0.aar.md5 │ ├── flutter_release-1.0.aar.sha1 │ ├── flutter_release-1.0.pom │ ├── flutter_release-1.0.pom.md5 │ └── flutter_release-1.0.pom.sha1 ├── maven-metadata.xml ├── maven-metadata.xml.md5 └── maven-metadata.xml.sha1
21. MyApp/app/build.gradle android { // ... }
22. MyApp/app/build.gradle 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. } }
23. MyApp/app/build.gradle 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. } } dependencies { // ... releaseImplementation('com.example.my_flutter:flutter_release:1.0@aar') { transitive = true } }
24. MyApp/settings.gradle include ':app' setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, 'my_flutter/.android/include_flutter.groovy' ))
25. MyApp/settings.gradle include ':app' setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, 'my_flutter/.android/include_flutter.groovy' )) MyApp/app/build.gradle dependencies { implementation project(':flutter') }
26. View flutterView = Flutter.createView( MainActivity.this, getLifecycle(), "route1" ); Using Flutter's old facade classes
27. View flutterView = Flutter.createView( MainActivity.this, getLifecycle(), "route1" ); FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800); Using Flutter's old facade classes
28. View flutterView = Flutter.createView( MainActivity.this, getLifecycle(), "route1" ); FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800); layout.leftMargin = 100; layout.topMargin = 200; Using Flutter's old facade classes
29. View flutterView = Flutter.createView( MainActivity.this, getLifecycle(), "route1" ); FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800); layout.leftMargin = 100; layout.topMargin = 200; addContentView(flutterView, layout); Using Flutter's old facade classes
31. Flutter Side
32. import 'dart:ui'; import 'package:flutter/material.dart'; void main() => runApp(_widgetForRoute(window.defaultRouteName)); Widget _widgetForRoute(String route) { switch (route) { case 'route1': return SomeWidget(...); case 'route2': return SomeOtherWidget(...); default: return Center( child: Text('Unknown route: $route', textDirection: TextDirection.ltr), ); } }
33. Building and running your app
34. Hot restart / reload Debugging Dart code $ cd some/path/my_flutter $ flutter attach Waiting for a connection from Flutter on Nexus 5X...
35. Let’s see it Live
36. Credits & Resources Docs : Add Flutter to existing apps Vamsi Krishna’s Planets App
37. Bhavik Makwana @ibhavikmakwana Thank you!