hello people how are you doing this
time I have a video about flora learning we will learn a little how to
use this widget that is born based on this question I was a little reviewing this
workflow in Spanish because I have already stopped answering questions in this English
hour. There are too many people who can respond and can support but in
Spanish the community is still not helping us much in flavor but
so sometimes I give it a review it is with Spanish fort I can help you
this time our constant friend from Planck makes us a question although
a question a little badly posed because it is not very striking animation in
flower and a question like that should be a little more descriptive of the
questions or at least the title so that a user who reviews the
entire flow can automatically review it in this case I always checked
all of them but this one, like this animation, gives me a bit of attention but it must have been
like how to animate the with your dragon 'sc roll to bag in flyer or how to
do this implementation and in the description you should also add a
bit of the code that you have tried and what you cannot do well there
exposed that you are putting how to do it but at least you should put
a bit a portion From the code of what you have tried then there are links an
image a video that is this and there is a map in the center a scroll or wasit and
when you upload a component that is the search origin destination of the
maps that it has then we will try to do that animation that I find
interesting let's get to know a little more about dragon sword shit
adding that animation that comes from above and voila I think this video is not going
to be very long so we go to the code part
few people are already on the screen of code and quickly, the first thing
we are going to do is clone that design. I have the video here. I 'm
going to see how it is and obviously I don't want to add googlemaps here so
I have an image with a constant c with a url an image that we are going to simulate
which is google maps I guess this is in the middle
we are going to then to start this would be we create the button there is also
a floating button there it is like a piccolo action batman
ok escaped I am going to bring the micro closer and this
white screen we need to see the simulator a bit I want to see if it is well
centered ok so I have a simulator I have video here and to start with the
machine it is an abarth it could be an adba we are going to test a shovel
is that this is going to disappear [ Music] so I am not going to use a so that it is
simply a bar and here it could be a stack children and what else do we do ok we
paint in the background the image can be a network image and I am going to put google
maps and more and we try that it comes out to paint
Nothing else above but I want it to be I 'm going to put a fit
the box fit cover covert
and ok then I put almost the entire screen so it can be a
position it can be a position in the field it
can be it can be but the button I'm going to i changed arle it might be a half
neck and a 0.3
ok so now we are going to position the floating action bat
up here it is a jump ting action bat that has a
chalet has a hawk has a menu if it is a medium no no
and what else do I wear an event
this was compress ok I don't know anything about the event aha I just tell him now that the
color is going to be this is the color of the icon this is the
color of the background holder is a what color is white
if it is only okay if I just go to change
the color of the iphone which is black, it is here now, we simply
position it a little more here I am going to put 20 and top 20
we are fine and I put a 6 and everyone is here yes ok well there is an effect because it does not have
night I think we're good and have the map now missing the dragon robot sit where would it go down at a station position
positions and Kroll dragon bolt if you are here is that you have this widget I put good
I wear field but the button is OK everything not
how everything will take care ro in this context the score context controls and the
control and what more value a
wing needs then I am going to put a container in a red container what properties does it
have expand soles plan in which is this troupe by default
initial child 6 by default of 0.5 says max side 6 which is 1.0 you can expand
everything and minimum 0.25 let's see let's record this ok
I can't scroll because expand if this den
if this trick respecting if it is for the center you just tell us an error in my simulator
I don't know Why because it is not a scroll then I am going to add a scroll here
because zero if I put a container here here a detour that is what we want to
do is a very list list builder
and these would be contexts and the index and here it would be like a
list distracts
and style and it is now and I suppose that this control we must pass relieved him by
controlling that I am getting the scroll dredging sit
ok 20 elements
and I need good to give it some value title text can be index index
and I think that It is enough ok now yes of course
it moves everything until one I am going to remove I am going to set a limit this is something
max will be 0.7 and the min the minimum I think it is okay I will do I am going to leave and re-
enter There is the maximum now and the minimum is
0.25 this is the maximum that 1.7 is also
made up to there it will not reach and the minimum I think that if it has a minimum
I also think that the minimum is fine, not 20 points
0.4 and this I believe that we are fine
there, the top part is simply missing and give a little detail here to this
view no [Music]
I suppose I can give it color, it is here I am going to put a white this container
is already there I can give you some rounded edges
this one has as an elevator elevation can be a material if I give it a
material elevation
10 [Music] I have to cover more with these 0.4
if not sorry 0.6 0.5 0.2 I need to cover more inside it is very
low is that what happens is that I am going to return what I go out I go back in and the
minimum is this is fine and the maximum is This I think the maximum should make
more even 0.8 a fertile place where to enter and it is already the maximum that is going to be covered
by the top part we are going to give a little life here because it will have a
border grade and its border reviews vertical top and I give it a radius edge
that receives this all received a fold its radii circular point is made
circular 20 and it is already we have the upper part they have a line also
goes to its much detail [Music]
although then Syriac a colon always
libertarian and here It would be good this could make it an expand I think
[Music] if we are going to try expanding and
it shouldn't stay up there, it's fine and then here it would go well I have a
column with a text that says me in English it is not in Spanish I
[Music] is courtesy here where are you going
where are you going and burnt
I'll focus I will align left for me I can already
give here one if a padding 15 father and I need more pajín for this
[Music] Styles has a living is an icon
from maps it seems to me and with icon map do not touch jon I think this time
what I location is not
what this is and when what I do not think that if not what she
if this occasion here what else has what we are the planet yes
since this country should not affect this liberal has a father by default so
I'm going to remove this I think it is ready also has a
country they contemplate and I'm going to remove it now I think I can give more
father here 20 may be already okay and here well it has addresses, no
address, but well, that is the same minimum with the
psuv tairo customization mesh but it is basic
citymix this we have the list we are going to see a
bit of spaces now here we have a textile also textile
has decoration input decoration that is coming fix graphics there contains an
icon the search I think it is in body color
by paul 300 has 300 there is like this [Music]
and what else has a division ok has a good vision
minimal details we go with the client
that these people to the new text but our ind irect that is to search the
destination and it is now where are you going to show it
where you are going [Music]
and I give it the color black and white and away pot it is
and font-size a 20 I copy the style above and change it
just by closing this this It is not bold the size can be a
13 it is not volt and the color is a gray haha for simply a space with 6
set boxes a 20
and we are one more space here 66 box 5 sets
already goes and here 20
already leaving more 25 because the design is also made in
a symbol in a device of in the other resolutions it does not look
bigger so enter here the scroll is fine and I even think I simply add it
here it is a witt 20
gray and tall container that It has
there are 12 it can be black
to this one from Oregon padín here pain can be there then he took away this 20 it
would be a 5 nothing more and they are simply I have to center
this as the center this has more line - here I am going to
put a line a center to this fine but I am missing a little more than
size 40 and a colo r gray and this we have done something similar I think
a gray 300 yes I think we have something similar to the original design now at the
top [Music]
although we are going to draw that box that I can create in another widget style is and I
put that I put
search destination it can only be
first station and this is a cord if it is a colon that has a shadow also
I think so so it can be a first material
[Music] lb I put a 10 side and an elbow
I want to see If I am recording if it is being seen there Colom and what else would it be a robbery here
children that would be a like with batman good it is a bad bad
mcgrath choose destination peek destination
destination destination I am going to copy the source here I am
this stadium what else can we do Error is missing I create a
parenthesis ok estimation and we are going to go testing I am going to put
this widget here this as I see that this happens in the shadow then I think that
I am going to put it at the last of the stack so that it replaces it then here to the
last lord d estination and recorded and covered everything ok I am going to put
a minimum maxi size and we will also have some size because it
can be a positions [Music]
position 0-0 there are 100 and nothing else
ok is remaining in their station that most lacks those dots we do not do I think
that I think that those dots that is not so simple but I am going to leave it for we are going to
comment on the animation I put the two textiles and you have to give
2 stations and it would be here a text and I am going to copy my
textile where you are textile that these [Music] and I could run John has nothing for the
ics but yes we have I am going to put this one he has come he
has come 2024 number two intentional and this one that has
where we are going uruguay I am going recorded and although it is fine as it is going to
slow down here it may be here I am going to make 18 columns
[Music] and here I give it a father it
may be 15 up it is giving it a lot I am going to put only the sides
horizontally symmetrical more I think then it could be a 25 that
's it and we are going to correct that then if I do not give height and it is enough
with that I know how much to stretch [Music]
now I can give the textile an electro color I think it is 200 it could be
there is more or less ready now if only a final space
and it ends colom here with saiz el box height
One day it can be and it is ready for yes we are almost there I need you to push more
because it covers it up here I can put search for a destination
and it has a little step and also and when it goes up all this good
will appear other elements but not but I think that We are not going to do it but
only the transition from above to voltage to below and I think that below
we could also add this selection on the map that we say then
to see that this should then go up more
where we going should go back ok
then what then we do We are going to give it a little more percentage
because 0 0.9 I go out I go back in and there it is, it is perfect only that there is no longer the
destination balance, we can make it hide as well and that these elements appear s
to glimpse there are two buttons then as a column with two buttons that
appear and disappear sertecing nation because then and we are going to see now the
part of animations ok then the first thing we have to
do to be able to play with the animations is to obtain the position or the
scroll is the one that is doing the dredging of scrolls or bots and then what we
do is wrap this in a widget that is notification distender and we
specify what type of lysander we want to hear
what type of notification forgive the drivers with the scroll widget has a
drag avilés crowd notification then we use the notification method notification
this is because the name and this brings us a notification driver
simply to another monster and we already have the value that if we paint in notification
point extend it gives us the offset value we are going
to test it now and come on it goes from 0.9 maximum to 0.4 which are
the limits that we have set what we have to do is transform that
value to a time value q Let it be between 0 and 1 to be able to use it to move the
widget so for that we can use a formula
for example if we assume that the time
we are going to describe it here quickly the time and the time that is equal to x and the
0.9 is equivalent to 1 which is the value maximum ok then we do an operation that
would be the time minus 0.4 which is the minimum value will be equal to x minus 0
and below it would have to be something like this this should be better on paper and pencil
and here it would be 0.9 which is the max value
0.9 is the maximum value minus 0.4 which is the minimum value I am not, this would go
to the center then the maximum value is 1 and 0 the value that I expect then by
moving that formula we would have so that s tm 0.4 equal to x and here good
this and over 0.5 that the subtraction of 0.9 0.4 and
this would give us 1 a result that would be x equal x equal
2t 2 0.8 which is the formula that we
could apply at the end we replace all this with this we are going to declare
a variable by cient and we use this but instead of t would be the extend
notification extend we multiply and this we are going to paint the percent to
verify that he is voting for correct values from 0 to 1 that he recorded and
we prove that one is when it reaches the maximum and 0.0 when the minimum reaches
then it is fine we already have This value that is super important now what we
have to do is I want to see if I am recording I am recording I
am recording if I am recording we are going to convert
this widget to stateful first because we need to do a refresh we can
also do it with valinotti fire but we must most simple now dabul
present equals 0.0 starts below and
here I am going to do then a 7 am I am going to cut this and delete 7 state and this
percent equals this operation that we did we already have the value so
I already have 0 1 all I have to do is tell the top widget that it would have to move based on the
I will see I will have values from 0 to 1 but I do not know
the size of this widget I will assume that 170 sorry 170 for the
percen We can improve this by obtaining the size of the widget or
setting a fixed size at height 170 so I would obtain it in size but it
would be I think another to give away or to obtain widget size that then
I have this and it is wrong 170 170 has to reach zero then
I think it is not 170 if the percentage remains
I think that with that it is not bad either
we will try it if it is wrong to see at the beginning present 010 is one and 170 this
would be minus 170 [Music]
that disappeared and there it is there it is if it is less because it has to disappear you
do not have to go up then we have practically the animation that they
were asking us the other is simply to play a little with
other values for example let me see the video be the video is no longer appeared in the
video even appears in the video i am going to open the video where google
maps is establishing pressure i put it here
it is taking up a lot of space there there it tastes better
than then i think we can use it to appear the widget below
select map we go with that nothing else and I think that with that is enough for this
learning forum, well, we already have the 01 simply
use that only that would be no equal positions
but from the bottom up so that was easy to create a widget what
would be fail is what is called this emapa selection no tics select no
selection on the map pictures selections on the map pickman
can be peak point in my place plus something like
[Music] that more container is a container put
matter elevation 10 and this would be a grow
children with icon point that this would be place I think I do not know if it has this icon
I can not visualize and place [Music] I do not know which would be blades ar I'm going to put
it more and a text that lives selection on the map
[Music] where it is
and well I'm not putting it I'm going to put it down also position net
the pick up just as faith only now instead of top it would be bad
and here I have to see good I'm going to leave it at zero to test there it is
let's give it a centered jaime center
and how is the video there it has a bit disappeared this is gray color
ue with 6 the box
with 10 is already there simply now we give it a
bit of padin it may be a 10 eye that the scroll is lost there so
here here We could give a father and nothing else here to the leeds at the
bottom only bot and we could give it a 30 position
already then you can create a 43 well and peak in map
and I think it's fine and now we just make
[Music] appear we are going to give it here the effect would be here it
would be more it would no longer be less no less also yes because I want it to appear
below negative then minus 50 ok and it disappears then I simply
multiply also by the percentage of visualization and there is ivonne
if they want to put it or easy too It would be easy not just add one for
citi here or for citi as I already have the percentage
we only have to see if it has to be the same percentage or a less
percentage and it is fine then it disappears and goes to Dose what for citi
does not go overcoming the same it could apply above do not look or for city here I
stay for city once you come as a percentage and the
rest in simple person and this we try and halo halo halo and it is
fading is ready then we go to the window from
ending here I have the camera and the simulator looks horrible but you
are not seeing the projects anymore it is fine then I am going to iphone
and I am going to reduce the size I am here using the loft of this studio for
wondering what software I use and this one yes We are already on the
floro learning screen and this is the result of the challenge great offer is a we are
learning it will come out gabo is crude the bag using notification list not
also learned this additional notification to listen to the
scroll that does this work we could calculate the percentage between 0 and 1
and what is the use of that percentage to be able to animate certain views with that
we can already disappear what appears to be at the bottom also peak of map
in which n Or was it not complicated at all? Well, what is his name? Constant
friend of planck buoy, I hope this video will help you so
that you can implement it anyway. I will answer you in this cover
flow by adding a bit of code and also
putting the link of the video if this video is so. released before and not the same I put
the code and well I hope it helps you and you also that you liked
this this flora learning and have learned to use the double school degree more
if there are good people I say goodbye and see you in the next video
