#rC3 - Flutter - Introduction into performant cross-platform development

wikipaka intro music

Hello and welcome to this first talk.
Today I'm going to give... into cross

platform development using Flutter. What
is Flutter? Flutter is a cross platform

development kit. Here. Fancy logo you can
see over there. OK, we will talk about how

to install Flutter. We will talk about the
special features of Flutter, hence,

widgets, which will have a look on their
plugins. We will have a look on two

different kinds of these widgets, stateful
and stateless widgets. And at the end, we

will talk about the main feature,
Flutter's part of the code, so you do not

have seperate style files or seperate
layout files. OK, how would you install

Flutter? Well, if you are used to Git,
it's actually quite easy. You simply clone

their git repository, update the path and
you have the flutter tool installed. That

installs two things: The library Flutter
and the programming language Dart, Dart the

programing language you use with Flutter.
Of course you could use Dart without

Flutter, but Dart is usually used with
Flutter and Flutter only works with Dart.

OK. Well, if you are not interested in
cloning git repositories, if you are not

that used to command prompts, you could
easily install Flutter using the plugin of

your development environment. For example,
Visual Studio Code or Android studio so

intellij, they offer very user friendly
plugins with a quick installation guide

for Flutter, automating all these
steps. OK, what is Flutter like? If we

have a look on Flutter, we talk about
different things. We have the framework

within Dart, we have the engine and we
have platform specific code. Flutter

consists of something called the "Flutter
tool". That's not listed in the graphic

you can see there. That's what you use to
create an application. For example, if you

type "flutter create mynewapplication" in
the command prompt, that's the Flutter

tool you use. But as soon as you've done an
application, you have this... it works the

way the graphic presents it: You have this
framework consisting of everything you can

see and everything you can do. You have
buttons, for example "Material" buttons,

these are the two main theme styles, so

"Material" is the Android and Chrome OS
one and "Cupertino" is the iOS-style user

interface. The framework takes also care
of the rendering animations, interactions

with users. So gestures, if you tap a
button or if you move around something on

the UI, that's something the framework
takes care of. And under the framework,

there's the engine. The engine operates
everything which is not specific to your

application, so the general stuff of
Flutter. It takes care of the interaction

with the Dart virtual machine. It takes
care of platform channels. For example, if

you want to access native code, takes care
of accessibility, it interacts with the

operating system and so on. And beside of
those two, there's still the embedder. The

embedder is, what is, yeah, typic for one
kind of device, for example, or for one

platform, for example, for Android. The
embedder takes care of threads of process

management, takes care of the event loop
of the operating system, and it takes care

of interaction with native plugins. And
most importantly, it's responsible for

packing the application. For example, if
you have raw Dart code, no device would be

able to execute it. So the embedder is
responsible for hacking this code into an

executable on Windows, into a JavaScript
file on the Web or into an APK file on

Android. OK, well, now I already
introduced these widgets, I talked about

Material and Cupertino widgets, but what
is a widget? Yeah, a widget is pretty much

everything you can see in a flutter app. A
widget is any user interface element,

sometimes allowing interaction, sometimes
not. But everything you can see in an

application is called widget. You can
imagine a widget like, for example, HTML

elements. You simply put them into each
other and create a document tree. But

unlike if you use HTML, you do not have
HTML for the layout, CSS for the style and

JavaScript for the interaction. If you
have Flutter, these widgets provide all

these three parts. So the widget performs
the layout, the widget offers style and

offers interaction with the user. Hence you
do not have any separation between style

and content of the application. That's a
very good feature for development and

makes many things such as refactoring
code. But there are different types of

Stateless widgets without any kind of
feedback they can provide. They are once

rendered and afterwards they are present.
Or if the parenting widget decides, well,

I no longer want to show this, for
example, text, that is just being removed

without any interaction of this widget.
Another point are stateful widgets, they

allow interaction. So for example, if you
have a text as a stateful widget, it can

tell - it is able to tell the application
after a couple of seconds: OK, now I want

