Adopting Flutter in Native Mobile Applications. The Boss Revolution Story.

Slide 1

Slide 1 text

Adopting Flutter in Native Mobile Applications The story of BOSS Revolution migration

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

About me Alexandru Terente Lead mobile developer @ IDT Corporation Passionate about mobile app development [email protected]

Slide 4

Slide 4 text

What is Flutter? Build for any screen

Slide 5

Slide 5 text

UI toolkit And you write Dart code

Slide 6

Slide 6 text

Flutter in existing mobile applications

Slide 7

Slide 7 text

Flutter Module

Slide 8

Slide 8 text

Flutter Module added to projects as Git Submodule

Slide 9

Slide 9 text

iOS Integration with CocoaPods

Slide 10

Slide 10 text

Flutter Engine & FlutterViewController

Slide 11

Slide 11 text

iOS - Swift UIKit Example

Slide 12

Slide 12 text

Run the iOS App Run in flutter folder: Run in iOS folder: Open application .xcodeproj and hit Run

Slide 13

Slide 13 text

iOS Demo:

Slide 14

Slide 14 text

Android integration as Source Code settings.gradle & app/build.gradle

Slide 15

Slide 15 text

Project settings.gradle

Slide 16

Slide 16 text

App build.gradle

Slide 17

Slide 17 text

FlutterActivity

Slide 18

Slide 18 text

AndroidManifest.xml

Slide 19

Slide 19 text

Start FlutterActivity

Slide 20

Slide 20 text

Run the Android App Run in flutter folder:

Slide 21

Slide 21 text

Android Demo:

Slide 22

Slide 22 text

Flutter MethodChannel Communication between flutter and native code and writing platform specific code.

Slide 23

Slide 23 text

Flutter MethodChannel • Communication between native and Dart/Flutter code • Write platform specific code • Use native apis and 3rd party frameworks

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

MethodChannel iOS - Swift

Slide 26

Slide 26 text

MethodCallHandler - iOS

Slide 27

Slide 27 text

MethodChannel iOS - Swift

Slide 28

Slide 28 text

Flutter Side

Slide 29

Slide 29 text

Request work from native

Slide 30

Slide 30 text

iOS Demo:

Slide 31

Slide 31 text

MethodChannel Android - Kotlin

Slide 32

Slide 32 text

MethodCallHandler - Android

Slide 33

Slide 33 text

invokeMethod - Android

Slide 34

Slide 34 text

Android Demo:

Slide 35

Slide 35 text

Multiple Flutters • https://docs.flutter.dev/add-to-app/multiple-flutters • Flutter documentation has solution for multiple flutters • Uses multiple flutter engines • Multiple Modules • The flutter common code can be shared between modules via Flutter Packages

Slide 36

Slide 36 text

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 flutter engines • Share state data between Flutter engines has to be done via the native platform

Slide 37

Slide 37 text

What is the Solution? Use only one Flutter Engine

Slide 38

Slide 38 text

New Problem • The Flutter Engine can have only one Activity or ViewController attached at a specific time. • If you have nested native and flutter navigation the FlutterActivity and FlutterViewController will remain stuck when navigating back to it.

Slide 39

Slide 39 text

The Solution Recreate the FlutterActivity an FlutterViewController each time we display it.

Slide 40

Slide 40 text

A/B Tests We have in place all the pieces of the puzzle to do A/B test with a remote config to display either a flutter or a native screen.

Slide 41

Slide 41 text

Result UI is migrated to Flutter because better conversions, fresh and modern design.

Slide 42

Slide 42 text

Source Code https://github.com/orgs/ FlutterIasiMeetup/repositories

Slide 43

Slide 43 text

Q&A ?

Slide 44

Slide 44 text

Resources • https://docs.flutter.dev/add-to-app • https://docs.flutter.dev/platform-integration/platform-channels • https://docs.flutter.dev/add-to-app/multiple-flutters • https://github.com/flutter/put-flutter-to-work • https://github.com/flutter/samples/tree/main/add_to_app