0:00:00.000,0:00:17.920
wikipaka intro music
0:00:17.920,0:00:25.605
Hello and welcome to this first talk.[br]Today I'm going to give... into cross
0:00:25.605,0:00:33.436
platform development using Flutter. What[br]is Flutter? Flutter is a cross platform
0:00:33.436,0:00:48.400
development kit. Here. Fancy logo you can[br]see over there. OK, we will talk about how
0:00:48.400,0:00:55.200
to install Flutter. We will talk about the[br]special features of Flutter, hence,
0:00:55.200,0:01:01.520
widgets, which will have a look on their[br]plugins. We will have a look on two
0:01:01.520,0:01:08.480
different kinds of these widgets, stateful[br]and stateless widgets. And at the end, we
0:01:08.480,0:01:16.320
will talk about the main feature,[br]Flutter's part of the code, so you do not
0:01:16.320,0:01:25.840
have seperate style files or seperate[br]layout files. OK, how would you install
0:01:25.840,0:01:31.840
Flutter? Well, if you are used to Git,[br]it's actually quite easy. You simply clone
0:01:31.840,0:01:39.680
their git repository, update the path and[br]you have the flutter tool installed. That
0:01:39.680,0:01:48.140
installs two things: The library Flutter[br]and the programming language Dart, Dart the
0:01:48.140,0:01:53.680
programing language you use with Flutter.[br]Of course you could use Dart without
0:01:53.680,0:02:00.160
Flutter, but Dart is usually used with[br]Flutter and Flutter only works with Dart.
0:02:02.720,0:02:09.920
OK. Well, if you are not interested in[br]cloning git repositories, if you are not
0:02:09.920,0:02:17.760
that used to command prompts, you could[br]easily install Flutter using the plugin of
0:02:18.560,0:02:24.640
your development environment. For example,[br]Visual Studio Code or Android studio so
0:02:24.640,0:02:31.680
intellij, they offer very user friendly[br]plugins with a quick installation guide
0:02:31.680,0:02:40.720
for Flutter, automating all these[br]steps. OK, what is Flutter like? If we
0:02:40.720,0:02:44.960
have a look on Flutter, we talk about[br]different things. We have the framework
0:02:44.960,0:02:52.480
within Dart, we have the engine and we[br]have platform specific code. Flutter
0:02:52.480,0:02:56.800
consists of something called the "Flutter[br]tool". That's not listed in the graphic
0:02:56.800,0:03:03.120
you can see there. That's what you use to[br]create an application. For example, if you
0:03:03.120,0:03:09.520
type "flutter create mynewapplication" in[br]the command prompt, that's the Flutter
0:03:09.520,0:03:17.760
tool you use. But as soon as you've done an[br]application, you have this... it works the
0:03:17.760,0:03:23.680
way the graphic presents it: You have this[br]framework consisting of everything you can
0:03:23.680,0:03:33.240
see and everything you can do. You have[br]buttons, for example "Material" buttons,
0:03:33.240,0:03:36.320
these are the two main theme styles, so
0:03:36.320,0:03:44.640
"Material" is the Android and Chrome OS[br]one and "Cupertino" is the iOS-style user
0:03:44.640,0:03:52.720
interface. The framework takes also care[br]of the rendering animations, interactions
0:03:52.720,0:03:58.400
with users. So gestures, if you tap a[br]button or if you move around something on
0:03:58.400,0:04:08.960
the UI, that's something the framework[br]takes care of. And under the framework,
0:04:08.960,0:04:16.960
there's the engine. The engine operates[br]everything which is not specific to your
0:04:16.960,0:04:24.160
application, so the general stuff of[br]Flutter. It takes care of the interaction
0:04:24.160,0:04:29.280
with the Dart virtual machine. It takes[br]care of platform channels. For example, if
0:04:29.280,0:04:37.920
you want to access native code, takes care[br]of accessibility, it interacts with the
0:04:37.920,0:04:46.800
operating system and so on. And beside of[br]those two, there's still the embedder. The
0:04:46.800,0:04:54.720
embedder is, what is, yeah, typic for one[br]kind of device, for example, or for one
0:04:54.720,0:05:01.920
platform, for example, for Android. The[br]embedder takes care of threads of process
0:05:01.920,0:05:07.920
management, takes care of the event loop[br]of the operating system, and it takes care
0:05:07.920,0:05:16.000
of interaction with native plugins. And[br]most importantly, it's responsible for
0:05:16.000,0:05:20.480
packing the application. For example, if[br]you have raw Dart code, no device would be
0:05:20.480,0:05:27.680
able to execute it. So the embedder is[br]responsible for hacking this code into an
0:05:30.560,0:05:40.640
executable on Windows, into a JavaScript[br]file on the Web or into an APK file on
0:05:40.640,0:05:51.840
Android. OK, well, now I already[br]introduced these widgets, I talked about
0:05:51.840,0:05:59.600
Material and Cupertino widgets, but what[br]is a widget? Yeah, a widget is pretty much
0:05:59.600,0:06:08.000
everything you can see in a flutter app. A[br]widget is any user interface element,
0:06:09.100,0:06:12.960
sometimes allowing interaction, sometimes[br]not. But everything you can see in an
0:06:12.960,0:06:21.600
application is called widget. You can[br]imagine a widget like, for example, HTML
0:06:21.600,0:06:30.640
elements. You simply put them into each[br]other and create a document tree. But
0:06:30.640,0:06:40.480
unlike if you use HTML, you do not have[br]HTML for the layout, CSS for the style and
0:06:40.480,0:06:45.840
JavaScript for the interaction. If you[br]have Flutter, these widgets provide all
0:06:45.840,0:06:56.640
these three parts. So the widget performs[br]the layout, the widget offers style and
0:06:56.640,0:07:02.960
offers interaction with the user. Hence you[br]do not have any separation between style
0:07:02.960,0:07:10.640
and content of the application. That's a[br]very good feature for development and
0:07:10.640,0:07:20.400
makes many things such as refactoring[br]code. But there are different types of
0:07:20.400,0:07:26.160
Stateless widgets without any kind of[br]feedback they can provide. They are once
0:07:26.160,0:07:32.160
rendered and afterwards they are present.[br]Or if the parenting widget decides, well,
0:07:32.160,0:07:37.600
I no longer want to show this, for[br]example, text, that is just being removed
0:07:37.600,0:07:44.320
without any interaction of this widget.[br]Another point are stateful widgets, they
0:07:44.320,0:07:53.840
allow interaction. So for example, if you[br]have a text as a stateful widget, it can
0:07:55.520,0:08:01.840
tell - it is able to tell the application[br]after a couple of seconds: OK, now I want
0:08:01.840,0:08:10.080
to change my own color or I want to change[br]my font size, so it has an own event loop
0:08:10.080,0:08:17.680
and can decide based on things happening[br]inside this widget. That's usually a bit,
0:08:18.240,0:08:25.120
yeah... not these low level widgets like[br]text, but all these high level widgets
0:08:25.120,0:08:34.880
like list views consisting of several[br]children and so on, menus, they consist of
0:08:34.880,0:08:41.040
a menu button and drop down menu and[br]whatever, or even the whole page of an
0:08:41.040,0:08:49.440
application. All these are widgets,[br]stateful widgets. OK, time to provide some
0:08:49.440,0:08:56.320
code samples. That was a bit of[br]introduction into the architecture. Let's
0:08:56.320,0:09:04.080
have a look on code. Well,[br]congratulations. That's a simple Flutter
0:09:04.080,0:09:09.600
program. If you write it and you provide a[br]declaration of homepage, you should be
0:09:09.600,0:09:16.320
able to run an application on your mobile[br]phone. Yeah. What does it? It executes the
0:09:16.320,0:09:23.280
main function, calling a method call,[br]calling a function called runApp, which
0:09:23.280,0:09:28.880
runs a Material app. So following the[br]Material design you know from Android or
0:09:28.880,0:09:40.160
Chrome OS. OK, but of course, we need to[br]implement homepage. Well, let's have a
0:09:40.160,0:09:49.941
look at a bit more difficult widget.
0:09:49.941,0:10:26.656
silence
0:10:26.656,0:10:32.920
...tell the widget everything it needs to[br]know for building, in our case, we simply
0:10:32.920,0:10:41.428
return a list type, consisting of an icon[br]and an outline button. The outline button
0:10:41.428,0:10:48.921
can do anything. It can share a text. So you[br]would see your share prompt on your mobile
0:10:48.921,0:10:57.408
phone or on the web it would download the[br]text. OK. But why is it stateless and not
0:10:57.408,0:11:05.920
stateful? Simply because it cannot[br]interact with itself, the widget is unable
0:11:05.920,0:11:13.767
to change one of its variables, the widget[br]cannot set a timer, it simply could not...
0:11:13.767,0:11:20.498
if you would tell the widget, well, wait[br]five seconds and do whatever, it would not
0:11:20.498,0:11:27.070
change the appearance of the widget,[br]because it is once built and afterwards,
0:11:27.070,0:11:34.867
it has no more... it no longer has the[br]ability to change its appearance or
0:11:34.867,0:11:41.436
behavior. Only the parenting widget - so,[br]for example, the list we put this
0:11:41.436,0:11:47.483
scoredetail inside - it could trigger a[br]rebuild of this widget, but not the widget
0:11:47.483,0:11:58.812
itself. To clarify this point, we'll have[br]a look at a stateful widget. It is a bit
0:11:58.812,0:12:03.404
shorter, because the stateful widget[br]consists of two classes, state class,
0:12:03.404,0:12:09.803
that's what you can see over there. And,[br]well, the actual declaration that it is a
0:12:09.803,0:12:18.620
widget. But the state is much more[br]interesting if we look at it. OK, you
0:12:18.620,0:12:25.520
first see there are... we first[br]initialized some variables. Afterwards, we
0:12:25.520,0:12:30.245
have a method called initState. That's[br]something which is being triggered the
0:12:30.245,0:12:37.080
first time the widget is built, afterwards[br]we declare another method. And at
0:12:37.080,0:12:44.523
the end we have our build-method. Yeah,[br]what does or what's the difference from
0:12:44.523,0:12:51.772
this build-method to the build-method we[br]had in our stateless widget... I hope you
0:12:51.772,0:12:58.630
can see my pointer, yeah. We have here, we[br]have an if statement here, a short if
0:12:58.630,0:13:06.037
statement. So the build method checks[br]whether a variable called testLoaded -
0:13:06.037,0:13:15.927
that's being declared at the top here -[br]whether it is false or true. And it
0:13:15.927,0:13:23.808
correspondingly reacts. So if it's true,[br]a list view is being displayed and
0:13:23.808,0:13:32.628
otherwhise a progressindicator is being[br]shown. OK, but well, that's something we
0:13:32.628,0:13:38.840
could still implement in a stateless[br]widget, but there's another big difference
0:13:38.840,0:13:45.406
here. We have something which changes[br]something as soon as something happens.
0:13:45.406,0:13:52.125
Well make some things. It's an expansion[br]tile, so a list tile which can be
0:13:52.125,0:13:58.885
expanded. It's a builtin widget of[br]Flutter. And as soon as it is being
0:13:58.885,0:14:05.384
opened, it's... a local method is[br]triggered: Here we have this loadScore
0:14:05.384,0:14:13.386
method and that is being triggered. We do[br]not know what it does, but I can tell you,
0:14:13.386,0:14:19.758
it will load some data from wheresoever[br]and it will change this variable. So
0:14:19.758,0:14:27.578
afterwards, after this method is being[br]triggered, the test data here will be
0:14:27.578,0:14:32.920
something different. It will no longer show [br]the progress, but it will show this inside
0:14:32.920,0:14:39.250
a single widget without any communication,[br]without any external stuff, without any
0:14:39.250,0:14:47.490
JavaScript, getElementById or something[br]like that. The widget simply decides on
0:14:47.490,0:14:58.348
its own behavior. That's very comfortable,[br]believe me. OK, now we already talked a
0:14:58.348,0:15:05.280
bit on JavaScript, it's somehow different.[br]Well, Flutter is often being compared to
0:15:05.280,0:15:13.205
JavaScript using React native and[br]Electron. So what's the difference?
0:15:13.205,0:15:15.611
Well, let's first look on
0:15:15.611,0:15:24.035
JavaScript. You write an application in[br]JavaScript, you actually have JavaScript
0:15:24.035,0:15:29.870
and JavaScript is a Web language. Hence,[br]you need a web view or something similar
0:15:29.870,0:15:39.513
to render anything of your app. That means[br]it consumes an immense amount of memory
0:15:39.513,0:15:46.083
and CPU power because, well, if you ever[br]used chromium or Firefox on the low-end
0:15:46.083,0:15:53.837
device, you know that JavaScript can be,[br]well, quite painful. Well, there are
0:15:53.837,0:15:59.990
highend mobile devices. But if you develop[br]an app, you should always keep in mind
0:15:59.990,0:16:05.552
that there are mobile devices with much[br]less power and less than two gigabyte of
0:16:05.552,0:16:17.350
RAM. OK. And if you have Flutter in[br]opposite, you create a native app and you
0:16:17.350,0:16:24.047
have native code which is being executed[br]beside the Dart virtual machine with
0:16:24.047,0:16:30.044
almost the same look and feel, you know,[br]from your platform. If you have JavaScript
0:16:30.044,0:16:35.784
and opposite, you usually have a fancy[br]design you made, which is actually good
0:16:35.784,0:16:41.005
for web development. But it's usually not[br]exactly the design packed from a mobile
0:16:41.005,0:16:46.401
device. There are very strict guidelines.[br]If you ask Apple or if you ever published
0:16:46.401,0:16:52.217
an app to the App Store, you know, there[br]are very strict guidelines at Apple. And
0:16:52.217,0:16:58.365
at Google there are guidelines as well,[br]but they're not that strict. But if you
0:16:58.365,0:17:04.236
use Flutter, you automatically obey[br]these guidelines and produce apps with a
0:17:04.236,0:17:12.298
native look and feel. And another[br]advantage of Flutter, it's more an
0:17:12.298,0:17:19.394
advantage in comparison to native native[br]apps, you have the same data and the same
0:17:19.394,0:17:27.807
code on the same on all your platforms.[br]Yeah, because if you write native
0:17:27.807,0:17:30.257
applications, well, you have two code[br]bases and the applications behaves
0:17:30.257,0:17:34.634
differently on all platforms. And if you[br]have Flutter, you have one code base for
0:17:34.634,0:17:39.378
all your platforms and obviously it[br]behaves the same way on all platforms.
0:17:39.378,0:17:47.510
That's much easier for your users if she[br]should ever change their device. Yeah, and
0:17:47.510,0:17:54.274
the major point I already mentioned at the[br]first point, there is almost no loss of
0:17:54.274,0:18:03.537
performance. Yeah. So Flutter is actually[br]a very good framework for creating apps for
0:18:03.537,0:18:12.442
Android, IOS, desktops such as Windows, [br]Mac OS or Linux, Free BSD is unfortunately
0:18:12.442,0:18:23.350
not supported - or even webpages. OK.[br]Yeah. And at that point, I want to thank
0:18:23.350,0:18:31.176
you for your the attention of this talk.[br]Feel free to attend my next talk on
0:18:31.176,0:18:36.400
Flutter. Tomorrow I will give an advanced[br]view on cross-platform development using
0:18:36.400,0:18:43.085
Flutter. We will focus on animations and[br]the way Flutter works under the hood. Now
0:18:43.085,0:18:54.115
there should be an online Q&A. Thank you[br]for your attention!
0:18:59.525,0:19:04.720
Herald: Hello, this was the lecture by the[br]one with the braid about Flutter and we
0:19:04.720,0:19:10.880
are now switching to a small Q&A session[br]here. There has been exactly one question
0:19:10.880,0:19:19.280
in the IRC. You can ask questions by the[br]hashtag rC3Wikipaka and in the rC3Wikipaka
0:19:19.280,0:19:23.840
IRC channel on hackint. There's been one[br]question, which is: What is the main
0:19:23.840,0:19:29.520
feature of Flutter, which lets me decide[br]for it instead of, for example, react
0:19:29.520,0:19:34.860
native? Could you answer that question?
0:19:34.860,0:20:01.440
(incomprehensible)
0:20:01.440,0:20:06.480
Herald: The one with the braid, we've got[br]problems with your sound. We can't receive
0:20:06.480,0:20:14.592
you via ninja, only via our backchannel.
0:20:14.592,0:20:24.612
(incomprehensible)
0:20:24.612,0:20:27.622
Herald: And now they're gone.
0:20:27.622,0:20:28.114
The one with the braid: Can you hear me[br]again?
0:20:28.114,0:20:29.094
Herald: Here we are again.
0:20:29.094,0:20:32.589
Herald: Yeah, we can hear you now.[br]The one with the braid: OK, perfect.
0:20:32.589,0:20:37.869
Well, the question was, what could[br]convince someone to use Flutter? I would
0:20:37.869,0:20:44.265
say the main advantage, the principal[br]advantage of Flutter is the performance
0:20:44.265,0:20:51.321
and the native-like applications you get.[br]If you use Flutter, you get native design
0:20:51.321,0:20:57.106
of the operating system you run on and you[br]have no lack of performance. That's the
0:20:57.106,0:21:05.194
main difference to JavaScript, for[br]example. So you act native.
0:21:05.194,0:21:08.914
Herald: Would you consider yourself to be[br]a flutter fan or aficionado?
0:21:08.914,0:21:12.880
The one with the braid: Oh, yeah, I'm a[br]huge fan of Flutter.
0:21:12.880,0:21:17.600
Herald: OK, we can tell that. You do have[br]other talks about Flutter in the coming
0:21:17.600,0:21:21.200
days, don't you?[br]The one with the braid: Yes, tomorrow at
0:21:22.400,0:21:29.360
12 o'clock, there is a second talk on[br]Flutter - advanced cross-platform
0:21:29.360,0:21:35.680
development using Flutter. We will focus[br]on Animations and on the way the engine,
0:21:36.400,0:21:43.120
so the underlying engine of Flutter works.[br]Herald: Alright, there's been another
0:21:43.120,0:21:47.760
question in the meantime here, again by[br]hanswurst10. React native also gives you
0:21:47.760,0:21:50.400
native components and design, etc. Isn't[br]that true?
0:21:50.400,0:21:54.960
The one with the braid: Yeah, it's true.[br]But well, I would call the Flutter
0:21:54.960,0:22:01.600
components more native. They are built 100[br]percent according to the style-guidelines
0:22:02.160,0:22:09.280
of the operating systems. If you use[br]Material patterns, they are 100 percent
0:22:10.320,0:22:17.200
Material. So as you know them from your[br]Android phone, for example. And I noticed
0:22:17.200,0:22:23.360
in react native, you sometimes have[br]issues... not issues, but some components
0:22:23.360,0:22:31.200
do not properly look exactly the way they[br]should look, and they often do not look
0:22:31.200,0:22:38.480
the way the users expect them to look.[br]Herald: Alright, thanks for the answers to
0:22:38.480,0:22:43.040
the questions, there have been some more[br]detailed questions as a follow up on the
0:22:43.040,0:22:50.320
IRC, but I've posted in the IRC a link[br]where you can all join into for a little
0:22:50.320,0:22:54.400
BigBlueButton session, where you can go[br]into more detail exchange. The one with
0:22:54.400,0:22:58.480
the braid, thank you so much for your[br]input. This has been the first broadcast
0:22:58.480,0:23:04.160
of the day and of RC3, and we will[br]continue to follow up with a little break
0:23:04.160,0:23:09.440
and continue our program at Sixteen[br]Hundred Central European Time. Thank you.
0:23:09.440,0:23:13.850
The one with the braid: OK, see you.[br]Herald: Bye bye.
0:23:13.850,0:23:17.932
wikipaka outro music
0:23:17.932,0:23:24.000
Subtitles created by c3subtitles.de[br]in the year 2021. Join, and help us!