Flutter中如何从Http Post方法响应中获取数据？（FutureBuilder无数据返回问题排查）

嘿，我看到你遇到的问题了——FutureBuilder一直卡在CircularProgressIndicator，根本原因是你的postDataTransaksi()方法没有返回任何数据，导致snapshot.data始终为null，自然就不会进入展示数据的分支啦。下面我一步步帮你修复：

1. 让postDataTransaksi()返回解析后的数据 #

你原来的方法里，虽然解析了响应的JSON，但没有把解析结果return出去，所以这个Future最终的结果是null。我们需要修改方法，指定返回类型并返回数据，同时处理异常和非200状态码的情况：

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

// 指定返回类型，让FutureBuilder能正确推断数据类型
Future<List<dynamic>> postDataTransaksi() async {
  try {
    final response = await http.post(
      Uri.parse('https://ignis.rumahzakat.org/donol/listTransaksi'),
      body: {
        '---': '---', // 替换成你的实际参数
        '---': '---',
      },
      headers: {
        'access-token': '---' // 替换成你的实际token
      });
    
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      // 关键：返回解析后的JSON数据
      return data;
    } else {
      // 处理请求失败的情况，这里可以返回空列表或者抛出异常
      print('请求失败，状态码：${response.statusCode}');
      return [];
      // 如果你想让FutureBuilder捕获错误，可以抛出异常：
      // throw Exception('请求失败，状态码：${response.statusCode}');
    }
  } catch (e) {
    print('请求异常：${e.toString()}');
    // 捕获异常后也要返回默认值，避免Future处于未完成状态
    return [];
  }
}

2. 优化FutureBuilder的状态判断与使用 #

另外，直接在FutureBuilder的future参数里调用postDataTransaksi()会导致每次Widget rebuild时都重新发起请求，非常不高效。建议把Future对象初始化在initState里，同时完善状态判断（比如错误状态、空数据状态）：

import 'package:flutter/material.dart';

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

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  // 提前初始化Future，避免重复请求
  late final Future<List<dynamic>> _transaksiFuture;

  @override
  void initState() {
    super.initState();
    _transaksiFuture = postDataTransaksi();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
      future: _transaksiFuture,
      builder: (context, snapshot) {
        // 处理异常状态
        if (snapshot.hasError) {
          return Center(child: Text('加载出错：${snapshot.error}'));
        }
        // 处理数据加载完成的状态
        else if (snapshot.hasData) {
          // 判断数据是否为空
          if (snapshot.data!.isEmpty) {
            return const Center(child: Text('暂无交易数据'));
          }
          // 展示第一条数据的id
          return Container(child: Text('第一条交易ID：${snapshot.data![0]['id']}'));
        }
        // 处理加载中状态
        else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

额外建议 #

• 如果你返回的JSON是固定结构的，最好创建一个模型类（比如Transaksi），用json_serializable来解析，这样类型更安全，避免直接使用dynamic带来的错误。
• 可以在请求时添加加载状态的提示，或者给用户重试的按钮（如果请求失败的话）。

内容的提问来源于stack exchange，提问作者Fikry Ahmad Haykhal