Original subtitles

Hello, guys, this lecture is being recorded after a while of publishing because because many of students

complained about the explanation as it's never a bore lecture.

So I made this lecture to make everything clear and explain in detail so you can understand.

Well, now, to be clear, intermediate levels students liked that way because they didn't waste their

time.

So if you are an intermediate student, you can watch this lecture and skip those lectures.

I mean, the lectures after this one.

So as a story, I would explain in a way that suits beginners and intermediate or more than intermediate

level.

So with that, I don't waste the intermediate time or make you bored and beginners will understand what.

So let's get started, actually.

This is the quote once we're finished the course.

So it has everything connected to the firebase, but it's not a problem at all to start with.

I want to explain just controller.

And if you can see in here, once I move, it is just floating action button is being changed.

It's a shrinking while I'm moving up.

And once I move down, it's getting bigger, bigger.

So the scroll controller, we initialize it and the state.

And this is actually how we initialize it when usually end an interstate and put it equal to this Skrull

controller, then we are listening to it to make this screen repelled by rebuilding at this floating

action.

But it will be different.

For example, as you can see, it is getting to shrink it in here.

So that's why we are adding this listener and we are calling state.

So it will be repeated again, this getData related to the Firebrace section and you will understand

it later on.

Now, let's go down and in here we use the scroll controller.

And we didn't hear actually a custom scroll of yours, so we allow the user to scroll it like this,

as you can see, and usually we do, it's never about using this custom scroll, if you tell us a lot,

actually the other way.

But I prefer this one side of this custom scroll.

If you initialize Laboratoire, which as I will explain it later on as this video.

Now, let's stay with this controller and see how we use it.

Let's search for it.

We got six matching.

So if I go up in here at NC State, as I said, let's go down and URETERS and this widget, which as

we are building this floating action button in it, not so.

Let's see where we are using this floating action, but it is in here and I stuck a stark means that

those two were just above each others and that belongs to all of you.

And here, as you can see, uh, so it will appear above them and a stock you need to know that if you

initialize a widget under another widget.

So in our case, renationalised is built for other customers of you.

So it will appear above of that widget.

That's why this is floating.

Auction button is above them.

If I cut it now and go up.

To the customs scroll of you and Bastet and the stark difference, the charge of the Stark are the same.

We call them in here, if I say but now, it will not appear or it will appear, actually.

But look how it is.

Only the middle of it appeared because it's not below US Customs.

So we need to ensure that all of this customs produced so it will appear above it.

Now, let's say that.

And in here as a switch, actually, I do I did some comments for you in here so you can understand

that, but I will explain it also.

At the first week, we are tested for this top margin I give at this value because the expanded height

is two hundred and I prefer to add my support to it.

So it will appear like this.

Now, if I change this, for example, put at one hundred, it would be displayed in here.

I would change it to, for example, 500.

And as you can see, it appeared in here.

Now, if I search for 200, I got to my chest, which is this one and the other one, which is the expanded

height grates.

So for this scale starts, we are doing a check for it and we are using it to do money for statements

or end money statements to change the height.

Correct.

So.

And here, if I change this, for example, to Chewton itself, it will not shrink directly the size

of of it must be 10.

So to get shrink.

If I choose, for example, one hundred ninety, let's say now directly, it would be shrink, as you

can see.

But I prefer if it is one hundred sixty, so was it zero to one hundred sixty, which is almost on this

level, it will start shrinking, as you can see now.

Here it is.

Now for this scale, and we are using it also for some effort statements, I would explain them and

details soon.

Don't worry.

And in here we are using the cell starts dividing up by two.

I will change it to six, for example.

It's over.

Now it as you can see, it's getting bigger and different now.

What changed?

About the size of it, because we are checking out we are changing the scale.

So why once I change this one, this statement actually is being called the second one and the scale

is being equal to this amount of value.

To make it clearer for you, I will refer to the changes itself.

Now, if I move it, it is as usual and this in here, I will change it to it safe.

As you can see, it was big, but it's back to a normal size again, I would go to another screen,

then come back.

As you can see it start with another site, for example.

I would avert the changes.

And if I highlight the scale, as you can see, why are you looking at.

And it's a scale to manage the size of it.

OK, so.

So if statements we are monitoring the size of this plotting action buttons and at OK, but also if

you noticed this floating action button is also moving, was with us once.

We are moving it.

So we need to manage this also and we can manage it simply by adding a stop, so we are moving it,

which has as its a statement.

So once we are moving it.

This escrow controller will notify us by calling it has clients.

