Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

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

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One