为什么我的数据没有在 Flutter for web 中使用 api 从实时数据库中检索

Question

我正在尝试从 Flutter 中的实时数据库 Firebase 中获取数据以用于 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> {

  final fb = FirebaseDatabase.instance;
  List<PostModels> postmodal = [];
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  var pro;

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

  Future<void> getPostList() async {
    final values = await http.get(Uri.parse(
        'https://officialnasproject-default-rtdb.firebaseio.com/Schools/${pro.upin1}/School-Posts.json'));
    var val = json.decode(values.body) as Map<String, dynamic>;

    val.forEach((key, value) {
      PostModels postModels = new PostModels(
        value['PostContent'],
        value['PostUserName'],
        value['PostDate'],
        value['PostUserRole'],
        value['PostTitle'],
        value['PostUploader'],
        value['Upin'],
      );
      postmodal.add(postModels);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Flexible(
          child: postmodal.length == 0 ? 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(
                child: Column(
                    children: <Widget> [
                      Text(PostUserName,),
                     Text('@'+PostUserRole,),
                      Text(PostTitle,),
                      Text(PostContent),
                ],
            ),
        ),
    );
  }
}

这些是我用于获取和显示数据的代码，但我不知道它为什么不起作用。有人可以帮助我吗，这对我来说意义重大，因为我正在尝试连续四天解决这个问题，但还没有解决。

Answer 1

第一次创建 Widget 时，它会运行 initState，但它会在您获取数据时运行 build - 并且没有任何内容可以显示。

一旦您的数据被接收 - 没有任何东西告诉 Widget 重建。

最好的方法是使用 FutureBuilder。它会做什么——它会在你等待数据时呈现你想要的东西——在我下面的示例中，它将呈现 CircularProgressIndicator。一旦未来完成，它将再次呈现 - 这次显示您的数据。

类似这样的东西（我没有尝试编译，所以可能需要一些更正）：

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> {

  final fb = FirebaseDatabase.instance;
  List<PostModels> postmodal = [];
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  var pro;
  Future<void> _future;

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

  Future<void> getPostList() async {
    final values = await http.get(Uri.parse(
        'https://officialnasproject-default-rtdb.firebaseio.com/Schools/${pro.upin1}/School-Posts.json'));
    var val = json.decode(values.body) as Map<String, dynamic>;

    val.forEach((key, value) {
      PostModels postModels = new PostModels(
        value['PostContent'],
        value['PostUserName'],
        value['PostDate'],
        value['PostUserRole'],
        value['PostTitle'],
        value['PostUploader'],
        value['Upin'],
      );
      postmodal.add(postModels);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<void>(
             future: _future,
             builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
if (snapshot.connectionState==ConnectionState.waiting) return CircularProgressIndicator();

return Container(
        child: Flexible(
          child: postmodal.length == 0 ? 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(
                child: Column(
                    children: <Widget> [
                      Text(PostUserName,),
                     Text('@'+PostUserRole,),
                      Text(PostTitle,),
                      Text(PostContent),
                ],
            ),
        ),
    );
  }
}