This is me and actually if we are moving it, so this statement would be called to be sure, something

in here

like this, it's safe now.

Nothing would be.

Printed in here, if I move it a little bit, so Alison will be called.

It will be printed in here somewhere in here.

Um, let's actually search for it.

Here it is, it's getting printed many times because.

In here, I'm watching it, as you can see, great, so that's delicious and let's see what inside of

this statement.

So in here is something called off search and we can't get this offset through this controller and through

this controller.

This offset actually is edible.

So it will listen to it and give us the offset.

And in here we are changing it.

Just chop.

We are subtracting it from the offset and just stop.

We are using at.

For this position, the argument in here now is this position, that argument is very useful for for

a stock.

If I change this, put it, for example, two hundred at what remains the same.

But if I move it at will not be more than with us because it is, this body will not change anymore.

OK, so we call first the state and data center.

And every time I move this one, this statement is being called and this double value is is being changed

and then we provide a stop value in here.

So once I'm move it, it would be more than and it would be moving.

I mean, with it just like this now dispositioned argument, as I said, it will control the place and

I stuck to it.

OK, now for those three statements, we are just making a check.

If it is, the offset is less than this value.

At the initial value, it will not be less than this value, it will be two hundred actually the expanded

height.

OK, so two hundred, it will not for sure be less than that value.

So this statement, as you start would be called.

So let's say in your print first a statement had saved, now it will not be printed.

Now if I move it, nothing is getting printed.

If I go or go back.

Actually, we need to remove this.

Let's make sure.

Now, nothing is getting better now if I go back again.

It should be printed in here at actually the value in here got to change.

I would start the option to make sure actually.

Now, it should be granted charities, it's getting printed every time the state is being rebuilt.

Now, if I move it, it's nothing is being reported.

Now, if I come back again, it will be rebuilt.

As you can see, the video changed to two and I did it says.

Delicious, and this one is being called once we are moving it between the.

Is this a fair statement and between just a statement, this statement as explained and the first officer's

tutorial about this case, if it is one, so it will be given its size, if it is not one.

I mean, if it is zero, it will not appear.

So if I change this to zero, as I said before, it will not appear now.

OK, so if it is between that I value will be given for the scale, which is a value between zero and

one.

OK, and you can apprentice value and make sure for example.

So granted.

Value, for example, in here like this, and then actually you can just print this scale in here and

say in here, scale value.

Cut and pasted in here at Save.

And I would copy this to search for it.

Let's move it now, and it would be cold, and as I said, it's value between zero and one.

OK, every time I change it, it would be printed.

If I am in stable condition now and here, for example, the initial value at will not be printed for

sure.

This this statement would be called If I am in here, this statement would be called as a floating auction

button would not appear anymore.

Now, I will do it says.

OK, so in this position, which are the two main widgets or the transfer and this floating auction

button, this floating action button, as you know, this floating auction button in here and just transform,

which it is actually the one that controls the shape and the position of it actually not position position

as controlling the position while this transform as managing the size of it.

And here we are passing for the transfer of this this value to say if it will appear or not.

And actually this value will be transformed, which it is being used sometimes for the animation, as

you may notice, that it is moving smoothly from a shape to or from my size to another size.

OK.

Like this cool animation now if I use, for example, 90 or value.

Like this, it will make an error because we need to.

Assigns value of Matrix.

OK.

So let's.

Change this, we can call it like this, actually, let's save.

If I move it, as you can see, nothing is getting changed.

It's over now.

And that's what we are doing.

So that's why we are using this transform widget.

Now, this, Hirotaka, as, uh, as kind of important in here, because if you have money floating

auction buttons, you need to specify ion you're a target for it.

So it will be different from the other floating auction bottom because you cannot see any money floating

auction buttons without giving us an idea.

Great.

So let's continue.

Now, let's go up.

So in here, OK, for this sliver we initialised, this is this one in here automatically imply leading,

which is an icon in here.

I put it towards it's actually used us and our case.

As you can see, and I think what up here, because we don't have anything we can specify leading in

here, which is icon, for example, icons DOT.

And I think it will something will appear in here, as you can see, but if I put this to force, it

will start appearing because I give it a leading, but by default, nothing will appear.

OK, so we can specify a leading with what?

OK, I would keep it like this.

OK, so now I would comment this.

I will also comment this because it's been useless in here for the for the elevation that's kind of

useless in here.

But if I go up, we have some elevation in here.

If I change it to zero, it's safe.

It will be a little bit different in here, so we can play with the elevation and size for it for this

expanded height, I talked about it already.

