*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!