Adopting Flutter in Native Mobile Applications

Slide 1

Slide 1 text

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

About me Alexandru Terente [email protected] Passionate about mobile app development

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 fl utter 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 fl utter folder:

Slide 21

Slide 21 text

Android Demo:

Slide 22

Slide 22 text

Flutter MethodChannel Communication between fl utter and native code and writing platform speci fi c code.

Slide 23

Slide 23 text

Flutter MethodChannel • Communication between native and Dart/Flutter code • Write platform speci fi c 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. 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

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 fl utter 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 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.

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 con fi g to display either a fl utter 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. 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