1
00:00:00,000 --> 00:00:17,920
wikipaka intro music
2
00:00:17,920 --> 00:00:25,605
Hello and welcome to this first talk.
Today I'm going to give... into cross
3
00:00:25,605 --> 00:00:33,436
platform development using Flutter. What
is Flutter? Flutter is a cross platform
4
00:00:33,436 --> 00:00:48,400
development kit. Here. Fancy logo you can
see over there. OK, we will talk about how
5
00:00:48,400 --> 00:00:55,200
to install Flutter. We will talk about the
special features of Flutter, hence,
6
00:00:55,200 --> 00:01:01,520
widgets, which will have a look on their
plugins. We will have a look on two
7
00:01:01,520 --> 00:01:08,480
different kinds of these widgets, stateful
and stateless widgets. And at the end, we
8
00:01:08,480 --> 00:01:16,320
will talk about the main feature,
Flutter's part of the code, so you do not
9
00:01:16,320 --> 00:01:25,840
have seperate style files or seperate
layout files. OK, how would you install
10
00:01:25,840 --> 00:01:31,840
Flutter? Well, if you are used to Git,
it's actually quite easy. You simply clone
11
00:01:31,840 --> 00:01:39,680
their git repository, update the path and
you have the flutter tool installed. That
12
00:01:39,680 --> 00:01:48,140
installs two things: The library Flutter
and the programming language Dart, Dart the
13
00:01:48,140 --> 00:01:53,680
programing language you use with Flutter.
Of course you could use Dart without
14
00:01:53,680 --> 00:02:00,160
Flutter, but Dart is usually used with
Flutter and Flutter only works with Dart.
15
00:02:02,720 --> 00:02:09,920
OK. Well, if you are not interested in
cloning git repositories, if you are not
16
00:02:09,920 --> 00:02:17,760
that used to command prompts, you could
easily install Flutter using the plugin of
17
00:02:18,560 --> 00:02:24,640
your development environment. For example,
Visual Studio Code or Android studio so
18
00:02:24,640 --> 00:02:31,680
intellij, they offer very user friendly
plugins with a quick installation guide
19
00:02:31,680 --> 00:02:40,720
for Flutter, automating all these
steps. OK, what is Flutter like? If we
20
00:02:40,720 --> 00:02:44,960
have a look on Flutter, we talk about
different things. We have the framework
21
00:02:44,960 --> 00:02:52,480
within Dart, we have the engine and we
have platform specific code. Flutter
22
00:02:52,480 --> 00:02:56,800
consists of something called the "Flutter
tool". That's not listed in the graphic
23
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
24
00:03:03,120 --> 00:03:09,520
type "flutter create mynewapplication" in
the command prompt, that's the Flutter
25
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
26
00:03:17,760 --> 00:03:23,680
way the graphic presents it: You have this
framework consisting of everything you can
27
00:03:23,680 --> 00:03:33,240
see and everything you can do. You have
buttons, for example "Material" buttons,
28
00:03:33,240 --> 00:03:36,320
these are the two main theme styles, so
29
00:03:36,320 --> 00:03:44,640
"Material" is the Android and Chrome OS
one and "Cupertino" is the iOS-style user
30
00:03:44,640 --> 00:03:52,720
interface. The framework takes also care
of the rendering animations, interactions
31
00:03:52,720 --> 00:03:58,400
with users. So gestures, if you tap a
button or if you move around something on
32
00:03:58,400 --> 00:04:08,960
the UI, that's something the framework
takes care of. And under the framework,
33
00:04:08,960 --> 00:04:16,960
there's the engine. The engine operates
everything which is not specific to your
34
00:04:16,960 --> 00:04:24,160
application, so the general stuff of
Flutter. It takes care of the interaction
35
00:04:24,160 --> 00:04:29,280
with the Dart virtual machine. It takes
care of platform channels. For example, if
36
00:04:29,280 --> 00:04:37,920
you want to access native code, takes care
of accessibility, it interacts with the
37
00:04:37,920 --> 00:04:46,800
operating system and so on. And beside of
those two, there's still the embedder. The
38
00:04:46,800 --> 00:04:54,720
embedder is, what is, yeah, typic for one
kind of device, for example, or for one
39
00:04:54,720 --> 00:05:01,920
platform, for example, for Android. The
embedder takes care of threads of process
40
00:05:01,920 --> 00:05:07,920
management, takes care of the event loop
of the operating system, and it takes care
41
00:05:07,920 --> 00:05:16,000
of interaction with native plugins. And
most importantly, it's responsible for
42
00:05:16,000 --> 00:05:20,480
packing the application. For example, if
you have raw Dart code, no device would be
43
00:05:20,480 --> 00:05:27,680
able to execute it. So the embedder is
responsible for hacking this code into an
44
00:05:30,560 --> 00:05:40,640
executable on Windows, into a JavaScript
file on the Web or into an APK file on
45
00:05:40,640 --> 00:05:51,840
Android. OK, well, now I already
introduced these widgets, I talked about
46
00:05:51,840 --> 00:05:59,600
Material and Cupertino widgets, but what
is a widget? Yeah, a widget is pretty much
47
00:05:59,600 --> 00:06:08,000
everything you can see in a flutter app. A
widget is any user interface element,
48
00:06:09,100 --> 00:06:12,960
sometimes allowing interaction, sometimes
not. But everything you can see in an
49
00:06:12,960 --> 00:06:21,600
application is called widget. You can
imagine a widget like, for example, HTML
50
00:06:21,600 --> 00:06:30,640
elements. You simply put them into each
other and create a document tree. But
51
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
52
00:06:40,480 --> 00:06:45,840
JavaScript for the interaction. If you
have Flutter, these widgets provide all
53
00:06:45,840 --> 00:06:56,640
these three parts. So the widget performs
the layout, the widget offers style and
54
00:06:56,640 --> 00:07:02,960
offers interaction with the user. Hence you
do not have any separation between style
55
00:07:02,960 --> 00:07:10,640
and content of the application. That's a
very good feature for development and
56
00:07:10,640 --> 00:07:20,400
makes many things such as refactoring
code. But there are different types of
57
00:07:20,400 --> 00:07:26,160
Stateless widgets without any kind of
feedback they can provide. They are once
58
00:07:26,160 --> 00:07:32,160
rendered and afterwards they are present.
Or if the parenting widget decides, well,
59
00:07:32,160 --> 00:07:37,600
I no longer want to show this, for
example, text, that is just being removed
60
00:07:37,600 --> 00:07:44,320
without any interaction of this widget.
Another point are stateful widgets, they
61
00:07:44,320 --> 00:07:53,840
allow interaction. So for example, if you
have a text as a stateful widget, it can
62
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
63
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
64
00:08:10,080 --> 00:08:17,680
and can decide based on things happening
inside this widget. That's usually a bit,
65
00:08:18,240 --> 00:08:25,120
yeah... not these low level widgets like
text, but all these high level widgets
66
00:08:25,120 --> 00:08:34,880
like list views consisting of several
children and so on, menus, they consist of
67
00:08:34,880 --> 00:08:41,040
a menu button and drop down menu and
whatever, or even the whole page of an
68
00:08:41,040 --> 00:08:49,440
application. All these are widgets,
stateful widgets. OK, time to provide some
69
00:08:49,440 --> 00:08:56,320
code samples. That was a bit of
introduction into the architecture. Let's
70
00:08:56,320 --> 00:09:04,080
have a look on code. Well,
congratulations. That's a simple Flutter
71
00:09:04,080 --> 00:09:09,600
program. If you write it and you provide a
declaration of homepage, you should be
72
00:09:09,600 --> 00:09:16,320
able to run an application on your mobile
phone. Yeah. What does it? It executes the
73
00:09:16,320 --> 00:09:23,280
main function, calling a method call,
calling a function called runApp, which
74
00:09:23,280 --> 00:09:28,880
runs a Material app. So following the
Material design you know from Android or
75
00:09:28,880 --> 00:09:40,160
Chrome OS. OK, but of course, we need to
implement homepage. Well, let's have a
76
00:09:40,160 --> 00:09:49,941
look at a bit more difficult widget.
77
00:09:49,941 --> 00:10:26,656
silence
78
00:10:26,656 --> 00:10:32,920
...tell the widget everything it needs to
know for building, in our case, we simply
79
00:10:32,920 --> 00:10:41,428
return a list type, consisting of an icon
and an outline button. The outline button
80
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
81
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
82
00:10:57,408 --> 00:11:05,920
stateful? Simply because it cannot
interact with itself, the widget is unable
83
00:11:05,920 --> 00:11:13,767
to change one of its variables, the widget
cannot set a timer, it simply could not...
84
00:11:13,767 --> 00:11:20,498
if you would tell the widget, well, wait
five seconds and do whatever, it would not
85
00:11:20,498 --> 00:11:27,070
change the appearance of the widget,
because it is once built and afterwards,
86
00:11:27,070 --> 00:11:34,867
it has no more... it no longer has the
ability to change its appearance or
87
00:11:34,867 --> 00:11:41,436
behavior. Only the parenting widget - so,
for example, the list we put this
88
00:11:41,436 --> 00:11:47,483
scoredetail inside - it could trigger a
rebuild of this widget, but not the widget
89
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
90
00:11:58,812 --> 00:12:03,404
shorter, because the stateful widget
consists of two classes, state class,
91
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
92
00:12:09,803 --> 00:12:18,620
widget. But the state is much more
interesting if we look at it. OK, you
93
00:12:18,620 --> 00:12:25,520
first see there are... we first
initialized some variables. Afterwards, we
94
00:12:25,520 --> 00:12:30,245
have a method called initState. That's
something which is being triggered the
95
00:12:30,245 --> 00:12:37,080
first time the widget is built, afterwards
we declare another method. And at
96
00:12:37,080 --> 00:12:44,523
the end we have our build-method. Yeah,
what does or what's the difference from
97
00:12:44,523 --> 00:12:51,772
this build-method to the build-method we
had in our stateless widget... I hope you
98
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
99
00:12:58,630 --> 00:13:06,037
statement. So the build method checks
whether a variable called testLoaded -
100
00:13:06,037 --> 00:13:15,927
that's being declared at the top here -
whether it is false or true. And it
101
00:13:15,927 --> 00:13:23,808
correspondingly reacts. So if it's true,
a list view is being displayed and
102
00:13:23,808 --> 00:13:32,628
otherwhise a progressindicator is being
shown. OK, but well, that's something we
103
00:13:32,628 --> 00:13:38,840
could still implement in a stateless
widget, but there's another big difference
104
00:13:38,840 --> 00:13:45,406
here. We have something which changes
something as soon as something happens.
105
00:13:45,406 --> 00:13:52,125
Well make some things. It's an expansion
tile, so a list tile which can be
106
00:13:52,125 --> 00:13:58,885
expanded. It's a builtin widget of
Flutter. And as soon as it is being
107
00:13:58,885 --> 00:14:05,384
opened, it's... a local method is
triggered: Here we have this loadScore
108
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,
109
00:14:13,386 --> 00:14:19,758
it will load some data from wheresoever
and it will change this variable. So
110
00:14:19,758 --> 00:14:27,578
afterwards, after this method is being
triggered, the test data here will be
111
00:14:27,578 --> 00:14:32,920
something different. It will no longer show
the progress, but it will show this inside
112
00:14:32,920 --> 00:14:39,250
a single widget without any communication,
without any external stuff, without any
113
00:14:39,250 --> 00:14:47,490
JavaScript, getElementById or something
like that. The widget simply decides on
114
00:14:47,490 --> 00:14:58,348
its own behavior. That's very comfortable,
believe me. OK, now we already talked a
115
00:14:58,348 --> 00:15:05,280
bit on JavaScript, it's somehow different.
Well, Flutter is often being compared to
116
00:15:05,280 --> 00:15:13,205
JavaScript using React native and
Electron. So what's the difference?
117
00:15:13,205 --> 00:15:15,611
Well, let's first look on
118
00:15:15,611 --> 00:15:24,035
JavaScript. You write an application in
JavaScript, you actually have JavaScript
119
00:15:24,035 --> 00:15:29,870
and JavaScript is a Web language. Hence,
you need a web view or something similar
120
00:15:29,870 --> 00:15:39,513
to render anything of your app. That means
it consumes an immense amount of memory
121
00:15:39,513 --> 00:15:46,083
and CPU power because, well, if you ever
used chromium or Firefox on the low-end
122
00:15:46,083 --> 00:15:53,837
device, you know that JavaScript can be,
well, quite painful. Well, there are
123
00:15:53,837 --> 00:15:59,990
highend mobile devices. But if you develop
an app, you should always keep in mind
124
00:15:59,990 --> 00:16:05,552
that there are mobile devices with much
less power and less than two gigabyte of
125
00:16:05,552 --> 00:16:17,350
RAM. OK. And if you have Flutter in
opposite, you create a native app and you
126
00:16:17,350 --> 00:16:24,047
have native code which is being executed
beside the Dart virtual machine with
127
00:16:24,047 --> 00:16:30,044
almost the same look and feel, you know,
from your platform. If you have JavaScript
128
00:16:30,044 --> 00:16:35,784
and opposite, you usually have a fancy
design you made, which is actually good
129
00:16:35,784 --> 00:16:41,005
for web development. But it's usually not
exactly the design packed from a mobile
130
00:16:41,005 --> 00:16:46,401
device. There are very strict guidelines.
If you ask Apple or if you ever published
131
00:16:46,401 --> 00:16:52,217
an app to the App Store, you know, there
are very strict guidelines at Apple. And
132
00:16:52,217 --> 00:16:58,365
at Google there are guidelines as well,
but they're not that strict. But if you
133
00:16:58,365 --> 00:17:04,236
use Flutter, you automatically obey
these guidelines and produce apps with a
134
00:17:04,236 --> 00:17:12,298
native look and feel. And another
advantage of Flutter, it's more an
135
00:17:12,298 --> 00:17:19,394
advantage in comparison to native native
apps, you have the same data and the same
136
00:17:19,394 --> 00:17:27,807
code on the same on all your platforms.
Yeah, because if you write native
137
00:17:27,807 --> 00:17:30,257
applications, well, you have two code
bases and the applications behaves
138
00:17:30,257 --> 00:17:34,634
differently on all platforms. And if you
have Flutter, you have one code base for
139
00:17:34,634 --> 00:17:39,378
all your platforms and obviously it
behaves the same way on all platforms.
140
00:17:39,378 --> 00:17:47,510
That's much easier for your users if she
should ever change their device. Yeah, and
141
00:17:47,510 --> 00:17:54,274
the major point I already mentioned at the
first point, there is almost no loss of
142
00:17:54,274 --> 00:18:03,537
performance. Yeah. So Flutter is actually
a very good framework for creating apps for
143
00:18:03,537 --> 00:18:12,442
Android, IOS, desktops such as Windows,
Mac OS or Linux, Free BSD is unfortunately
144
00:18:12,442 --> 00:18:23,350
not supported - or even webpages. OK.
Yeah. And at that point, I want to thank
145
00:18:23,350 --> 00:18:31,176
you for your the attention of this talk.
Feel free to attend my next talk on
146
00:18:31,176 --> 00:18:36,400
Flutter. Tomorrow I will give an advanced
view on cross-platform development using
147
00:18:36,400 --> 00:18:43,085
Flutter. We will focus on animations and
the way Flutter works under the hood. Now
148
00:18:43,085 --> 00:18:54,115
there should be an online Q&A. Thank you
for your attention!
149
00:18:59,525 --> 00:19:04,720
Herald: Hello, this was the lecture by the
one with the braid about Flutter and we
150
00:19:04,720 --> 00:19:10,880
are now switching to a small Q&A session
here. There has been exactly one question
151
00:19:10,880 --> 00:19:19,280
in the IRC. You can ask questions by the
hashtag rC3Wikipaka and in the rC3Wikipaka
152
00:19:19,280 --> 00:19:23,840
IRC channel on hackint. There's been one
question, which is: What is the main
153
00:19:23,840 --> 00:19:29,520
feature of Flutter, which lets me decide
for it instead of, for example, react
154
00:19:29,520 --> 00:19:34,860
native? Could you answer that question?
155
00:19:34,860 --> 00:20:01,440
(incomprehensible)
156
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
157
00:20:06,480 --> 00:20:14,592
you via ninja, only via our backchannel.
158
00:20:14,592 --> 00:20:24,612
(incomprehensible)
159
00:20:24,612 --> 00:20:27,622
Herald: And now they're gone.
160
00:20:27,622 --> 00:20:28,114
The one with the braid: Can you hear me
again?
161
00:20:28,114 --> 00:20:29,094
Herald: Here we are again.
162
00:20:29,094 --> 00:20:32,589
Herald: Yeah, we can hear you now.
The one with the braid: OK, perfect.
163
00:20:32,589 --> 00:20:37,869
Well, the question was, what could
convince someone to use Flutter? I would
164
00:20:37,869 --> 00:20:44,265
say the main advantage, the principal
advantage of Flutter is the performance
165
00:20:44,265 --> 00:20:51,321
and the native-like applications you get.
If you use Flutter, you get native design
166
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
167
00:20:57,106 --> 00:21:05,194
main difference to JavaScript, for
example. So you act native.
168
00:21:05,194 --> 00:21:08,914
Herald: Would you consider yourself to be
a flutter fan or aficionado?
169
00:21:08,914 --> 00:21:12,880
The one with the braid: Oh, yeah, I'm a
huge fan of Flutter.
170
00:21:12,880 --> 00:21:17,600
Herald: OK, we can tell that. You do have
other talks about Flutter in the coming
171
00:21:17,600 --> 00:21:21,200
days, don't you?
The one with the braid: Yes, tomorrow at
172
00:21:22,400 --> 00:21:29,360
12 o'clock, there is a second talk on
Flutter - advanced cross-platform
173
00:21:29,360 --> 00:21:35,680
development using Flutter. We will focus
on Animations and on the way the engine,
174
00:21:36,400 --> 00:21:43,120
so the underlying engine of Flutter works.
Herald: Alright, there's been another
175
00:21:43,120 --> 00:21:47,760
question in the meantime here, again by
hanswurst10. React native also gives you
176
00:21:47,760 --> 00:21:50,400
native components and design, etc. Isn't
that true?
177
00:21:50,400 --> 00:21:54,960
The one with the braid: Yeah, it's true.
But well, I would call the Flutter
178
00:21:54,960 --> 00:22:01,600
components more native. They are built 100
percent according to the style-guidelines
179
00:22:02,160 --> 00:22:09,280
of the operating systems. If you use
Material patterns, they are 100 percent
180
00:22:10,320 --> 00:22:17,200
Material. So as you know them from your
Android phone, for example. And I noticed
181
00:22:17,200 --> 00:22:23,360
in react native, you sometimes have
issues... not issues, but some components
182
00:22:23,360 --> 00:22:31,200
do not properly look exactly the way they
should look, and they often do not look
183
00:22:31,200 --> 00:22:38,480
the way the users expect them to look.
Herald: Alright, thanks for the answers to
184
00:22:38,480 --> 00:22:43,040
the questions, there have been some more
detailed questions as a follow up on the
185
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
186
00:22:50,320 --> 00:22:54,400
BigBlueButton session, where you can go
into more detail exchange. The one with
187
00:22:54,400 --> 00:22:58,480
the braid, thank you so much for your
input. This has been the first broadcast
188
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
189
00:23:04,160 --> 00:23:09,440
and continue our program at Sixteen
Hundred Central European Time. Thank you.
190
00:23:09,440 --> 00:23:13,850
The one with the braid: OK, see you.
Herald: Bye bye.
191
00:23:13,850 --> 00:23:17,932
wikipaka outro music
192
00:23:17,932 --> 00:23:24,000
Subtitles created by c3subtitles.de
in the year 2021. Join, and help us!