All language subtitles for 10. Showing a Loading Indicator

So it would be great if we could let the user know that we're waiting for something to finish here before

we actually leave that page and go back to that previous page. Put in other words, in our edit product

screen,

we only want to call pop here once we're really done adding this but until we're done, we want to show

some loading spinner, some progress indicator. Now

how could we do that?

Well it would be awesome if add product here would return a future because if this would return a future,

then we could use the same then trick here to wait for this future to be done,

so for the response to have arrived before we call pop and it's pretty easy to make that work. Right

now

our add product method here in our products class here in the products.dart file returns nothing, it returns

void. Well we can let it return a future and that future is a generic type where you typically indicate

which kind of data that future will resolve to once it's done

and here we don't really care,

we just care that it's done,

we don't want to pass any data back to our widget, so we can resolve to void,

so to nothing.

But now of course, we're not fulfilling this condition,

we're saying here that we return a future but add product doesn't return anything,

we have no return statement in here.

So indeed now, we should return something and actually, you could think that you now return something

here

after notifying listeners, maybe future value like this. Theoretically, that returns a future which returns

nothing or which resolves to nothing but you're returning inside of this anonymous function here, not inside

of your add product method.

Returning inside of a nested anonymous function like we're doing it here will not return from your main

method,

so this will not work,

you're returning from the wrong function, you need to return outside of that.

The problem with returning outside of that nested function just is that

when you return here,

you instantly return because you learned that Dart will basically execute this whole code snippet here,

send off the request, register this function as a to-do function in the future but not wait for that and

immediately move on to the next line,

so this will be sent before this function ran.

This function will still execute later because Dart did save it as an I have to execute this in the future

function but it won't wait for that,

so you return to early then.

So what's the solution?

Well we return this whole block here because post returns a future and with then, we register some code

that should execute when that future resolves

but then itself returns another future.

We're not doing anything with that future but we could if we add another then block here

but we don't need to, we have no other option or no other operation we want to do after this operation

but since then returns another future, that's effectively what we return here overall because we

return the result of calling post and then calling then and the result of calling then is another

future and that's the future

we return here.

So with that, we effectively return a future now in add product and that future will resolve as soon

as this then block is done

which in turn is the case

as soon as we have a response and we stored our product.

So now we can go back to the edit product screen and here after add product, we now get back a future,

here it is,

so now we can call then here as well

and inside of then, we now pass in a function where we now can call navigator pop to only pop

once we're done.

So instead of doing it down there, I do it immediately after updating because we're not sending HTTP requests

there yet

but if we're adding, I'm sending my pop request inside of this function which I pass to then.

Now just one thing,

even though our future in the end resolves to void and doesn't give us anything, we still have to accept

this void argument here but we can't work with it.

That's just some syntax, we get a value here which essentially is no value,

that's just a Dart specialty, so we can just ignore this, it's just important to know that you have to

accept a value here in this function you're getting executed,

this will not hold any data though. Important for us is that now we call navigator of inside of this

function which we pass to then and therefore we will only pop once this was stored.

Now to also shows some loading indicator until this is done,

we can go up to all the lists of properties we initialize and there, add a new property, isLoading which

initially is false and we want to set that to true now

once we submit our form, so maybe here once we call save here we set isLoading to true and wrap that

into a set state call because I want to reflect that change on the user interface because I then also

want to set it back to false once we're done here, so we can set it back to false here right before

we pop

and of course also here inside of then right before we pop. The idea with that is that we can now use

isLoading in our widget tree to render something different whilst we are loading.

So maybe here in the body, instead of rendering the full form, we can check if isLoading is true and

if it is true, then I want to render center widget where the child maybe is a CircularProgressIndicator,

a widget that ships with Flutter and otherwise, I'll render padding with my form. So I'll render this

central loading spinner here in the end with center which comes from Flutter and CircularProgressIndicator

which comes from Flutter from the material package. I render this if we are loading and I only rendered

the other content if we're not loading.

So with that, if we now save this and we add yet another item here, this is another test, if we now add the

image here and save this, you see the loading spinner and we go back once this completed and that's of

course a better user experience because we now let the user know that something is happening for which

we wait to finish until we continue with the app.

So this is a better way of sending our data to a server.