All language subtitles for 040 Hot Reload and Hot Restart - Flutter Power Tools.en_US

Now in the last module, we built our 'I Am Rich' and 'I Am Poor' project.

If you remember, we created our app inside our main function, which we know gets triggered, when our code

is run. Inside these curly braces, is the starting point.

And inside here, we've told the phone to run an app which is a Material app. And then we gave it various

widgets to be displayed.

So in this case, we've got a scaffold, that has a background color and simply just an empty container,

as the body.

Now if you remember, at the beginning when I told you about why Flutter is awesome,

one of the things I talked about, was this thing called hot reload, which allows you to almost instantaneously

see your changes in the simulator or on your device that you're testing it on.

That means, if I was to go and change our color, instead of having a background of teal, and I wanted to

have a background of a red color. Then I should be able to go and click on this button which is hot reload,

and it should change instantly, right?

And you can see down here that it's initializing hot reload, and it seems to have successfully reloaded

everything.

But, why is our background not red?

Why hasn't it changed?

Well, the reason is because for hot reload to work, we have to have the things that we've changed inside

a Flutter

stateless, or stateful widget.

So let me show you what that looks like. In order to create a stateless widget,

there's a really quick shortcut that Flutter gives us, which is if you type S-T-L-E-S-S, so state

less, I guess for short. It will automatically create you a new Stateless widget.

So if we go ahead and hit ENTER, you can see, it writes a whole bunch of code for us.

And this is the boilerplate code for building a stateless widget.

And then we get to give it a name, so let's call this stateless widget,

I don't know, 'MyApp' and instead of building our Material app inside our runApp project in the main function,

we're gonna go ahead and take it out.

So we're gonna go highlight it up until we've got the comment

where it says 'MaterialApp', and I'm gonna hit COMMAND + X to cut, and then I'm going to paste it here where

it says return.

So instead of returning a simple container, I'm gonna return an entire Material app.

And of course, we can't have a comma and a semicolon,

I'm going to delete the comma. And instead of running that Material app including all of those things

there, I'm simply going to say, runApp, and the app that we're going to run, is MyApp. So you can see that

this hasn't really changed our app, at all.

All it's done, is we've separated out the part where we build our Material app, into a separate widget.

And this is a stateless widget.

Now what a stateless widget comes with, is this method called build. And this method gets called whenever

we create a new version of this widget.

That means that, if I go ahead and change this color from, what was it teal to red, and I click on the

hot reload button, then it will go and check to see what was the code that was changed most recently,

namely teal became red.

It will look to see where the closest build function is, and it will re-run it. Now that we've done this,

let's go ahead and stop our app, and run it again.

So we're restarting it from fresh.

And this means that our app is going to be created again using this stateless widget instead of simply

just returning a MaterialApp. You can see right now, our background has been changed to red,

but this is not very interesting.

We always knew that we could stop our app and run our app, and wait a million seconds for that to happen.

But here's the cool thing. Now that we've got our MaterialApp inside a Stateless widget, which has a

build method, which can be called every time we make a change to one of the widgets inside this build

method.

So let's change that color from red to blue.

This is the part of the code that will get marked as changed, and as soon as I click on this button for

Flutter hot reload, you'll see that the changes move over almost instantaneously. And it's because that

all the app is doing, is instead of compiling all of the code, linking everything together, figuring out

where the app icons are, which platform it's being run on. Instead of all of that, it just calls this method

again. And it rebuilds our MaterialApp with the scaffold with the changes.

This is why it can be so fast. And remember that you don't actually have to click on this button. By default,

Flutter's hot reload is hardwired to happen when you save your project.

So let's change the color again.

Let's change it to white, and as soon as I hit COMMAND + S on Mac, or CONTROLS + S on Windows, and I save my

project, it automatically runs hot reload, and we get all the content refreshed almost immediately. Which,

for anybody who's done any sort of mobile development with iOS, Android, Xamarin, whatever it may be, this

is almost magical.

And the idea really, is that hot reload is meant to happen so fast and it really is like a reload.

Like when you refresh your website as you're creating it.

And what this will allow developers to do is to almost paint their user interface into life.

Right?

Say if you were creating a drawing or creating a painting, you see the changes immediately as soon as

your pen hits paper.

And even though hot reload is not instantaneous, like when you put a brush on paper, but it reduces that

lag to fractions of a second, which means that developers are more inclined to use hot reload to see

the changes that happen after every change they make.

And this means that you get less errors, because you haven't waited for a whole day before you rerun

your app. And you realize that there's 10 things that have broken.

So we're going to be using the power of hot reload to massively reduce the amount of time for each development

cycle.

So let's imagine a development cycle being, we write code, and then we test code, we run it, we see what

happens. And then we look at the difference between what we expected to happen, and what actually happens

on screen. And then we go back, and we change our code, we write more code.

