Flutter Web通过API调用Firebase实时数据库无法获取数据求助

问题排查与修复方案 #

核心问题列表

• 异步请求完成后未触发UI刷新：getPostList是异步方法，数据加载完成后没有调用setState通知Flutter重绘界面，build方法始终使用初始空数组渲染，所以一直显示无数据。
• 布局结构错误：Flexible仅能作为Row/Column/Flex的子组件使用，直接放在Container下会触发布局异常，导致页面渲染失败。
• 无异常兜底逻辑：未判断http请求状态、未处理接口返回空数据的场景，若节点无数据返回null时，直接强转Map<String, dynamic>会抛出类型转换异常，中断业务逻辑。
• 冗余实现：已引入firebase_database官方SDK，无需自行调用Rest接口拉取数据，官方SDK适配了Web端能力，也内置了更完善的错误处理机制。

修复后代码

import 'dart:convert';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'package:nasofficialproject/Modals/PostsModals.dart';
import 'package:nasofficialproject/Provider/Upin.dart';
import 'package:provider/provider.dart';

class DashboardPage extends StatefulWidget {
  const DashboardPage({Key? key}) : super(key: key);
  @override
  _DashboardPageState createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  List<PostModels> postmodal = [];
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  late upin pro;
  // 加载状态处理避免多次请求
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    pro = Provider.of<upin>(context, listen: false);
    getPostList();
  }

  Future<void> getPostList() async {
    try {
      // 也可以替换为官方SDK写法，稳定性更高：
      // final snapshot = await FirebaseDatabase.instance.ref('Schools/${pro.upin1}/School-Posts').get();
      // if (snapshot.exists) {
      //   final val = snapshot.value as Map<String, dynamic>;
      // }
      final response = await http.get(Uri.parse(
          'https://officialnasproject-default-rtdb.firebaseio.com/Schools/${pro.upin1}/School-Posts.json'));
      if (response.statusCode == 200) {
        // 处理空数据场景
        if (response.body == 'null') {
          setState(() {
            isLoading = false;
          });
          return;
        }
        var val = json.decode(response.body) as Map<String, dynamic>;
        val.forEach((key, value) {
          PostModels postModels = PostModels(
            value['PostContent'],
            value['PostUserName'],
            value['PostDate'],
            value['PostUserRole'],
            value['PostTitle'],
            value['PostUploader'],
            value['Upin'],
          );
          postmodal.add(postModels);
        });
      }
    } catch (e) {
      debugPrint('拉取数据出错：$e');
    } finally {
      // 请求完成后刷新UI，mounted判断避免页面销毁后调用setState报错
      if (mounted) {
        setState(() {
          isLoading = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : postmodal.isEmpty
              ? const Center(
                  child: SelectableText(
                    "No posts yet....",
                    style: TextStyle(fontSize: 20),
                  ),
                )
              : ListView.builder(
                  itemCount: postmodal.length,
                  itemBuilder: (_, index) {
                    return CardUI(
                      postmodal[index].PostContent,
                      postmodal[index].PostUserName,
                      postmodal[index].PostDate,
                      postmodal[index].PostUserRole,
                      postmodal[index].PostTitle,
                      postmodal[index].PostUploader,
                      postmodal[index].Upin,
                    );
                  }),
    );
  }

  Widget CardUI(String PostContent, String PostUserName, String PostDate,
      String PostUserRole, String PostTitle, String PostUploader, String Upin) {
    return Card(
      child: Container(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(PostUserName),
            Text('@$PostUserRole'),
            const SizedBox(height: 8),
            Text(
              PostTitle,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 4),
            Text(PostContent),
          ],
        ),
      ),
    );
  }
}

额外校验点

• 确认Firebase实时数据库规则已开放对应节点的读权限，否则请求会返回401错误
• 调试确认pro.upin1的值正确，避免请求路径错误导致返回空数据
• 优先使用firebase_database官方SDK提供的get方法拉取数据，不需要手动处理接口拼接和错误适配

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