to change my own color or I want to change
my font size, so it has an own event loop

and can decide based on things happening
inside this widget. That's usually a bit,

yeah... not these low level widgets like
text, but all these high level widgets

like list views consisting of several
children and so on, menus, they consist of

a menu button and drop down menu and
whatever, or even the whole page of an

application. All these are widgets,
stateful widgets. OK, time to provide some

code samples. That was a bit of
introduction into the architecture. Let's

have a look on code. Well,
congratulations. That's a simple Flutter

program. If you write it and you provide a
declaration of homepage, you should be

able to run an application on your mobile
phone. Yeah. What does it? It executes the

main function, calling a method call,
calling a function called runApp, which

runs a Material app. So following the
Material design you know from Android or

Chrome OS. OK, but of course, we need to
implement homepage. Well, let's have a

look at a bit more difficult widget.

silence

...tell the widget everything it needs to
know for building, in our case, we simply

return a list type, consisting of an icon
and an outline button. The outline button

can do anything. It can share a text. So you
would see your share prompt on your mobile

phone or on the web it would download the
text. OK. But why is it stateless and not

stateful? Simply because it cannot
interact with itself, the widget is unable

to change one of its variables, the widget
cannot set a timer, it simply could not...

if you would tell the widget, well, wait
five seconds and do whatever, it would not

change the appearance of the widget,
because it is once built and afterwards,

it has no more... it no longer has the
ability to change its appearance or

behavior. Only the parenting widget - so,
for example, the list we put this

scoredetail inside - it could trigger a
rebuild of this widget, but not the widget

itself. To clarify this point, we'll have
a look at a stateful widget. It is a bit

shorter, because the stateful widget
consists of two classes, state class,

that's what you can see over there. And,
well, the actual declaration that it is a

widget. But the state is much more
interesting if we look at it. OK, you

first see there are... we first
initialized some variables. Afterwards, we

have a method called initState. That's
something which is being triggered the

first time the widget is built, afterwards
we declare another method. And at

the end we have our build-method. Yeah,
what does or what's the difference from

this build-method to the build-method we
had in our stateless widget... I hope you

can see my pointer, yeah. We have here, we
have an if statement here, a short if

statement. So the build method checks
whether a variable called testLoaded -

that's being declared at the top here -
whether it is false or true. And it

correspondingly reacts. So if it's true,
a list view is being displayed and

otherwhise a progressindicator is being
shown. OK, but well, that's something we

could still implement in a stateless
widget, but there's another big difference

here. We have something which changes
something as soon as something happens.

Well make some things. It's an expansion
tile, so a list tile which can be

expanded. It's a builtin widget of
Flutter. And as soon as it is being

opened, it's... a local method is
triggered: Here we have this loadScore

method and that is being triggered. We do
not know what it does, but I can tell you,

it will load some data from wheresoever
and it will change this variable. So

afterwards, after this method is being
triggered, the test data here will be

something different. It will no longer show
the progress, but it will show this inside

a single widget without any communication,
without any external stuff, without any

JavaScript, getElementById or something
like that. The widget simply decides on

its own behavior. That's very comfortable,
believe me. OK, now we already talked a

bit on JavaScript, it's somehow different.
Well, Flutter is often being compared to

JavaScript using React native and
Electron. So what's the difference?

Well, let's first look on

JavaScript. You write an application in
JavaScript, you actually have JavaScript

and JavaScript is a Web language. Hence,
you need a web view or something similar

to render anything of your app. That means
it consumes an immense amount of memory

and CPU power because, well, if you ever
used chromium or Firefox on the low-end

device, you know that JavaScript can be,
well, quite painful. Well, there are

highend mobile devices. But if you develop
an app, you should always keep in mind

that there are mobile devices with much
less power and less than two gigabyte of

RAM. OK. And if you have Flutter in
opposite, you create a native app and you

have native code which is being executed
beside the Dart virtual machine with

almost the same look and feel, you know,
from your platform. If you have JavaScript