And this goes on until infinity, or until your app is done. And what Flutter allows us to do, is to massively

shorten the time that's taken to create that cycle, for each of those cycles.

And previously when you saw me creating this FloatingActionButton, I created the button, I hit save,

it updates. I changed the background color, I hit save, it updates. I add an icon to the button, and I hit

save, and it updates as well.

So for every single line of code, when I'm creating the user interface, I'm just painting it on to my

app and seeing the result, in fractions of seconds. So almost live.

This means that you can really experiment with how you want the screen to look.

Let's see, if you know for example, let's move this thing to the left a bit. See how that looks or change

the color of that thing, through you know, all the rainbows of colors and see how that looks and see whether

if you like it. If not, change it and then it updates in a fraction of second. When we're developing apps

natively for iOS or Android,

the only real option that we have is running the app from cold.

Now I want to show you, even on a fast iOS simulator, running on one of the latest MacBook Pros.

So it has a lot of processing power.

I want to show you just how long this takes, right.

So I'm stopping. I'm starting. And we're just watching that timer go. And you can see in the console, that

things are happening.

It's launching the code.

It's starting the build.

It's compiling our code turning the human readable code that we've written, into ones and zeros that

the machine can actually understand. And then launching our app onto the simulator.

And in total I counted that that took about 30 seconds to actually show up on the screen.

It really took a long time.

And imagine that if you had changed just the color of the FloatingActionButton on the bottom right,

you probably are not inclined to spend 30 seconds waiting to see how it's changed.

Right? Now let's consider, if instead we were creating a Flutter app, and we now have access to our hot

reload.

Now the same thing,

changing a color. Instead of hitting run,

I'm going to hit hot reload, and it's a matter of seconds.

It took five seconds for that app bar background to change. And the beauty of this is that it doesn't

even lose the state of the app.

So all of the things that you've done for testing, say if I've changed the number of donuts eaten in

the app, it's reading as ten. But I decide to change the background color of the app bar to red, and I

hit hot reload, almost instantaneously,

my background color changes, but the rest of the data that I inputed hasn't reset itself. Which means

that if you're testing something like a form, or you're testing something where you don't want to lose

the data that you've used to test the app, but you wanted to make some sort of UI change, then hot reload

won't lose that data for you.

And we're gonna see this come into action, a little bit later on, as we get to develop more and more complex

apps.

Now what is this button that's next to the hot reload button?

This little green one.

Well this is something that comes with Flutter as well,

and it's called a hot restart.

What this does, is that it does in fact, reset the state of your app.

So if you needed to test your app from the start,

So when number of donuts gets reset back down to zero, then this is the button that you would use instead.

So I'm changing the background color, and then I'm pressing hot restart, instead a hot reload.

And you can see that in the console, it's doing exactly that.

Now it still doesn't take as long as actually starting the app from cold, when you stop it and run it

again.

But it does in fact, reset the state of our app and you can see that not only is this background gets

changed to blue, but also the number of doughnuts eaten get reset back down to zero.

And it only took eight seconds for this to happen.

So you might be wondering. Well, OK, that's fair enough on a very simple app right.

Like you know something that just counts the number of doughnuts that you've eaten.

But what if I had a big app with thousands of lines of code, then surely you know hot reload and hot

restart won't really be very useful for me.

Well actually, it still is. Because of the way that hot reload and hot restart work, what they do is they

will only look at the changes that were made, and they will push those changes onto your testing device,

your simulator or your iPhone.

It's almost kind of like, if you're somebody like me who travels a lot,

I actually have a suitcase that's pre-packed with pretty much all the things I always need when I go

travelling, like toothbrush, toothpaste, my you know, a couple of pair of socks and those kind of things.

And depending on where I go, I might add a few things or move a few things. Say if I'm going somewhere

that's quite warm, I might add a pair of sunglasses.

So it's only the changes that I'm making to my suitcase that gets put into the suitcase. And this means

I save myself a lot of time. Instead of packing my suitcase from scratch,

I'm only adding the changes that I need for a particular destination.

And this is how hot reload and hot restart works.

So in this case, size doesn't actually matter. It doesn't matter if you are packing for a small suitcase

or a giant suitcase. As long as you already have the suitcase packed, and you're only adding to it one

thing or two things, depending on which destination you're going to, then it doesn't actually take any

longer to pack a larger suitcase or a smaller suitcase.

And this is the same for our Flutter code, even if we're hot reloading for changes that we've made to

a really complex large project.

It will still be just as fast as doing it for a tiny project like this one here. And in the coming lessons,

we're gonna be using hot reload and hot restart to almost instantly, see the changes that we're making

with our code in our simulator. In the next lesson,

that's exactly what we're going to be building. We're gonna be building out our container, and seeing

all of the cool things that you can use it to do. So for all of that and more, I'll see you in the next

lesson.