You can change it to three hundred and up to 300.

And it would be like this.

And for sure, this.

Floating ocean bottom looks different in here.

OK, so this point means if I go up, this upper will remain in here.

If I change it to Truffaut's, nothing would appear now in here.

OK, it will not be split.

I prefer to keep it in here now for this flexible space.

It is something very useful to ask ever ever since we give it a flexible space bar in here, which is

has also we can initialize a title in here and a title in here.

I explain it in details, actually.

And the previous tutorial where I explained asked the proper engineer or how to make it.

So that's why I initialize it in here.

If you watch that video, it will become more clearly and you will understand it very well.

And and here we have the title and we have role in here.

OK, now, if you are confused why we do use this, this one, I would explain about it now.

For example, we can use this title in here.

Let's say text hello, let's say, and it will be appearing in here.

We also cannot specify a background for it.

We need to use this flexible space bar in order to specify a background to it, and here we don't have

a background image, we only have background color.

OK, I would remove this.

And even the title would be up in here while in a flexible space, but we have the title in here I want

show you how I will keep this title actually for now, and I will change this opacity.

I will talk about it in our second head.

Save our widgets are always in here.

This text that appeared in here always it is always found in here.

But as you can see, it is in here and there, but for a title, it's just for our for our neighbor,

for example, it is at the top.

So this one for this for the flexible space bar, it is at the bottom, but for this one it is Ardito,

I would it says, oh, definitely changes.

Did it just now.

It's so.

Here it is.

Great, now I'm using in here something called Twitter now where I barely used and this.

Actually, it is something super important.

It is something important for the response of UI and for anything else.

I use that because mediocracy.

But you can use this also.

It takes a context and a text constraints for the constraints you can access the with the size.

You can access everything that you want.

OK, Max with Max height, anything that you want.

OK, so for that it can be very useful without any mediocracy.

Now in here for the top we still listening for something called ATAP.

This is a variable.

I initialize it.

Up in here and I put it out there first to zero.

Now let's come down and and here is your top is being used to give a positive for this widget.

Now, what is this widget?

This widget, as the name says it is, give for any widget on opacity.

For example, once I change it and put it to one, the budget will always appear.

But if I change it, to put it to zero, it will not appear in front of it.

So we are doing a check about it, or if it is less than one hundred ten, which is will be less than

two hundred, which at the height of the expanded widget.

So once it becomes.

For example, reach 110.

Let's say that.

And here it is, once it reaches the 110, which is almost as value as up here directly in here, and

it has this cool fighting capacity because we are robinett by this unlimited capacity, which is the

duration, which is also the capacity.

So the capacity, it will make it up here in here.

And it takes anywhere between zero and one, for example, zero point one.

It will be barely up here.

It is in here.

I don't know if you can see it or if I can change it to zero point six, it will appear, but it will

not be pain.

Very.

So this animated capacity to cool fading animation to it.

And we can't specify the duration for that.

For example, if I change this to this value now, if I move it, as you can see, this fighting animation,

come to it so we can change it as much as you want.

I give it a title to put the title to this center in here.

And if I if I don't give it actually if and I say it will come to here to here, actually, but not

that what we want this collapse more.

We can do more that.

And and here we have this row, and it has just animated or positive, which is just another row.

OK, so actually we don't need this row in here.

Can initialize aren't animated opacity.

And the order is gone, it's safe and see what will happen.

And still working fine.

OK.

Great, so and here we are given a container for the image in here.

And as I said, it's always appearing, but because of the publicity, it doesn't appear below.

So I would like to explain for you and here we are given out.

As you can see, this container.

We are keeping a tight end to it.

I would change it to 50, for example, and the value of that would be different, as you can see.

So I prefer this value and this is actually the height of the up bar.

And any work, if not a shadow, as you can see in here, it has a white shadow.

I think Republicans yet.

Now it has red in here, I will change it to, for example, 15, I hope, thought it would appear.

OK, it's up here more now, as you can see in here.

Here it is, so you can change it as much as you want.

I like to keep it white, actually, and keep it like this.

We specified our shape for it, which is by box shaped or circle to give it a circular shape without

adding body radius for it.

And in here would give us an image decoration.

We could give it, for example, a child and give it and watch network and then give it what, a radius.

But it would be annoying.

Just specify an image.

What is this container?

And it would look just like that.

And great.

And in here we go.

We are giving us decoration and watch a film box for it and we are giving this network a much.

Great, and I'd at urtext beside that, because we initialised the arrow in here so we can add a another

which are to be sighted.