and opposite, you usually have a fancy
design you made, which is actually good

for web development. But it's usually not
exactly the design packed from a mobile

device. There are very strict guidelines.
If you ask Apple or if you ever published

an app to the App Store, you know, there
are very strict guidelines at Apple. And

at Google there are guidelines as well,
but they're not that strict. But if you

use Flutter, you automatically obey
these guidelines and produce apps with a

native look and feel. And another
advantage of Flutter, it's more an

advantage in comparison to native native
apps, you have the same data and the same

code on the same on all your platforms.
Yeah, because if you write native

applications, well, you have two code
bases and the applications behaves

differently on all platforms. And if you
have Flutter, you have one code base for

all your platforms and obviously it
behaves the same way on all platforms.

That's much easier for your users if she
should ever change their device. Yeah, and

the major point I already mentioned at the
first point, there is almost no loss of

performance. Yeah. So Flutter is actually
a very good framework for creating apps for

Android, IOS, desktops such as Windows,
Mac OS or Linux, Free BSD is unfortunately

not supported - or even webpages. OK.
Yeah. And at that point, I want to thank

you for your the attention of this talk.
Feel free to attend my next talk on

Flutter. Tomorrow I will give an advanced
view on cross-platform development using

Flutter. We will focus on animations and
the way Flutter works under the hood. Now

there should be an online Q&A. Thank you
for your attention!

Herald: Hello, this was the lecture by the
one with the braid about Flutter and we

are now switching to a small Q&A session
here. There has been exactly one question

in the IRC. You can ask questions by the
hashtag rC3Wikipaka and in the rC3Wikipaka

IRC channel on hackint. There's been one
question, which is: What is the main

feature of Flutter, which lets me decide
for it instead of, for example, react

native? Could you answer that question?

(incomprehensible)

Herald: The one with the braid, we've got
problems with your sound. We can't receive

you via ninja, only via our backchannel.

(incomprehensible)

Herald: And now they're gone.

The one with the braid: Can you hear me
again?

Herald: Here we are again.

Herald: Yeah, we can hear you now.
The one with the braid: OK, perfect.

Well, the question was, what could
convince someone to use Flutter? I would

say the main advantage, the principal
advantage of Flutter is the performance

and the native-like applications you get.
If you use Flutter, you get native design

of the operating system you run on and you
have no lack of performance. That's the

main difference to JavaScript, for
example. So you act native.

Herald: Would you consider yourself to be
a flutter fan or aficionado?

The one with the braid: Oh, yeah, I'm a
huge fan of Flutter.

Herald: OK, we can tell that. You do have
other talks about Flutter in the coming

days, don't you?
The one with the braid: Yes, tomorrow at

12 o'clock, there is a second talk on
Flutter - advanced cross-platform

development using Flutter. We will focus
on Animations and on the way the engine,

so the underlying engine of Flutter works.
Herald: Alright, there's been another

question in the meantime here, again by
hanswurst10. React native also gives you

native components and design, etc. Isn't
that true?

The one with the braid: Yeah, it's true.
But well, I would call the Flutter

components more native. They are built 100
percent according to the style-guidelines

of the operating systems. If you use
Material patterns, they are 100 percent

Material. So as you know them from your
Android phone, for example. And I noticed

in react native, you sometimes have
issues... not issues, but some components

do not properly look exactly the way they
should look, and they often do not look

the way the users expect them to look.
Herald: Alright, thanks for the answers to

the questions, there have been some more
detailed questions as a follow up on the

IRC, but I've posted in the IRC a link
where you can all join into for a little

BigBlueButton session, where you can go
into more detail exchange. The one with

the braid, thank you so much for your
input. This has been the first broadcast

of the day and of RC3, and we will
continue to follow up with a little break

and continue our program at Sixteen
Hundred Central European Time. Thank you.

The one with the braid: OK, see you.
Herald: Bye bye.

wikipaka outro music

Subtitles created by c3subtitles.de
in the year 2021. Join, and help us!