Flutter实现应用显示前发起Get请求并展示全屏加载

步骤1：添加网络请求依赖 #

首先在项目的pubspec.yaml中添加http包依赖，用于发起HTTP请求：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 可根据最新稳定版调整版本号

执行flutter pub get命令安装依赖。

步骤2：完整实现代码 #

以下是满足需求的完整代码，包含加载状态管理、GET请求、异常处理逻辑：

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

// 遵循Dart大驼峰命名规范调整类名
class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _responseData;
  bool _isLoading = true;
  String? _errorMsg;

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

  void _fetchData() async {
    try {
      // 注意：Android模拟器访问本地localhost需用10.0.2.2，iOS模拟器可直接用localhost
      final requestUrl = Uri.parse('http://10.0.2.2:3000/getsomething');
      final response = await http.get(requestUrl);

      // 校验响应状态码
      if (response.statusCode == 200) {
        setState(() {
          // 解析JSON响应，可根据实际返回结构调整解析逻辑
          _responseData = json.decode(response.body);
          _isLoading = false;
        });
      } else {
        throw Exception('请求失败，状态码：${response.statusCode}');
      }
    } catch (e) {
      setState(() {
        _isLoading = false;
        _errorMsg = e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double statusBarHeight = MediaQuery.of(context).viewPadding.top;

    // 加载中显示全屏加载指示器
    if (_isLoading) {
      return const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }

    // 请求失败显示错误信息
    if (_errorMsg != null) {
      return Scaffold(
        body: Center(
          child: Text('加载失败：$_errorMsg'),
        ),
      );
    }

    // 数据加载完成后展示实际内容
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(top: statusBarHeight),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('请求响应数据：'),
            const SizedBox(height: 16),
            Text(_responseData.toString()),
            // 这里可根据业务需求构建具体UI
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 加载状态控制：通过_isLoading变量切换UI，初始为true显示加载指示器，请求完成后设为false触发UI重建展示内容。
• 本地服务器适配：Android模拟器无法直接识别localhost，需用10.0.2.2映射电脑本地的localhost，iOS模拟器可直接使用localhost。
• 异常处理：用try-catch捕获网络异常、状态码错误等问题，避免崩溃并提示用户。
• 命名规范：调整了类名遵循Dart大驼峰规范，符合Flutter开发惯例，提升代码可读性。

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