Tech Showcases,
Developer Resources &
Partners
droidcon News
Painless Flutter Embedding in Your Existing App
Speaker: Rémon Helmond
Source: droidcon Online 2020
Multiplatform Series - Flutter (Part 2 of 3)
Transcript
English
00:01
okay hi everyone uh
00:03
welcome to drakkon online multi-platform
00:06
series and
00:07
my name is hayden hammond and i'm going
00:09
to talk about
00:10
painless flutter embedding in your
00:12
existing app
00:16
a bit about myself i'm from the
00:19
netherlands i am
00:20
a mobile app developer at philips hue
00:23
and i work with flutter since 2018
00:26
within philipsview we launched two apps
00:29
that are built in natively
00:31
or from scratching flutter those were
00:33
are the
00:34
the philips hue bluetooth tab and the
00:36
philips hue sync app
00:38
furthermore i am maintainer of the
00:40
flutter reactive ble
00:42
library which is a library that
00:43
maintains multiple bluetooth connections
00:46
in flutter i'm a sports fanatic
00:49
and i'm stand tree certified which means
00:51
i know myself about wines
00:55
i'm really looking forward to connect to
00:56
you so feel free to reach out on me
00:58
on either twitter or linkedin
01:05
yeah so let's get started a bit about
01:08
flitter
01:08
well everybody did hear about it but
01:11
just for completeness feather is
01:13
google's ui toolkit on which you can
01:16
build multiple natively compiled
01:21
applications on the from a single code
01:23
base if you
01:24
yeah just want to start with litter i
01:27
really urge you to check out
01:28
their website they have really great
01:30
resources
01:32
and also great tutorials the website is
01:35
below
01:39
a bit about the technical overview of
01:42
flutter because that gives also a good
01:45
um
01:46
yeah overview of how the embedding
01:48
actually
01:49
works so first of all we have the oh
01:53
the framework layer which consists of
01:56
the widgets
01:57
where you can define your animations and
01:59
everything in there is written in the
02:01
dart programming
02:02
language and actually dart is a language
02:05
that is introduced by
02:09
um or by google and yeah net
02:12
as flitter as well the next part is the
02:15
engine
02:16
which is built in c and c plus and what
02:19
it is doing for us
02:20
is actually making sure that the frames
02:24
that you created in flutter are properly
02:26
scheduled in the correct sequence
02:27
and also that the data
02:30
is that you yeah that is sent from
02:34
twitter towards the platform is actually
02:37
arriving
02:38
well and that brings me also to the next
02:41
part
02:41
because that's the embedder as you can
02:44
probably imagine
02:45
is that each platform has its own
02:48
treading mechanism and also a different
02:50
way of rendering things
02:52
so that's why that each flutter
02:56
each platform has its own flutter
02:58
embedder for that
03:00
also check out the link that i provided
03:03
below that will give you also a bit more
03:05
background information on it
03:10
now let's get started where we all come
03:11
from the add to app approach
03:15
actually of course what i already
03:17
mentioned the two apps
03:18
that i started with on flutter they were
03:20
greenfield projects which is
03:22
quite a luxury because we could start
03:25
with flutter from scratch but of course
03:29
we all have legacy apps and if we want
03:32
to get started with flutter yeah then
03:34
without the add to app approach we need
03:36
to choose to really rewrite everything
03:38
and that's something we ideally wouldn't
03:40
like to do
03:41
so because of that they introduced
03:45
this approach and what it's actually
03:46
doing is
03:48
you can create a flitter module and
03:51
you can embed it into your existing code
03:53
base and it will
03:55
run seamlessly in your existing apk
03:59
it works for both ios and android
04:02
i'm an android developer so the only
04:05
thing what i can say about ios is that i
04:07
saw working examples of
04:08
it how it works roughly is that
04:11
on ios you can link it together with
04:14
cocoapods
04:15
or embed the framework into xcode
04:20
and since yeah flutter version 1.12
04:24
the adobe approach is has become pretty
04:26
solid if
04:27
someone tried it before that version
04:30
yeah
04:30
it was a bit more difficult but since
04:33
version 1.12 they have
04:34
really nice plugin structure and also
04:36
great embedding
04:38
which makes your life quite easy
04:43
there are two ways to add a floater
04:46
module into your app
04:48
it is adding the creating the module
04:49
inside your existing codebase
04:51
and link it together this is also the
04:55
thing that i want to show you when i'm
04:57
going into more detail
04:59
the other way is create a separate
05:01
repository and then
05:03
build build it an aar and then integrate
05:06
it into your existing app
05:09
what it is doing is you need to run a
05:11
flip of build command build ar
05:14
it will build a kind of
05:17
maven repository and what you need to do
05:19
then is
05:20
you need to make sure that the maven
05:22
repository is uploaded somewhere
05:24
in for example an artifactory or a
05:27
location that makes sense to you where
05:28
you can easily access it
05:30
and what you then do is integrate it
05:33
into your
05:33
gradle build if you run the commands
05:37
they also provide really nice
05:38
output how to do it it's quite simple
05:43
i decided to create an example app
05:47
comfort food app i am really big fan of
05:49
pizzas and burgers so
05:51
i was really happy to make a nice app
05:53
for that and
05:55
actually i explained a bit about the
05:57
structure so what you see on the left
05:59
is the launch screen where you can
06:01
select
06:03
to restaurants and you can
06:06
in the middle you see a pizza screen
06:08
where you can decide okay which size it
06:10
is
06:10
and it will change the price and that
06:14
pizza is a separate android module in my
06:17
app
06:18
and also the the third screen is
06:21
the order overview so once you select
06:24
you know
06:24
the burger or the pizza you want you
06:27
press ok
06:28
and then you can decide to complete the
06:30
order and then you get a nice overview
06:32
with the total price
06:34
also on the right you see the my new
06:35
module which is the
06:37
the burger module and this is 100 built
06:40
in flutter
06:43
okay first of all what do we need well
06:45
of course we need the flutter sdk and
06:48
the flutter sdk can be downloaded
06:50
from the flitter website you probably
06:52
guessed that
06:53
of course we need our beloved android
06:55
studio and we need to make sure that we
06:57
install the flutter plugin which is
06:59
available from the marketplace of
07:00
android studio
07:03
and then what we also need is an
07:05
existing android project that actually
07:06
builds
07:11
then because we installed the flutter
07:14
module
07:15
it will provide we can say in android
07:17
studio
07:18
a new module and then flip the module
07:22
and then it provides us a really nice
07:24
wizard which is quite convenient we fill
07:26
in some details
07:27
and what it then does it will provide
07:29
some kind of structure what you actually
07:31
can see
07:32
here i want to highlight some parts of
07:36
the structure out
07:38
first of all this is the android folder
07:40
which is generated
07:42
and it contains a lot of bindings and
07:47
for example it will make sure that it
07:49
can find the
07:50
filter sdk it consists of
07:53
references to some gradle files which
07:56
make sure that you can build your app
07:58
and that your filter module is properly
08:00
bundled
08:03
the next thing is the lib and the test
08:05
folder which consists of your source
08:07
code
08:08
plus your unit tests and widget tests
08:13
and what is very important is the
08:14
patchback yaml file
08:16
and the perspective file contains you
08:18
declare there your dependencies
08:20
and also what you can do is define some
08:23
metadata and
08:24
what is very important for example is
08:26
the name
08:27
and the version of it
08:33
after generating what it does more is
08:35
also it creates a reference to
08:37
the to a flutter project and
08:41
this is very important for the embedding
08:42
because this specific
08:46
project will do a lot of magic underdoot
08:49
especially when we are building the app
08:51
for example what it is doing is it will
08:54
make sure based on the api
08:56
that you have so the processors that you
08:59
support
09:01
it will make sure that it grabs the
09:02
correct fitter engine
09:04
and what it also will do is it will grab
09:06
the dependencies from
09:08
embedding so when you start using the
09:10
filter engine
09:11
or the filter activity which i will talk
09:13
about later
09:14
you don't need to add those dependencies
09:19
to your gradle file but it's already
09:21
there by this project
09:23
another reference what you see on the
09:25
right and this is actually the
09:26
embedding itself it will link
09:30
the module and it will refer to the
09:32
include flutter.groovy
09:34
and that one starts a chain of events
09:37
actually
09:38
because of this approach it also means
09:40
that there is a limitation that you can
09:42
only embed one flutter module
09:45
per app but of course you can
09:50
quite a lot of flexibility where you can
09:52
add multiple screens and i will
09:54
talk about that a bit later
09:57
next what we need to do is of course we
09:59
need to write the application code
10:01
i'm not going to talk a lot about dart
10:04
code
10:05
but you can see here i created the
10:08
screen containing of some text views
10:11
i created a nice checkbox some image
10:14
and of course some calculation that
10:17
updates the price when we add fries to
10:18
our burger
10:20
and when we click on ok what it actually
10:23
is doing
10:24
it will close the app and it will return
10:26
back to android
10:29
also what is quite convenient is that
10:30
you can run the flutter app
10:32
independently on the phone and that
10:34
helps in the beginning because you
10:36
probably don't want to start with
10:38
embedding until you
10:39
know for sure it actually works so what
10:42
you need to do is you
10:43
need to run the main dart file
10:49
okay then of course
10:52
we have some screen that we can
10:54
integrate and what we need to do next is
10:56
actually integrate the flutter activity
11:02
i chose to use a photo activity for the
11:04
end dabbing
11:05
but there are also other ways to embed
11:07
flutter for example you can embed it
11:09
through a fragment
11:10
and to refer to view but the flutter
11:13
activity is actually
11:14
the easiest way to integrate an embed
11:17
flipper because it provides us
11:19
it does a lot of work for us and also it
11:22
handles a lot of
11:23
life cycle events also what what you can
11:27
do
11:27
for example in a flutter activity is a
11:30
display
11:31
a splash screen you can also define
11:34
a different dart file to run the entry
11:37
point
11:38
or you can choose a different
11:41
route and routes are in flutter ways of
11:44
navigating through the app so if you
11:45
want to
11:47
start a separate part of the app you can
11:49
use a route for that
11:51
and also when you start embedding you
11:53
can say okay i want to run
11:55
flutter and execute this specific route
11:59
what i already mentioned if you're a big
12:01
fan of the one activity approach you can
12:04
use
12:04
the flutter fragment but you need to be
12:06
aware that you need to be
12:08
need to forward some a couple of calls
12:12
and for example a couple of calls that
12:14
you need to um
12:16
forward is on post resume and on
12:19
backpressed
12:20
and a couple of more so
12:23
yeah flutter activity is much easier
12:26
in that regard and actually
12:31
then the only thing what we need to do
12:33
is i have a
12:34
card what i say okay i have a filter
12:37
activity
12:38
i create a default intent and
12:40
[Music]
12:43
i will start it and then i want to give
12:46
a demo
12:52
so let's see how it looks
12:56
so i have my app and i press on the
12:59
burgers
13:02
and it starts but i will do it again
13:05
because probably what you already notice
13:06
is when i tap
13:08
mike's burgers it you see a screen a
13:11
black screen for around
13:12
two seconds and as you can see before it
13:16
actually loads so now we go back
13:22
so it's awesome but it is for user
13:24
experience it's not really fast
13:26
because yeah it feels a bit slow right
13:30
let me explain a bit to you what
13:32
happened so when
13:34
we created the default intent in the
13:36
flutter activity
13:38
what the activity does for us it will
13:40
create a new
13:41
filter engine for us it will
13:44
create gni bindings it will also
13:47
initialize
13:48
our app that we created
13:51
and it will execute the default route
13:53
that we have
13:54
and as you can imagine that takes a
13:56
couple of seconds
13:57
before everything is wired up and that's
13:59
also what you saw
14:03
if only we could make it faster well you
14:06
probably guessed it we definitely can
14:08
because the threader team introduced
14:13
the the concept of a warm-up flutter
14:15
engine
14:16
and i think it makes sense to speed it
14:18
up and
14:19
warm this engine up
14:22
first of all what we need to do is
14:26
we need to create an id for it
14:30
and that id is not for the engine itself
14:32
but it's
14:34
for the cache so it can be found because
14:36
later we need to ask to the cache okay
14:38
give us a specific flutter engine
14:43
then of course we create the flutter
14:45
engine
14:46
and um i want to talk a bit about what
14:49
the filter engine is because a flutter
14:50
engine
14:51
you can see it as a kind of a container
14:54
in through which you can run flitter
14:57
code
14:57
and dart code into your android
15:00
application
15:02
and what you also see in the second line
15:06
is um
15:10
yeah the second line below the creating
15:12
of the flutter engine you will actually
15:13
do the warm up because if you just
15:16
create the flitter engine it doesn't do
15:18
anything
15:18
yet but if you say to the dart executor
15:22
of the flutter engine
15:24
create a cert execute a certain dart
15:26
entry point then it will actually start
15:29
warming up this also means that
15:33
it will start consuming memory and you
15:34
need to pay the
15:36
yeah you need to pay the resources that
15:38
will cost to wire it up
15:42
last but not least what we need to do of
15:44
course is we need to put it in the
15:46
engine cache
15:46
and that's quite simple it's a singleton
15:49
that we can
15:50
retrieve and we just say to the instance
15:54
okay
15:54
we added here with the corresponding id
15:58
so this is what we had before
16:02
and this is what we have now so what we
16:06
are doing is we say to the filter
16:08
activity instead of creating a default
16:10
intent
16:10
we now say
16:13
use a cached engine from the cache and
16:16
then of course we built an intent and we
16:21
started
16:22
so let's see how that looks
16:29
i press now my burgers and as you can
16:32
see it is really fast
16:34
at this moment i will do it again
16:37
to be sure and as you can see it is
16:40
instantly
16:45
so this is pretty awesome
16:49
because now we have the user experience
16:51
that we want the screen is wired up
16:53
nicely
16:54
the only thing what we now need to do is
16:56
of course
16:58
make sure that the data is there
17:01
some attention points by using the
17:04
warmed up engine
17:06
because of course it comes with a price
17:08
that we need to be aware of
17:11
when you pre-one the dart code it means
17:14
that it begins
17:15
begins executing immediately so it also
17:18
means that
17:21
yeah it starts with memory consuming
17:23
memory and also executing some yeah
17:26
the code that you defined in your entry
17:28
point
17:30
also what you need to make sure of is
17:32
that
17:33
when you want to free up the resources
17:35
you call flutter engine.destroy because
17:38
it outlives your flutter activity or
17:40
flood the fragment
17:43
of course what i said is there are
17:45
performance implications
17:47
and i saw on the flitter website they
17:50
have
17:51
put some numbers it was based on version
17:54
1.10
17:55
we are now at 1.7 team um so they are a
17:58
bit outdated but it gives you at least
18:00
some indication um you you need to think
18:03
of that
18:04
wiring up a flitter engine costs 34
18:07
42 mb memory
18:11
and also when you say when you start
18:14
warming up
18:15
there is a blocking call to the ui
18:17
thread of 330 milliseconds
18:21
so that's important to to notice
18:26
also what you need to do is you need to
18:28
make sure that when you start warming up
18:30
you choose already the correct
18:32
dart entry point and also the correct
18:35
flutter out you cannot change it
18:37
afterwards
18:40
and last but not least if the fritter
18:42
activity is the first activity that you
18:44
want to show
18:44
on startup um yeah
18:48
warming up doesn't really make sense
18:50
because yeah you need to
18:52
wait for everything to start at the
18:55
beginning
18:57
the last thing that we need to do is of
18:59
course sending the data
19:01
and what we need to use for that is
19:04
method channels
19:05
and what are those so you can see
19:07
there's indeed a name channel that
19:09
sends data between the flutter client
19:11
and the native host
19:14
that's the way approach i used for
19:17
disembedding but you can also do it the
19:19
other way around so
19:20
pretty can also be the host and native
19:24
can be the client
19:29
messages and responses are always passed
19:31
asynchronously
19:32
you can make sure that from the host
19:34
that you provide the correct callback so
19:36
the client can
19:37
handle on either the error or the
19:40
success that you
19:41
have and this is very important for
19:46
android users because when you start
19:48
using
19:49
flutter you want actually to
19:53
execute some background processing for
19:55
example bluetooth
19:56
or databases you need to execute it
19:59
natively
20:00
and of course if you do that yeah the
20:04
work there is
20:04
handled on the background thread but if
20:07
you
20:08
want to give a call back towards
20:11
flitter again you need to make sure that
20:13
you invoke that callback on the main
20:15
thread
20:15
of android the same counts
20:18
when you are using streams and you want
20:22
to
20:22
send data you need to make sure that
20:24
it's provided also on the main thread
20:26
there
20:29
a bit of architectural view that
20:32
that will give you some explanation
20:34
about my implementation
20:37
first of course i want to invoke a
20:38
method complete order
20:40
from the flutter client and
20:43
i provide some arguments at some point
20:47
android starts processing it
20:49
checking some things and it will provide
20:52
be
20:52
a success
20:56
how does it look on the flip side what
20:57
we need to do
20:60
first we need to create the method
21:03
channel
21:04
and the name that we create is important
21:06
because this one needs to match also on
21:08
the android side
21:13
then of course what i did is i created
21:15
the kind of simple backend
21:18
i will i invoke the method called
21:21
complete order
21:22
also the string name of the method needs
21:25
to match on the android side
21:27
and i provided some arguments and as you
21:30
can see
21:31
the arguments are a list of dynamic
21:35
and that is because i'm using the
21:38
standard codec for flutter and what that
21:40
one is doing it
21:42
before it will actually send it towards
21:44
native it will
21:45
convert it to binary for me so yeah
21:48
that's why
21:49
i can do this also there's another
21:52
standard codec that is provided and that
21:54
is a json
21:55
codec but for there are also other
21:59
codecs available
22:01
as third party and for example for my
22:03
bluetooth library i'm using protobuf
22:05
protocol
22:07
which provides us a bit more type safety
22:13
okay so we have everything in the on the
22:16
dart side
22:17
and now we need to go back to the
22:18
android side and what we need to do
22:20
first
22:21
is create the meta channel as well with
22:24
the same name
22:27
and now it's actually quite convenient
22:28
that i added the
22:30
flutter engine in my application because
22:32
i can easily access it
22:34
through application context and what we
22:37
need to
22:38
provide if we create a meta channel we
22:40
need to provide the
22:41
nice binary messenger of the flutter
22:44
engine
22:45
and of course the matching name that is
22:47
the same on flutter
22:49
then what we need to do is we need to
22:51
set a method call handler because we are
22:54
the host and we need to handle the
22:56
requests that we get from the flutter
22:58
client
22:59
so let's look how that sees
23:03
we created an automated call handler and
23:07
we override
23:08
the from the embedding the method call
23:10
handler
23:11
that means also we are forced to
23:13
overwrite all method call
23:15
and what you can see here is i first
23:17
check the method name
23:19
if it is invoked with the correct
23:23
complete order string then i will do
23:26
some things but
23:27
if not i will say okay this method is
23:30
not implemented and
23:32
so we can handle on the other side the
23:35
issue
23:37
furthermore of course what you see here
23:39
is also the arguments are
23:41
a list of eddy and we need to make sure
23:44
that
23:45
the types are correctly and if they are
23:48
correctly we
23:49
can do the processing and we report the
23:52
success to flutter
23:54
and if not we report some error that the
23:57
incorrect values
23:58
are supplied
24:01
let's see now the result how does it
24:03
look like
24:06
i tap on mike's burgers well
24:10
let's add some fries as well i press ok
24:15
you see a button below appearing which
24:18
is a good sign already and if i press it
24:22
what you can see here is i get the
24:25
ultimate burger with price for
24:26
10
24:32
so this is really awesome we completed
24:34
everything what we wanted to do now
24:39
but i can imagine i went through it in
24:42
20 minutes
24:43
so i think it's very good to wrap things
24:45
up what we did
24:49
so first of all we created the fritter
24:51
module uh
24:52
using the flutter plugin that we
24:54
installed on android studio
24:56
and added and because of that it wired
24:59
up nicely and it generates
25:01
a lot of things so we can actually embed
25:03
the module
25:05
then of course we created the code and
25:10
then what happens is we
25:13
could launch the flitter module when we
25:14
clicked on the card for mike's burgers
25:18
then what we use what we did is because
25:21
we weren't happy of the user experience
25:23
we used the warm the filter engine
25:26
and last but not least we were able to
25:28
send the data so we can
25:30
provide a nice overview of the order
25:36
some attention points in regards to the
25:39
at the web approach because there are
25:41
some things you need to be aware of
25:44
first of all flitter does not support
25:47
32 bits and mid processors
25:51
so if you want to start with embedding
25:53
flutter you need to make sure that you
25:55
deprecate those processor architectures
25:58
and also
25:59
even more important you need to set the
26:00
correct api filters in
26:02
your gradle file because if you don't do
26:06
it
26:07
and you still have so people that have a
26:10
32 bits
26:11
phone for example can still install your
26:13
app and then it will crash because the
26:15
footer engine for that processor
26:17
architecture cannot be found
26:19
so you yeah that's quite nasty
26:24
also what i read on the documentation is
26:27
that flutter
26:28
in background mode is not fully
26:29
supported already i saw
26:32
they are doing quite some work on it but
26:34
it's still working progress so
26:36
use it at your own risk
26:42
yeah what i already mentioned before is
26:43
you cannot embed
26:45
multiple throttle modules into one
26:47
application
26:49
of course what you can do is you can use
26:51
different
26:52
dart entry points and also what you can
26:55
do is you can
26:56
play around nicely with routes if you
26:58
define your navigation correctly in
26:60
flutter
27:01
you can save from the embedding okay in
27:03
this case i want to
27:05
execute this specific part of my app and
27:07
a bit later i want to execute that
27:09
specific part of my app
27:15
also in flattery it can happen that you
27:17
are using some android plugins
27:19
and that those android plugins are not
27:22
using the latest
27:24
plugin structure what you will see is
27:27
when you compile your app
27:28
it will give you a warning that hey keep
27:31
in mind
27:31
this the the plugin x that you are using
27:35
is using old android plugin structure
27:39
so really yeah make sure that you
27:42
migrate it
27:42
because else we cannot guarantee it work
27:45
it behaves
27:47
nicely
27:50
also and this is quite a no-brainer you
27:52
need specific ci for flutter because the
27:55
ecosystem is totally different
27:56
a different language
28:03
also what is very important is that from
28:07
version 1.17 and this is the latest
28:10
table
28:11
that you you need to make sure that your
28:13
application is migrated
28:15
to android x
28:20
this is a very interesting one because
28:23
both twitter and android they are using
28:25
the material
28:26
design library which is google's
28:29
ui library and what you
28:33
what can happen is that if there are
28:35
some new components in the material
28:36
library
28:37
it can happen that they are present on
28:40
android
28:41
but not in flitter or the other way
28:43
around
28:44
so if you want to use those components
28:47
always make sure that
28:50
they are available in both because you
28:54
ideally would like to have the same ux
28:56
experience on both
28:57
sides also what they say
29:01
we saw a really nice trick like warm up
29:04
the flutter engine
29:05
but of course you cannot do that
29:07
unlimitedly
29:08
actually what they are saying the
29:10
flutter team is saying yeah if you want
29:12
to use multiple filter engines
29:14
you can do it we won't limit it but it
29:17
is at your own risk
29:21
and the last point that i want to
29:22
address is
29:25
that you need to make sure um for
29:27
example if you use
29:28
chrysler x in your floater module and
29:31
use also crashlytics
29:32
in your android what can happen is that
29:35
for example in
29:36
android you use a newer version of
29:39
prosthetics then is available in the
29:41
flutter plugin
29:43
of course what gradle is doing normally
29:45
it resolves the versions
29:46
and it will install the the newest one
29:50
but of course if they are in the api
29:52
some breaking changes
29:54
your flutter implementation will not
29:56
work
29:57
so in that case you need to make sure
29:59
that both presslytics on
30:01
flitter as in android are of the same
30:07
version
30:09
useful resources that i want to share
30:10
with you example
30:12
the basic example that i showed you is
30:14
available on github
30:15
so feel free to look into it
30:18
i'm also planning to add some more
30:21
complicated scenarios for that
30:23
to give a bit more overview
30:26
also really check out the flutter
30:28
website they have
30:29
really good documentation about add to
30:31
app also for ios
30:33
and if you are an android developer and
30:35
you want to get started
30:36
they have a nice starting point that is
30:40
the third
30:40
bullet point and last but not least
30:43
platform channels
30:44
i just scratched the surface on it with
30:47
the meta channel but they are really
30:49
powerful so check them out
30:53
and then i want to thank you for your
30:54
attention i really enjoyed speaking with
30:57
you about android
30:58
vetting and i'm looking forward to
30:60
answer any questions that you have
31:02
thank you very much thanks so much
31:05
everyone it was really fantastic
31:07
um appreciate it appreciate all the tips
31:09
and the resources as well
31:10
let's make we do have a few questions so
31:12
we'll make um
31:13
uh uli the moderator and he'll be able
31:15
to show you what questions have come up
31:16
on slido so it's all
31:18
perfect
31:28
so you should see the screen right now
31:30
and you can feel free to read the
31:32
top question and
31:35
okay can i
31:39
use flutter to share business logic code
31:41
view model service calls
31:43
between platforms
31:47
um yeah of course you can i mean
31:51
what you can do for example is if you
31:53
have some business logic that resides
31:55
on android you want to use it you can
31:57
create the meta channel what you
31:60
yeah what i showed you already and you
32:02
can execute
32:04
that function that is on the android
32:06
side and you can make sure that
32:09
um that the data is provided into your
32:11
filter application
32:12
what is also really important nice is
32:14
actually the platform channels
32:16
and i use that a lot for my bluetooth
32:18
library because
32:20
um yeah most of the time we have
32:22
reactive
32:23
applications and what you can do there
32:26
is actually
32:26
you can provide the platform channel and
32:29
that opens the stream between
32:31
native and flutter and you can react on
32:34
events from the flutter site for example
32:36
so this is actually really nice
32:40
i hope i answered the question um
32:44
next one are there any benefits of
32:47
adding flitter modules to your app
32:49
if you only have an android app and
32:51
don't need the multi-platform
32:54
oh that's a that's a really good
32:55
question
32:57
um so actually what i really like
33:01
about flutter is if you really have an
33:03
application that
33:05
has uh because it needs to have
33:07
consistent design on both ios
33:09
and android and we all know if
33:12
if you were in that situation that it's
33:14
quite complicated because natively
33:17
both platforms implement some things a
33:19
bit differently
33:21
so if that is a big requirement from
33:24
the business um then indeed it makes
33:26
really sense to
33:28
uh start using further but indeed if
33:31
um if you don't have a need for
33:35
multi-platform then
33:37
yeah it is the only reason that i can
33:39
say okay it's fun to
33:41
work with and learn something new
33:49
are there any negative impacts on
33:51
performance when using flutter instead
33:53
of developing
33:54
natively
33:58
well of course if you run the flutter
34:01
engine what i already
34:02
talked about is it will consume some
34:04
memory right
34:05
so you need to make sure that the 30
34:08
or 42 mbs are available
34:12
but in your experience ui experience
34:15
filter is really fast
34:17
actually they are doing a really good
34:19
job i saw some benchmarks
34:21
and what i saw between react
34:25
flitter and native and native is
34:29
was just a bit faster but also i saw
34:32
already some cases that flutter is even
34:35
faster so they were quite comparable
34:37
and react native is still a bit slower
34:39
in that regard
34:43
okay would you use flutter or kotlin
34:47
native
34:48
if you only want to share business logic
34:56
that's a really good question as well it
34:59
really depends on yeah what you really
35:02
like
35:05
because if you have a lot of experience
35:06
with kotlin native then it indeed makes
35:08
really sense to
35:10
to go for that one but of course if you
35:14
also think uh maybe we can we have a
35:16
need to build some screens
35:18
and we want to move more to a more
35:21
consistent design on both platforms than
35:23
yeah go for flutter
35:28
okay if you use a flutter activity
35:31
and you navigate within flutter code to
35:33
some screens
35:35
will things like android back press work
35:38
like expected
35:39
is i can actually show that
35:43
um yeah so what it will do
35:46
is actually it starts an activity so if
35:49
you
35:50
do a back press it will also close the
35:53
activity
35:54
but of course what you need to keep in
35:55
mind is if you have a pre-warmed engine
35:58
it don't destroy the engine so in that
35:60
case you need to make sure that you
36:02
when you come back to that specific
36:03
activity that you also destroy the
36:05
engine
36:05
of course if you don't need it anymore
36:11
okay
36:15
what is the benefit of using multiple
36:18
flutter engines if you can you only use
36:21
one flat plug-in in your app or do you
36:23
use one engine per entry point
36:26
[Music]
36:30
so if you use a warranted engine
36:34
you already need to make sure that you
36:36
[Music]
36:38
define the correct entry point up for
36:41
end
36:41
so if you have two different dart entry
36:44
points then of course you need to use
36:46
multiple wired flutter engines
36:50
but you can also decide to not use and
36:54
warm the flutter engine
36:55
what you can do is for example if you
36:57
have a previous activity
36:59
and you know okay next activity i may
37:01
need
37:03
the flutter embedding you can already
37:05
make sure in that previous activity
37:07
you start a flutter engine and you warm
37:10
it up
37:11
and then in the next activity when the
37:13
user presses it it will
37:15
have already a nice warmed up engine and
37:17
then when you
37:19
are a bit further in the app you can say
37:21
okay at some point i
37:23
destroy it and you can also create in a
37:26
different activity
37:27
a new engine
37:34
how would you test the integration
37:38
uh that's a good one um because
37:42
what i normally would do is make sure
37:44
that both modules are
37:46
tested separately already and then i
37:49
would uh go for example for
37:53
um yeah a very lightweight test maybe
37:55
two or three scenarios just to check
37:57
that it is uh working and then yeah
38:00
i would maybe consider uh tools like
38:03
appium for it
38:09
okay with each footer
38:12
bound to assume
38:16
is it possible to test the 30 ui using
38:19
appium
38:20
uh yes because it's uh
38:23
it builds just an apk and you can you
38:26
can test it
38:26
for sure and then
38:30
with each filter engine pump to a single
38:32
flutter route what's the best practice
38:34
to implement lots of and connected
38:36
screens inflator with
38:38
within a native app
38:43
so what you can do in that case is what
38:45
i told you before
38:46
you have at some point you need
38:50
you have some activity and you need a
38:52
specific fit around a bit later
38:54
so what i would do then is make sure
38:55
that you warm up an engine with that
38:58
specific grout
38:60
and also close it to free up the
39:03
resources
39:04
and then make sure that in some other
39:07
parts
39:09
in your app that you warm up an engine
39:12
with a different route
39:13
and then start using that one
39:19
what are your thoughts about mixing
39:21
native and flutter in a large scope base
39:23
with lots of engineers moving parts
39:29
my thoughts is actually if you make um
39:34
yeah if you just discuss it with each
39:35
other and you may have a good ground
39:37
rules about how to do it and you have a
39:39
nice modalized app
39:40
in my opinion that's really a thing that
39:42
you need to do
39:44
then i think it can really work so if
39:47
you have
39:48
yeah most in a large code bases mostly
39:51
teams are responsible for a couple of
39:53
modules and yeah if you have a good
39:55
separation in that regard i don't see
39:57
any issue
39:58
to do that and then
40:01
last one that's or flitter or jetpack
40:03
compose
40:04
for me that's a 100 flipper
40:11
and to turn the situation around have
40:13
you seen a flutter app use
40:15
kotlin multi-platform for business logic
40:19
that's really interesting i didn't see
40:21
it but
40:22
probably there is one because the
40:24
community the app community is quite
40:25
creative
40:26
so if you see one send it to me i'm
40:29
quite curious
40:32
okay thank you
droidcon News
Tech Showcases, Developer Resources & Partners
EmployerBrandingHeader
jobs.droidcon.com
![]() Latest Android Jobs
Kotlin Weekly
![]() Your weekly dose of Kotlin
ProAndroidDev
![]() Android Tech Blogs, Case Studies and Step-by-Step Coding
Zalando
![]() Meet one of Berlin's top employers
Academy for App Success
![]() Google Play resources tailored for the global droidcon community |
Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.