如何在异步HTTP请求响应后重建Flutter页面完整Body并传递变量

需求说明 #

页面加载完成后立刻显示自定义加载图片，保持该加载界面可见直到异步HTTP请求获取响应，之后用包含请求结果的新Widget替换整个页面Body，同时将请求得到的变量传递给新页面。要求使用自定义加载图片，不使用默认的CircularProgressIndicator。

完整实现代码 #

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class CustomLoadingPage extends StatefulWidget {
  const CustomLoadingPage({super.key});

  @override
  State<CustomLoadingPage> createState() => _CustomLoadingPageState();
}

class _CustomLoadingPageState extends State<CustomLoadingPage> {
  bool _isLoading = true;
  String messageText = "";
  // 替换为你的实际请求地址
  final String URL = "https://your-api-url.com";

  @override
  void initState() {
    super.initState();
    // 页面初始化时触发请求
    getData();
  }

  void getData() async {
    final response = await http.get(Uri.parse(URL));
    // 请求完成后更新状态，触发页面重建
    setState(() {
      if (response.statusCode == 200) {
        messageText = "Success";
      } else {
        messageText = "Something went wrong";
      }
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading ? _buildLoadingBody() : _buildContentBody(),
    );
  }

  // 自定义加载页面Body
  Widget _buildLoadingBody() {
    return Center(
      child: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('loading.gif'), // 确保图片已在pubspec.yaml中配置
          ),
        ),
      ),
    );
  }

  // 请求完成后的内容页面Body
  Widget _buildContentBody() {
    return SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: Text(messageText),
      ),
    );
  }
}

关键说明 #

• 使用StatefulWidget管理页面状态，通过_isLoading布尔变量控制当前显示加载页还是内容页
• 在initState生命周期函数中调用getData()，确保页面加载完成后立刻发起异步请求
• 请求完成后调用setState()更新状态变量，触发页面重建，自动切换到内容页
• 将加载页和内容页拆分为独立的私有方法_buildLoadingBody()和_buildContentBody()，让代码结构更清晰
• 注意确保自定义加载图片loading.gif已正确添加到项目的assets目录，并在pubspec.yaml中配置资源路径：

  assets:
    - assets/loading.gif
  

内容的提问来源于stack exchange，提问作者BradG