0:00:00.000,0:00:19.129
music
0:00:19.129,0:00:23.320
Herald: I would like to welcome our first[br]speaker for the day and he's amazing. His
0:00:23.320,0:00:28.359
talk which he's been working on all night.[br]A warm welcome!
0:00:28.359,0:00:32.410
applause
0:00:32.410,0:00:38.190
Speaker: Yeah good morning. My name is[br]'the one with the braid' and today I will
0:00:38.190,0:00:46.040
give an introduction into Flutter. What is[br]Flutter? Flutter is a software development
0:00:46.040,0:00:57.699
kit for creating cross-platform[br]applications from one single codebase.
0:00:57.699,0:01:03.329
Here you can see the great logo of[br]Flutter. Brief history of Flutter: Flutter
0:01:03.329,0:01:13.220
was announced by Google in 2015 as a new[br]framework for creating Android
0:01:13.220,0:01:26.709
applications. It was initially launched in[br]2018 and since that it has become one of
0:01:26.709,0:01:39.010
the most popular cross-platform software[br]development kits. Getting started with
0:01:39.010,0:01:46.619
Flutter, well, we will have a look at the[br]installation of Flutter, at one of the
0:01:46.619,0:01:54.140
special features of Flutter called[br]widgets. There we'll have a look on two
0:01:54.140,0:02:00.470
different types of widgets called stateful[br]and stateless widgets. And at the end we
0:02:00.470,0:02:07.179
will have a look at something really[br]strange in Flutter: Unlike in actually
0:02:07.179,0:02:14.280
every other software you use for mobile[br]development you write the design in your
0:02:14.280,0:02:25.060
code but not in any XML files but directly[br]into your Flutter code. Installation is
0:02:25.060,0:02:34.189
quite easy on Linux and Mac OS. You can[br]just clone the git repository from Github,
0:02:34.189,0:02:41.450
update your PATH and enjoy your new[br]Flutter installation. On Windows you need
0:02:41.450,0:02:49.230
to download pre-built binaries as Windows[br]is unable to execute shell scripts. That's
0:02:49.230,0:02:57.670
it about the installation. Now we will go[br]a bit deeper into the technology Flutter
0:02:57.670,0:03:09.540
is using. Flutter is written as an[br]extension for the language Dart, that's
0:03:09.540,0:03:15.310
what you can see over there, it's a[br]framework for the language Dart. And you
0:03:15.310,0:03:21.209
can actually say the language Dart was[br]developed for Flutter and Flutter was
0:03:21.209,0:03:29.230
developed for Dart. Actually no one is[br]using Dart without Flutter yet, so it was
0:03:29.230,0:03:38.819
made just for Flutter. The language Dart[br]is written in C++ and C and the so-called
0:03:38.819,0:03:47.269
Flutter engine is written and C++ and C[br]too. Why? It's simply because this allows
0:03:47.269,0:03:55.099
low-level rendering, that means Flutter[br]does not need any libraries of the
0:03:55.099,0:04:01.090
operating system it's executed on. So if[br]you run an Flutter application on Android
0:04:01.090,0:04:06.310
you won't need any libraries of Android.[br]If you run it on iOS you won't need any
0:04:06.310,0:04:12.269
libraries of iOS and if you run it as a[br]webpage you won't need any JavaScript
0:04:12.269,0:04:24.930
dependencies. What does the engine provide[br]us? The engine provides actually the basic
0:04:24.930,0:04:34.330
rendering of the layout, core functions[br]like I/O access, graphic encoding and
0:04:34.330,0:04:43.710
decoding, animations, accessibility[br]options and network of course. It's using
0:04:43.710,0:04:55.300
the Skia library of Google, it's quite[br]well known in Android and even for desktop
0:04:55.300,0:05:03.440
development. That's what the engine does[br]and on top of the engine you will have
0:05:03.440,0:05:09.720
which is visible, and which is visible is[br]called widgets. An application is built
0:05:09.720,0:05:19.569
out of many widgets. You can just imagine[br]widgets like HTML tags, you just put them
0:05:19.569,0:05:26.069
into each other, they have several childs[br]and so on and you get a tree of widgets as
0:05:26.069,0:05:35.919
you get a DOM tree in JavaScript and HTML.[br]That's how you can imagine of. Whoops, I
0:05:35.919,0:05:43.940
hate these buttons. Let's have a closer[br]look at these widgets. As already
0:05:43.940,0:05:50.099
mentioned at the beginning we have two[br]different kinds of widgets. We have these
0:05:50.099,0:06:02.789
stateless widgets, they provide no[br]feedback. For example a simple text or an
0:06:02.789,0:06:11.259
image or buttons, a ListView, a table,[br]they could be displayed as stateless
0:06:11.259,0:06:19.040
widgets. A stateful widget is able to[br]provide feedback means you can tell a
0:06:19.040,0:06:27.199
stateful widget "if you press this[br]button please do this". That's something
0:06:27.199,0:06:33.750
you only can do with stateful widgets but[br]not with a stateless widget. But why do
0:06:33.750,0:06:38.220
you separate between these stateful and[br]stateless widgets? Couldn't you just make
0:06:38.220,0:06:48.150
one type of widget ? It's due to better[br]performance because stateless widget is
0:06:48.150,0:06:57.280
being rebuilt as soon as its content[br]changes. For example we create a text
0:06:57.280,0:07:05.449
containing the variable "hello_world" with[br]the text "Hello world" and now if we
0:07:05.449,0:07:13.220
change the variable "hello_world" the[br]whole widget, this text will be
0:07:13.220,0:07:24.509
rerendered on the screen. Every stateless[br]widget will be just re-redenred without
0:07:24.509,0:07:30.860
being able to be informed about a change[br]of anything. And that's a difference to a
0:07:30.860,0:07:38.990
stateful widget. A stateful widget is able[br]to say "Okay, I now want to change because
0:07:38.990,0:07:45.120
a timer was running down, because an event[br]occurred because of I don't know what".
0:07:45.120,0:07:56.400
And a stateful widget is not being rebuilt[br]by its upper widget, by its super widget
0:07:56.400,0:08:05.020
and so on. Means a stateful widget will[br]not be changed if the state of the upper
0:08:05.020,0:08:14.490
widget changes. That's the difference[br]between this stateful and stateless stuff.
0:08:14.490,0:08:23.340
I do not want to get deeper into the[br]technology. Let's just have a look at some
0:08:23.340,0:08:29.990
shortened source code. If you write an[br]application for example a mobile
0:08:29.990,0:08:38.200
application in Flutter it will actually be[br]just this. Okay you will have to implement
0:08:38.200,0:08:45.670
this homepage but that's actually all you[br]need. You have the main method in which
0:08:45.670,0:08:52.019
you call runApp() and there you provide an[br]application, in this case a Material app.
0:08:52.019,0:08:58.651
Material means it uses the Material[br]design. Material design is a design
0:08:58.651,0:09:05.320
standard by Google, you know it from[br]Android but I could tell Cupertino app as
0:09:05.320,0:09:12.760
well then it would show an iOS like user[br]interface or I could just create my own
0:09:12.760,0:09:21.730
style if I want but no one would like it.[br]And there we provide just the homepage and
0:09:21.730,0:09:31.380
now we'll have a look at the home page.[br]Here you can see a basic class in Dart.
0:09:31.380,0:09:38.010
Dart is the language for Flutter. You can[br]see it is a stateless widget, means if the
0:09:38.010,0:09:44.980
app opens it will be built, if the app[br]closes, it will be moved to trash. If - I
0:09:44.980,0:09:51.230
don't know what - if the system decides:[br]okay better we say if I don't know what,
0:09:51.230,0:09:56.720
we reduce network traffic, so the[br]stateless widget cannot react, it will
0:09:56.720,0:10:03.800
just get the information from the[br]application and the operating system.
0:10:03.800,0:10:15.660
Yeah. We here... the most important in any[br]widget in Flutter is the build method the
0:10:15.660,0:10:21.620
build-method contains everything which is[br]displayed on the screen. In our case we
0:10:21.620,0:10:30.860
will display a ListTile, means one[br]element of an ListView containing some
0:10:30.860,0:10:41.560
text and a button which will share any[br]text if you press it. But that's not the
0:10:41.560,0:10:47.960
interesting part. Important is this build[br]method which tells okay this widget, my
0:10:47.960,0:10:58.940
widget TestScoreDetail should look like[br]this on the screen. Here again, this is
0:10:58.940,0:11:04.990
everything which is finally displayed on[br]the screen, everything which is within
0:11:04.990,0:11:15.039
this build method. That was a stateless[br]widget, a stateful widget is a bit more
0:11:15.039,0:11:24.320
complicated. You can see over there,[br]there's not written just
0:11:24.320,0:11:31.300
JoinTestScoreTile, but[br]JoinTestScoreTileState, means this is the
0:11:31.300,0:11:39.139
class containing the state and the state[br]offers different - you could sort, you
0:11:39.139,0:11:47.620
could call them stages. First of all, the[br]init state, in our case we do not modify
0:11:47.620,0:11:51.990
anything, it does not need to be[br]initialized, that's why we just call the
0:11:51.990,0:11:59.839
super init state method but what you could[br]do an init state for example who would be
0:11:59.839,0:12:06.180
loading something from network, if my[br]widget should display - I don't know -
0:12:06.180,0:12:13.660
data from Wikidata and you would place the[br]code for loading this data in the init
0:12:13.660,0:12:25.149
state method. This is being executed[br]before the widget is built the first time.
0:12:25.149,0:12:34.620
Here you can see the build-method again[br]and here I highlighted why we need a
0:12:34.620,0:12:42.660
stateful widget in this case. You can see[br]here, it's an if-statement, a short and
0:12:42.660,0:12:51.290
inline if-statement. When you build the[br]widget, it checks whether the variable
0:12:51.290,0:12:58.839
testLoaded is true, testLoaded is[br]initially false so the first time the
0:12:58.839,0:13:04.019
widget will be opened, it will skip down[br]there and it will show an progress
0:13:04.019,0:13:11.570
indicator, means a spinning circle in the[br]center. And as soon as this should ever
0:13:11.570,0:13:21.240
change, it will as soon as this variable[br]will get true, it will show this part and
0:13:21.240,0:13:32.449
that's why we need a stateful widget,[br]because the widget has to react on
0:13:32.449,0:13:44.509
variables within the class. Over there,[br]just at the beginning of the
0:13:44.509,0:13:52.350
implementation of this class, you can see[br]some variables initialized at the
0:13:52.350,0:13:59.160
beginning. These are variables which are[br]available within the class. It's just like
0:13:59.160,0:14:14.029
you can see the use, it's the only use in[br]this case over there. And again, as it's a
0:14:14.029,0:14:21.130
widget, everything which is provided by[br]the build, by the whole build method is
0:14:21.130,0:14:27.390
what the widgets, what the widget looks[br]like. So in the first case it will be this
0:14:27.390,0:14:38.050
and afterwards it will be this. And now one[br]more property of a stateful widget: Here
0:14:38.050,0:14:47.860
we return an expansion tile, you can[br]imagine like a part of a list which is
0:14:47.860,0:14:52.649
expandable with an arrow button and if you[br]press it will show some more detailed
0:14:52.649,0:15:02.899
information and there we set a listener on[br]the change of its expansion and as soon as
0:15:02.899,0:15:11.139
it will be expanded, the first time, we[br]will just execute this function loadScore
0:15:11.139,0:15:20.590
and maybe the loadScore function would be[br]the function changing this boolean to true
0:15:20.590,0:15:26.399
and as soon as it will be changed to true[br]we have our widget providing the
0:15:26.399,0:15:36.910
information within there. That's the main[br]difference to a stateful to a stateless
0:15:36.910,0:15:48.389
widget. Now just a little compared to[br]other cross-platform frameworks you maybe
0:15:48.389,0:15:55.670
know. I will compare it with JavaScript[br]frameworks like React and Electron. Okay,
0:15:55.670,0:16:02.779
if you have a JavaScript mobile[br]application, you usually load in webview,
0:16:02.779,0:16:09.589
consuming about 200 megabytes RAM. This is[br]ugly for a mobile device, because no
0:16:09.589,0:16:14.470
mobile device wants to provide 200[br]megabyte RAM for five applications,
0:16:14.470,0:16:23.199
because not every mobile device has that[br]much RAM. That's how JavaScript works
0:16:23.199,0:16:28.759
because you need a web viewer and webview[br]needs all this stuff, webview needs a
0:16:28.759,0:16:33.560
JavaScript engine, style engine and so on.[br]That's different in Flutter, because
0:16:33.560,0:16:40.149
Flutter code is being compiled to native[br]code. Means if I compile this application
0:16:40.149,0:16:47.141
for Android, the code will be compiled to[br]Kotlin code which is then executed. Means
0:16:47.141,0:16:56.589
no need for JavaScript, no need for virtual[br]machines or anything like that. That's
0:16:56.589,0:17:04.280
why the consumption of memory is much[br]lower. The next point is its native look
0:17:04.280,0:17:11.540
and feel. If you, for example, if you[br]write an app in JavaScript you have the
0:17:11.540,0:17:17.040
problem that its JavaScript and not the[br]native design of the platform. If I write
0:17:17.040,0:17:25.459
an Android app in Flutter, I can just tell[br]the app: Ok, you should, you shall now
0:17:25.459,0:17:29.679
look like an Android app, provide material[br]design, provide buttons which look like
0:17:29.679,0:17:35.600
Android buttons, provide a navigation[br]drawer like an Android application and so
0:17:35.600,0:17:42.000
on. That's actually almost impossible with[br]JavaScript but in flutter it's actually
0:17:42.000,0:17:50.350
the standard. Then this, there I will come[br]to one of the problems of Flutter: It's
0:17:50.350,0:17:57.730
the same layout on all platforms. Means if[br]I tell my application: Okay, you shall
0:17:57.730,0:18:02.790
look like an Android application, it will[br]even look like an Android application if I
0:18:02.790,0:18:10.250
compile it for a Linux desktop or for iOS.[br]Means you as developer have to decide
0:18:10.250,0:18:16.250
which layout will be used and this layout[br]will be used or this design will be used
0:18:16.250,0:18:24.730
on every platform you deploy the app to.[br]Of course, you can use some styling stuff
0:18:24.730,0:18:33.179
within the app to make it more like a[br]native designed platform application for
0:18:33.179,0:18:39.070
your platform and no loss of performance[br]is what I just explained at the beginning
0:18:39.070,0:18:49.540
as native app. I hope I could, I was able[br]to introduce some bit of the idea of
0:18:49.540,0:18:57.490
Flutter, I would just now start like to[br]start an Q&A about Flutter, about what it
0:18:57.490,0:19:05.890
is able, what you can do with Flutter and[br]what you cannot do with Flutter. Thank you
0:19:05.890,0:19:08.130
for your attention.
0:19:08.130,0:19:18.489
applause
0:19:18.489,0:19:24.970
I don't know, shall I moderate? I would[br]just ... oh, ok well then you can just
0:19:24.970,0:19:28.440
ask.[br]Q: You said that is compiled to native
0:19:28.440,0:19:35.070
code and then afterwards we need a[br]different tool change for each OS.
0:19:35.070,0:19:40.350
Do we have some experience, what is the[br]effort, what do we have to do to, let's say
0:19:40.350,0:19:43.590
run it in incomprehensible
0:19:43.590,0:19:48.350
A: Well, you actually, the question was[br]whether,
0:19:48.350,0:19:54.250
what you have to do for running or for[br]providing one app at four different
0:19:54.250,0:19:58.030
platforms. Well, everything you have to do[br]is running Flutter build and name of the
0:19:58.030,0:20:04.941
platform. So if you decide to deploy it to[br]iOS, Android, Linux and Mac OS you can
0:20:04.941,0:20:15.150
just execute "flutter build apk" for[br]Android, afterwards "flutter build ios"
0:20:15.150,0:20:22.021
for iOS, "flutter build linux" for Linux[br]and "flutter build macos" for Mac OS. So
0:20:22.021,0:20:29.840
you actually do not have to go deeper into[br]the single platforms. Flutter provides
0:20:29.840,0:20:39.210
everything you need there. Did I answer[br]your question?
0:20:39.210,0:20:48.679
Q: (incomprehensible)[br]A: Yeah, it will install it automatically,
0:20:48.679,0:20:54.120
if you download it, if you download[br]Flutter and you execute it the first time,
0:20:54.120,0:20:59.929
it will ask you to install this and this[br]and this, the Android tool chain, the iOS
0:20:59.929,0:21:16.840
Xcode tool chain and whatever you need to.[br]Q: I have a question. At the main function
0:21:16.840,0:21:23.610
you just have to define your style and the[br]home page right. So what is hindering me
0:21:23.610,0:21:29.460
to say: Release a version for Android to[br]the Android style then just change the
0:21:29.460,0:21:33.440
style for something that looks more iOS[br]and then release a different version for
0:21:33.440,0:21:37.270
iOS?[br]A: Yes, sure you can do it and Flutter
0:21:37.270,0:21:47.440
even offers a parameter of material app,[br]you can provide their theme data class and
0:21:47.440,0:21:54.910
within this theme data class you could[br]tell the application: OK, on iOS I should
0:21:54.910,0:21:59.120
behave and look like this and on[br]Android I should behave and look like
0:21:59.120,0:22:03.620
this. So even offers native[br]functionalities for this.
0:22:03.620,0:22:12.159
Q: Thank you for this nice talk. Who has[br]developed Flutter and how it is protected
0:22:12.159,0:22:20.240
by being bought by Oracle.[br]A: I don't think Oracle will buy Flutter,
0:22:20.240,0:22:27.120
because it's developed by Google and I'm[br]quite sure Google won't sell it. And as
0:22:27.120,0:22:33.750
its open-source, it will remain open[br]source. I'm not sure about license, it was
0:22:33.750,0:22:47.150
I guess it was Apache or MIT license. So[br]it won't become closed-source software
0:22:47.150,0:22:52.331
tomorrow.[br]Q: Hi and thanks again for the talk. What
0:22:52.331,0:22:57.370
I would actually know, is the performance[br]of all native components, I mean like all
0:22:57.370,0:23:08.800
native code the same on all platforms?[br]A: Yes-No because some functions are not
0:23:08.800,0:23:14.890
available on every platform. For example,[br]if I run the application on the web, you
0:23:14.890,0:23:20.919
won't be able to save local files or open[br]local files, because that's not what a
0:23:20.919,0:23:28.220
website should do or just can do. But[br]yeah, on the mobile platforms actually
0:23:28.220,0:23:31.220
everything is the same, on the desktop[br]platforms everything is the same and in
0:23:31.220,0:23:38.100
the web, it's a bit different.[br]Q: Hi thanks for the talk. What about
0:23:38.100,0:23:43.730
capabilities like Bluetooth Low Energy. Is[br]there any restrictions or something like
0:23:43.730,0:23:51.340
that to get deep into the platform?[br]A: Well, Flutter provides access to
0:23:51.340,0:23:57.549
Bluetooth. The only restrictions you may[br]have is from your platform, but even if
0:23:57.549,0:24:04.419
you want to use a feature which is not[br]implemented in Flutter, you can access
0:24:04.419,0:24:09.720
native code. So from flutter you can just[br]call Swift code on iOS and Kotlin code for
0:24:09.720,0:24:15.460
Android and so on, if anything is not[br]implemented in Flutter.
0:24:15.460,0:24:20.710
Q: Hey I was a little bit late, in the[br]talk you maybe already talked about this,
0:24:20.710,0:24:25.840
but what kind of projects did you make[br]with Flutter and did you think that
0:24:25.840,0:24:29.020
Flutter was a good fit for these projects[br]or not?
0:24:29.020,0:24:35.049
A: Well what I do with flutter is actually[br]everything running on mobile devices,
0:24:35.049,0:24:42.289
because I'm not such a huge fan of the[br]native programming languages of iOS and
0:24:42.289,0:24:49.850
Android. I don't like Java and I don't[br]like Swift, that's why I got used to
0:24:49.850,0:24:57.860
Flutter. And yeah, I think it's actually[br]very good for this, because you only write
0:24:57.860,0:25:05.210
code once and then you can deploy to all[br]the mobile platforms. Applications I
0:25:05.210,0:25:13.350
developed were mostly JugendHackt[br]projects, projects of youth hackathons, of
0:25:13.350,0:25:22.270
the open knowledge foundations.[br]Other questions?
0:25:25.870,0:25:31.590
Q: Hello. All the widgets are emulated and[br]not native widgets of the operating
0:25:31.590,0:25:41.970
system, of iOS or Android?[br]A: It's not emulated nor if you use the
0:25:41.970,0:25:48.690
native design, it's the native design.[br]Flutter provides its totally own graphics
0:25:48.690,0:25:54.669
library, so even if you use Cupertino[br]design on iOS, it's not the Cupertino
0:25:54.669,0:26:00.630
design from iOS but the Cupertino designed[br]from Flutter. So independent of the
0:26:00.630,0:26:04.350
platform, it offers its own graphics[br]library.
0:26:04.350,0:26:09.650
Q: So you lose the integration with[br]accessibility features from the operating
0:26:09.650,0:26:14.880
system?[br]A: No that's what I told on this slide:
0:26:14.880,0:26:22.070
The engine, the low-level engine provides[br]a accessibility component, for example,
0:26:22.070,0:26:26.859
and, yeah, pipes them to the native[br]platform.
0:26:29.519,0:26:35.549
Q: So what's the main advantage compared[br]to other frameworks like Qt?
0:26:35.549,0:26:43.340
A: Better performance, I would just say[br]and many more platforms, because most of
0:26:43.340,0:26:48.630
the frameworks are just - they are usually[br]just available for mobile platforms.
0:26:48.630,0:26:53.870
Electron focus on, for example, for[br]desktop platforms and flutter provides
0:26:53.870,0:27:00.070
them all and just from one single codebase[br]and its native code you execute.
0:27:00.070,0:27:05.640
Q: Have you ever worked with background[br]services, native background services on a
0:27:05.640,0:27:10.669
platform? Like Android service?[br]A: Yeah, Flutter provides background
0:27:10.669,0:27:17.929
services and if you use them, it will just[br]subscribe the native background services
0:27:17.929,0:27:20.939
of the platform you're using.
0:27:29.534,0:27:31.409
Q: What's the current state of IDE
0:27:31.409,0:27:37.140
integration because with other frameworks[br]I had problems that the IDEs I use are
0:27:37.140,0:27:44.269
mostly the ones from JetBrains and those[br]didn't work with all frameworks I tried.
0:27:44.269,0:27:52.590
A: Flutter offers official support to[br]Android Studio and Visual Studio Code, but
0:27:52.590,0:28:00.770
for many other IDEs there are third-party[br]plug-ins with language support for Dart
0:28:00.770,0:28:15.610
and Flutter.[br]Q: Are there any restrictions on how far
0:28:15.610,0:28:27.490
you can make your app ready for, for[br]example provisioning profiles on iOS to
0:28:27.490,0:28:36.640
get ready to in the store or is it just[br]raw building for that platform and
0:28:36.640,0:28:42.870
everything else if you want to get it in[br]the store or you have to go native?
0:28:42.870,0:28:54.549
A: No, I never had a problem with that. I[br]published three apps for iOS. iOS has most
0:28:54.549,0:28:59.559
restrictions and I never had any problem,[br]because the design of flutter follows all
0:28:59.559,0:29:05.740
the guidelines and they pay attention on[br]following the guidelines of the maintainer
0:29:05.740,0:29:10.448
of the stores of all the platforms they[br]support.
0:29:13.679,0:29:21.950
Q: The person there asked about IDE. I[br]understood IE and that's a good point -
0:29:21.950,0:29:29.919
web platform: How the Microsoft browsers[br]are supported as they are used heavily in
0:29:29.919,0:29:34.990
big environments.[br]A: Sorry what was, what should I say?
0:29:34.990,0:29:40.950
Q: My question is how Flutter supports the[br]Microsoft browsers, even if we don't want
0:29:40.950,0:29:47.000
use them all but we need do somehow.[br]A: According to the README of Flutter Web
0:29:47.000,0:29:54.350
repository, there's no support for[br]browsers by Microsoft and I even tried
0:29:54.350,0:30:00.950
once, you will see an empty screen in[br]Internet Explorer and on Microsoft Edge
0:30:00.950,0:30:07.130
you will get many crashes. But this will[br]change in January as Microsoft will start
0:30:07.130,0:30:13.700
rolling out the chromium based Microsoft[br]edge to all Windows 10 devices and even
0:30:13.700,0:30:21.340
older Windows devices. So that's[br]something, I say I don't care about .
0:30:21.340,0:30:23.850
Music
0:30:23.850,0:30:49.000
Subtitles created by c3subtitles.de[br]in the year 2021. Join, and help us!