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