How to display Loading Screen using Go Router ,Flutter

Asynchronous functions, like calling a URL in the web, an online image reference, or calling an API, allow you to set specific functions that track the Request status and Response.

Here’s a simple example on how to call a URL with Dart (Flutter):

//You'll need this import for making HTTP request
import 'package:http/http.dart' as http;

Future String fetchData(String url) async {
    final response = await http.get(Uri.parse(url));
    // Check if the call to the server was successful
    if (response.statusCode == 200) {
      // If server returns an OK response
      return response.body;
    } else {
      return 'Failed to load data from the server';
    }
}

if you use a Future, you can set a FutureBuilder, which changes accordingly if you have or have not the expected response.

@override
Widget build(BuildContext context) {
future: _myFuture,
builder: (context,snapshot){
if (snapshot.connectionState == ConnectionState.waiting) {
   // The connection is awaiting for the response
   return MyLoadingWidget();
} else if (snapshot.hasError) {
   // There was an error on the request
} else {
   // There was a return message, so we use it accordingly
   // The response is stored on the snapshot.data 
   return buildMyWidget( snapshot.data);
}

Another way to set a Future callback is to literally call it like this:

_myFuture.then(/* code that executes after we get a response */);

The cons of this last method, are that you need to do a manual validation of the response, check if there was an error in the call, and if the service response is valid or not.