firebase - 如何在 Flutter for Web 中使用 api 从实时数据库中获取数据

Question

我正在尝试从 web 应用程序的颤振中从实时数据库火力库中获取数据。所以，我尝试了几种方法，但无法使其工作。这些是我当前用于从实时数据库中检索数据的代码。

我正在尝试将数据提取到列表视图中。

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/App/${pro.upin1}/App-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(
  margin: EdgeInsets.all(15),
  child: GestureDetector(
    onTap:(){},

  child: Container(
    child: Column(
      children: [
        Container(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(15, 10, 15, 12),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: InkWell(
                      onTap: (){},
                  child: Text(PostUserName,),),),
                  SizedBox(height: 2,),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text('@'+PostUserRole,),),
                ],
              ),
            ),
          ),

          SizedBox(height: 10,),
          Container(
            padding: EdgeInsets.fromLTRB(15, 15, 15, 0.0),
            child: Column(
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(PostTitle,),),

          SizedBox(height: 10,),
          Text(' ' + ' ' + ' ' + PostContent, style: TextStyle(fontSize: 15,),),
          SizedBox(height: 20,),
              ],
            )
          ),
           ],
         ),
       ),
     ),
   );
 }
}

这些是我用于获取和显示数据的代码，但我不知道它为什么不起作用。有人可以帮助我吗，这对我来说意味着世界，因为我试图连续三天解决这个问题但还没有解决。

标签： firebaseflutterfirebase-realtime-databaseweb-applications