Lieber Zuschauer, dieser Untertitel wurde automatisch generiert von Trint und dementsprechend (sehr) fehlerhaft. Wenn du kannst, hilf uns bitte gute Untertitel zu erstellen: https://c3subtitles.de/talk/1739 Danke!
[Music]
good morning
and welcome to my second talk on flutter
my name is the one with the braid and in
today's talk
i will focus on animations
and on the rendering of flutter's
graphics library and background
okay let's begin
um yeah i will talk on about motion
uh motion is part of user experience so
it's not only a technical talk
but also a talk on kind of
how motion and how app design affects
the user
yeah and that's that that already points
to the
first question why do we need animation
um there are different reasons sometimes
we want to emphasize
something in regard of hierarchy
the moment i will slow down the
animation
yeah here you can see uh
this pop-up this card which are this
list tile which
expands uh and the box
being created from this list style shows
that the list tile actually contains
uh whatever is shown afterwards um
this is a kind of hierarchy shown by
um by the animation
uh another common use case is indication
of status
um here you see a kind of progress
indicator
these list tiles glowing
uh and later these um messages or
whatever
appearing uh that indicates status of an
application it
uh indicates uh for the user that
it's not ready yet uh that they should
wait until it's
uh everything is loaded and so on
okay a third part is feedback uh here
you can
see a card being dragged around
and other cards um correspondingly
moving
that shows the users that
their actions are successful that
whatever they
perform uh is a valid action in the app
and the last well yeah another
point of animation uh is user education
you see
as when you tap the lock screen it does
not work
if you swipe up it works and this
animation this
bouncing at the bottom indicates that
the user should try to
uh swipe upward to unlock
okay um let's talk about flutter and
animation all these animations are
possible and flatter the question is
only
how and
the flat documentation has a well
quite filled uh overview
of animations and flatter and i will try
to break it down
um yeah that's the
guide on how to use animations uh
provided by flutter
um even if we zoom in it is not
that helpful um
let's go through these animations step
by step
um first of all we have implicit
animation uh an implicit animation is
a quite tiny but uh
useful animation uh it consists of
three parts a value which is being
animated that may be an
integer i don't know a color size
um whatever um a duration
so the amount of time the animation
takes
and a curve in which the animation is
being performed
um i found a nice graphic showing
these curves but first of all well they
are simple they are easy to implement
and do not require any advanced uh
knowledge of flattering or
any mathematics um here you can see a
couple of chords
provided in flattery of course you could
create your
uh codes on your own as well um
you have ease a curve so um
this and accelerating course um
you have exponential acceleration at the
acceleration
um you have bouncing animations you have
in out easing and elastic animation so
you have pretty much
everything you can imagine off uh they
are built
in and accessible via curve dot
and name of the curve okay
an example of an implicit animation is
an animated container
an animated container is a widget um
which simply animates all the values it
is being given
um in the code sample
i i'm unsure whether you can see my
mouse here
at least you should be able to see the
selection
[Music]
you see it checks whether this selected
value is
or this boolean is false or true
and correspondingly sets the size
and the color of the container
it's being given a duration
two seconds and a curve
uh yeah and afterwards it just contains
a child widget um
and as soon as the containing widget
should change
the selected uh boolean and should
trigger a rebuild of this
stateless stateful widget um
then all these values here the alignment
um the color the height the width
and they are all being animated using
this curve and the duration
it's a very simple animation but is
useful in many cases
yeah another kind of implicit animation
is a so-called uh
tween builder um
on builders and animation builders we
will talk later
um but here a quick introduction the
tween builder consists of a tree
uh so uh yeah a scalar
here in the amount of values in which
the animation takes place iteration uh
at the builder um a builder
which is given the value of the tween
um yeah and
based on the value it can change itself
in this case we have the angle set to
the tween
and as soon as the tween changes so
every every frame
this is rebuild using the new angle
um that's another easy way of animation
in flutter
okay a more complex example
is the explicit animation um
of course you know motion from
reality everything we can see consists
of
thousands of frames uh human iron
is able to realize uh 30 or
even more frames per second but
modern devices feature 60 or
120 frames per second and high-end
devices
even more and the explicit animation
allows painting every single frame
the the application renders
yeah you can with an explicit animation
you can set any single of these
frames um yeah it's
used for complex animations for which no
built-in uh um widgets are available
um and have if they're not correctly
implemented
they have a high performance impact so
use with caution yeah
what's the recipe for an explicit
animation
um you take a widget
a stateful widget you mix in
a single ticker provider state mix in
uh use an animation controller sync it
to the
single ticker provider uh add a listener
and
on every listener of the controller you
set the state
uh so pretty much as soon as the state
is set you set a new state
um and that's yeah i'll provide an
example um
yeah here you have um
create a widget state uh with this uh
single ticker provider state mix in uh
we have an animation controller
um and we put the vsync
on our single ticker provider mix in
um as we listen to updates of the
the animation controller so uh it's on
high-end devices it's
120 times per second um
and in this update method
we set the state and simply rebuild the
widget
and then we can do whatever we want we
want with uh the value we animate
um yeah
please pay attention on disposal
the animation controller exists
as long as it is not or until it is
deposed
um means as soon as you remove the
widget from screen
or if you move to another page of your
application
the animation controller would actually
uh continue
to animate itself um
so you explicitly have to dispose it
yeah and here are editor i provide an
example where
it's simply forwarding uh infinitely
okay that's the very low level uh
animation um but that's
actually under the hood how all the
animations built in and flutter work
um the animation builder and all the
the different animation builders make
use of this
um animation spill and animation
builders are widgets
which provide uh exactly what we
were just talking on in explicit
animations
that's what they provide under the hood
um
and provide a builder with uh
the current value of the animation
controller
uh that's much easier to use and uh yeah
why should you use an explicit animation
if you can use
an animated builder okay
let's have a look at one um for example
here
we have an animation controller uh
consisting for
10 seconds repeating infinitely um
and based on the value of the animation
controller which is part of our widget
um
we have an animation builder which is
building based on the value of our
current
of our animation controller in our case
we simply rotate
a box whatever it may be
um yeah
that was quite uh hard and in most cases
you do not
need to use these uh difficult
animations
uh well difficult um usually
simple animations like hero animation
are sufficient
um what is a hero animation a hero
animation
is an anime there is a widget
you can place around any other widget
for example if we have an image we place
an error around it
give it a certain tag uh a attack can be
any object so it could be a string could
be an integer
it could be a witcher that could be
whatever um
if we place a hero around a widget
perform a page route so we move to
another page in our
uh application um and use
the same hero again so a hero
with the same tag and any child should
be a similarly
looking child um then it
yeah the hero simply moves from its
first location to its second location
um zooms to the corresponding um
location and yeah that's very useful for
simple
animations you know it from floating
action buttons for example
or from any image gallery you know if
you tap an
image it zooms in and it's not such an
animation you think
you would never fade an image from the
bottom to the top as a
normal pace page transition um
you simply zoom in the image if you
would surround an image within hero and
move to another page
containing the same image um yeah it's
used for simple animations and it's
very very easy to implement
now here i found the graphic uh
explaining how a
hero works we have our source hero
a big image for example um
in the middle of the screen um and
during the page route
and fledgy detects okay the hearer
appears
again uh in our destination it's at
the top on the left side
uh and hands the hero will zoom in
and move its position to the destination
position yeah
that's uh simply how you would uh
implement a hero
um we have for example
a container containing something put in
here
inside on another page we move to
we implement a card or whatever
containing the same hero tag and then
the contents of the hero will fade
to um the destination
uh hero please pay attention
not to use the same hero attack on two
heroes and on a page otherwise you will
run into trouble because flutter won't
be able to decide
which hero to move on um you know this
if you
put several floating action buttons on
one screen
you run into trouble because flutter
tries to
animate to both floating action button
and buttons and will cause errors
okay that was uh the easy-peasy part
um but let's talk about more complex
transitions and for these complex
transitions
flatter provides an animations package
it's not a part of the flat
framework because well it's not an
everyday use case that's why it was
moved to an
external package but it's an original
package from flutter.dev um
yeah the animations package contains
pre-built
animations um for common
cases um i'll go through these
cases here and it's used for ui
transitions so complex transitions
um and it's comparatively easy to
implement
okay here we have the so-called
container transformed
you can see several containers which are
expanding in some way
for example here the floating action
button which
is being transformed into a card or a
page uh
creating uh whatever
um or here we have a card expanding and
showing
more detail um that's a common use case
for
container transforms yeah beside
aside yeah yeah i provide a code example
um it's actually quite easy to implement
a
container transition it's called uh open
container and the animation
package um yeah you have a builder
for the closed state and for the open
state um and as soon as it
it's being tapped it will simply um
render the transition from the original
well it will expand first of all to a
full page
container and build the uh destination
content
uh and in the close as soon as you tap
back
um it builds the closed
state again
yeah another common use case is
an axis transition um
you know from log in screens or um
coding guides you know i don't know
whether you
know google's code labs or so on they
provide an
access at the uh at one of their
accesses uh which you have this the
second picture here
um numbers of steps um
and you have pretty animate or with
flatter you can
code pretty animations on these axises
um here there are
two types of these access transitions um
there are shared access page transition
builder
well ugly word the shared access page
transition builder is a page transition
so you simply provide two pages
in your flatter application and
the animations package uh with this
shared access transition
builder will take care of the transition
between
those two pages so it's actually uh you
know material page route
and that's another kind of kind of a
page transition
and the other one is a widget a simple
widget
um containing several um
other widgets um in which yeah
through which an uh one of these axis
transitions
is being performed an axis transition
can take place on
uh the x the epsilon and
uh the z
axis um yeah
for example here that's
here you have actually all the uh
different axises here here
horizontal here vertical and here uh
through
the set axis
okay um another very commonly
used um animation
is an animated icon um animated icons
and flatter are pre-built
animations for icons
yeah for example a play button
in a music player which
translates into a pulse button
here it's very very easy to implement
um and emphasizes the user
what uh their actions
affected yeah
here are some examples um
different icons and how they could
behave when you tap them
um common use cases but there are
more complex examples as well
um how to do it well it's
easy peasy um just use animated icon
uh as i can you provide an animated icon
source um yeah look at the api docs
which are available
uh but it could be used for example for
a drawer
to um show a back button
as soon as the draw is opened or so on
or whatever
yeah and now the question well i set
flatter renders with
up to 120 frames per second
and in every single frame
you can render the whole widget again
how does it [ __ ] work um
yeah let's have a look at the engine
especially at the rendering of
the flutter engine yeah
first of all we will look at how flutter
works
under the hood okay we have our widgets
we have animation that's what we just
talked about
we have witches of different kinds we
have gisters we have
painting maybe you already used a custom
paint
um yeah and that's all the framework
flutter
it's written in dart but now the
question is well
we know dart has a set state and on set
state
something happens but what happens
uh and that's what the engine does
under uh the hood uh the engine
is written in c plus plus and provides
uh
yeah all the apis for skia the rendering
library
dart and all the text stuff like
accessibility
um right to left left to right um
and so on um yeah
let's have a look on how an animation
works
in flutter um we have
a gpu which provides a v-sync
with used to
sync the animation to the rendering of
the application otherwise if we would
not
do this well we simply could not uh but
what it
would mean is that the
animation would not be synced to the
updates of the user interface would be a
mess
i don't know you know it for example if
you
uh film with 30 fps
a monitor with 25 fps you will see
some ugly rendering and some issues and
so on and that's
what would theoretically happen if uh
flutter would not require a v-sync
okay we animate we tick
animations um means we were talking
about this ticket provider it takes
every time
the gpu is rendering um
that causes our widget to rebuild the
parts which changed um afterwards the
engine
performs the layout it computes the
sizes of the widgets
and so on and and as soon as
everything is properly rendered uh it's
the frame is recorded
by skier and is painted
to our uh canvas
yeah and that's an important it's not
really about animations but a point to
be mentioned
um that's what the major difference
between
stateless and stateful widgets is um
stateless widget has a constructor and
is being
will uh build but
it does not matter in which build
context
and the state full widget in opposite
creates is its state
for each new build uh context
uh but it does not rebuild the whole
widget
so even if our parenting widget changed
uh if we provide the same state full
widget
in our change parenting widget uh it
would
still uh yeah uh
it would still have its state and would
not be
rebuild from scratch
okay what does it mean um if we have our
state
um we first initialize
our state that's uh yeah
that's where you for example the
animations uh that's where you would
uh declare the animations controller um
and after words uh the first
build is being triggered um
and for example if nothing happens um
as soon as um our parenting richards
decides no longer to show our
widget our widget is being deposed
but a state full widget is able or
state is able to set its own state
to trigger a rebuild or if the parenting
widget
change it is being rebuilt as well but
it's not being re-initialized it's only
being rebuilt
and that's the major difference and
by these by this entanglement of
so many widgets stateful and stateless
um
on one rendering of our graphics library
of enron
uh during one of these 120
frames per second uh only these
tiny parts of the applications which
really changed
only they are being rebuilt and that's
why flatter has
such an incredible performance on
animations and layout
and works even on low level devices with
up to 120 frames per seconds
yeah at that point i would like to stop
this
talk um i hope i could give you a good
impression
on animations in flutter and how
rendering of the engine works in flutter
um and i would now like you to enjoy the
q and a and the rest of the the remote
chaos experience
thank you thank you very much for the
session about flutter
the thing is one question i had is that
flutter was developed by google
so not everybody likes google so what
what would you say to people who
are wary because of that uh
me neither i actually avoid anything
from google um but flutter is
open source uh and so
i see no issues in using flutter
especially because it's
powered by a great community there's no
requirement for any proprietary
service and uh so i see no issues in
there you can
uh include an uh dependencies from any
um package server for dart you want
so yeah it's actually quite useful it's
a bsd 3
clause license so it is
uh as free as we can expect it
thank you very much once again whoever
is watching us and has a question now
now would be
the best moment to put your question
into the irc or on twitter or mastodon
so we can read it and answer it now
um so until these questions maybe
another one rolls in
can you give us a few examples ah we
have a new question but
i have other another question first
sorry um
so give us a few examples what you have
built in the in the last
month with flutter because i know you've
been developing with slatter for some
time now
uh yeah uh currently i'm uh working on
an application called sarno plus plus
it's uh the
it's a mobile port of uh the
uh known note-taking software xornal um
um which uh i'm currently importing to
uh to android and ios uh together with
the original
maintainers of the linux and windows uh
application
oh that sounds interesting thank you
very much so we now head over to one
question
linmop on irc has a question i'll read
it off
what's the progress of the port of
flutter to arm linux
for devices for example like the pine
phone do you know about that
um i recently read on github about
um this uh there is work in progress
um i think the flutter tool uh
is now capable to run on uh linux
for arm but um it's not possible yet to
build uh release uh yeah to
build release mode applications uh on
neither on arm not nor forearm
but they are working on it
okay so we don't know at the time being
when this is going to be
done okay thank you very much um how can
people
um learn more about that or can stay in
contact with you if they want and if you
have questions afterwards maybe
uh i'm available here in wikipaka wiki
uh or um here uh
i guess there's a q a session in big
blue button later
on which you can contact me and
otherwise uh just search for
the one with the bright in the internet
uh you will find
possibilities to come contact me
so i'll post the link to uh to
further q a in the in the rsc if anybody
wants to use that thank you for the
question linhop
thank you for your talk uh the one with
the braid i think we don't have another
question
at the moment right now but um we
recorded this for posterity so
if anybody sees this later they will
contact you i guess
thank you so much for your contribution
and see you again in the program
tomorrow
yeah goodbye see you tomorrow
you