How to rebuild the entire page body after we get an HTTP response in async function

I would like to display a custom loading image right after a page loads, like the example in the first block of code below.

The loading screen should be visible until I get a response from async HTTP request, after which I want to replace / rebuild the entire body with a different widget and pass a variable from the getData() to the newly built body.

Please, don’t suggest to use the CircularProgressIndicator – I want to use a custom loading image.

The body after page load:

Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(
        new Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('oading.gif'),
            ),
          ),
        ),
      ),
    );
}

The http request:

void getData() async {

      final response = await http.get(Uri.parse(URL));
      if (response.statusCode == 200) {
          messageText = "Success"; 
      } else {
          messageText = "Something went wrong"; 
      }
}

This is the resulting page body that I’d like to show after the getData() function loads:

Widget build(BuildContext context) {
  return new Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Container(
          child: Text(messageText),
        ),
      ),
  );
}

>Solution :

• Use a stateful widget
• create a boolean for loading set to false
• in your get data method, set the state of the variable to true
• on getting a 200, set the state to false

Something close to the below:

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isLoading = false;
  void getData() async {
    isLoading = true;
    if (mounted) setState(() {});
    final response = await http.get(Uri.parse(URL));
    if (response.statusCode == 200) {
      messageText = "Success";
    } else {
      messageText = "Something went wrong";
    }
    if (mounted) setState(() {});
  }

  @override
  void initState() {
    getData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: isLoading ? null : AppBar(),
      body: isLoading
          ? Center(
              child: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('oading.gif'),
                  ),
                ),
              ),
            )
          : SingleChildScrollView(
              child: Container(
                child: Text(messageText),
              ),
            ),
    );
  }
}