Which is this text, and by Robinett, by the animated capacity, it will do the trick, so it will

appear or it will not appear and it will do a fade animation.

You can use also opacity only A.D.s duration.

And it would be.

Great also, but it will not do us a fading and here it will not do a fighting effect, as you can see.

So I wanted to give you more info and give it give you animated capacity in here so you can use it.

And your products, let's move down a little bit, and in here we have several top box adapter where

we can specify.

And here, anyway, just that we want and the editorial that I explained before and I also uploaded

to YouTube channel, I will give you the links and the description over at the attached resources.

You can check it.

And here you can use the to box adapter or you can use liberalist, or if you in our case, we needed

to add a sliver to box adapter because we need to add many widgets.

So that's why I initialised a clever to box that there and give it column.

And inside of the column we managed those widgets and at the top we have this user bug and we have this

dynamic which I talked and I explained in detail about the dynamic widgets and this dynamic which we

are initializing a text and we are passing, uh, I mean, we are passing through it says Titre, I

would do it like this and I got many others.

You'll see.

You'll see why.

And I will fix it in front of, you know.

And for sure, we're up in arms by partying and I'd be before it, so it would not be horrible anymore.

OK, and here I got an another I will Cotsis now because I changed it to an eight arguments in here.

Let's go back.

And in here, I will press control space and I will have the title of this suggestion, and I can't

pass it like this at.

You can do the same if you don't want to be lost about your valuables.

That would be a great practice if you have many variables.

Let's change the others.

So in here title like this and to change the last one which is in here.

OK, so this is the title and we added a divider in here, which is this divider and below it we initialized

material.

Now many of you asked me why I wrote this list title by material at Inkwell.

I wanted to show you that this Listowel.

Can be given in here and here, I mean, you can drop it by Inkwell and do the same.

I wanted to give you more widgets because I want you to practice more widgets so you can use it wisely.

And your application.

This is what do you say it would work.

And as you can see, and here it has this red splash color because I specify this red color in here.

But if I keep it like this and paste it in here for this on top in here, it's say.

Press on it now.

This will not be available and we don't have caller in here, so if you want to change the color juicers

inkwell, use this material and you're going to go.

Now, for this one, I would cut this, paste it in here and keep it like this for you.

But for the other budget, I will delete the.

OK, it's safe.

It's a swan also, and it's safe and it will also work, it is it is working OK.

Oops.

Uh, we need to treat us also.

Look, this.

It's safe and it is now we are passing the user information in here.

I talked about this switch at.

And I talked about the Bush name and how to navigate to another screen, and you must not forget to

add the names and side of the main in here.

OK, so let's come back.

And in here we are using this switchyard for source.

Which ads in here.

Let's see what inside of it.

And here we have those arguments who are passing out.

And in here we are doing the same.

We can't delete those materials and equal and.

We can just stick with this lifestyle and give it the on top and what we want.

OK, so.

I like ads like this and.

Since we are not changing anything, we can change this also or remove it, so once I press on it,

nothing would happen.

OK, now it would appear this Listowel, as you can see, takes the title, subtitle leading, trailing

anything that you want.

And we also cooperate in here.

OK, so below, so switchyard, reinitialize another title in here and another.

Divider, and now we use this this tunnel where we installed a package for at.

I explained later on in details and I explained the dog theme actually also in detail, so that's why

we are using this list also once I change it.

As you can see, it has changed it to the dark time and here we are just calling the provider to change

the value to it and then say, Rachel, I showed a preference.

So once to use it, closed the application and open it again, it will be displayed.

I mean, the dark time would be far fetched and split.

And here we are showing the this icon.

Erica's OK, and for sure you can do a check about.

The theme to show a different icon, if you want, if it is dog team or not marketing, OK, and takes

those arguments.

And you can't change that to us what you want.

I actually like to switch type.

You can use the material one.

It is what I I prefer the original one, which is for the iPhones.

OK, so in here and there, you dog out once I press on it, just pop up.

That's why we initialize the dialogue in here.

And I also explain it to antedates later on.

You would understand it very well.

So don't worry about it.

So with that, I guess, yeah, I explained everything as a speech and I hope that you understand and

I want to actually, if you don't like two percent and in here and use this list, you can't pass an

icon data in this way.

For example, icon, data icon in here.

And it's specified later on which icon you want to send in here.

Just the icon.

OK.

OK, so with that, I covered everything in the screen and as you can see, it has very rich design

and called recycling.

And I guess it's perfect now since you understand everything.

And if you don't understand, just ask me and I would explain for you and details.

So see you soon as your next tutorials.