Flutter-FutureBuilder-未获取AsyncSnapshot数据

Question

我正在尝试使用 Future 从 firestore 数据库中获取单个字符串数据，然后在 FutureBuilder 中使用该数据。但是在快照数据中获得null 值。提供了下面的完整代码。告诉我哪里出错了。

我可以在fetchPost() 函数中打印数据。从firestore获取数据后，它进入FutureBuilder，

但快照数据为空-AsyncSnapshot<String>(ConnectionState.done, null, null)

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

Future <String>fetchPost() async  {
  final DocumentReference documentReference = Firestore.instance.document("myData/dummy");
   documentReference.get().then((datasnapshot){
    if(datasnapshot.exists){
        print("get data" +datasnapshot.data['url']); ///this printing data //in console
        return datasnapshot.data['url'];


    }
  }).catchError((e){
    print("Error");
    print(e);
  });

}


void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<String> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: post,
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              print ("snapshot has data");
              print (snapshot); // this printing 'AsyncSnapshot<String>(ConnectionState.done, null, null)'
              print (snapshot.data);// this printing null
              if (snapshot.hasData) {

                return Text(snapshot.data);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // By default, show a loading spinner
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

用后面的代码更改你的FutureBuilder，它应该适合你

  FutureBuilder(
    future: Firestore.instance.collection("myData").document("dummy").get(), 
    builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
      switch (snapshot.connectionState) {
        case ConnectionState.none:
          return Text('Press button to start.');
        case ConnectionState.active:
        case ConnectionState.waiting:
          return Text('Awaiting result...');
        case ConnectionState.done:
          if (snapshot.hasError)
            return Text('Error: ${snapshot.error}');
          return Text('Result: ${snapshot.data}');
          // You can reach your snapshot.data['url'] in here
      }
      return null; // unreachable
    },
  );

Answer 2

我使用您的示例小部件构建采取了更详细的方法，并展示了如何显示进度消息。

    child: FutureBuilder<String>(
        future: post,
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                        switch (snapshot.connectionState){
                          case ConnectionState.none:
                            return Container(
                                child: Center(
                                    child: Text(
                                        'No Connection Message')
                                    )
                                )
                            );
                          case ConnectionState.active:
                          case ConnectionState.waiting:
                            return Container(
                                child: Center(
                                    child: Text(
                                        'Loading_message..'
                                    )
                                )
                            );
                          case ConnectionState.done:
                            if (snapshot.data.isEmpty){
                              return Container(
                                  child: Center(
                                      child: Text(
                                          'No Data available'
                                      )
                                  )
                              );
                            } else {
                              return ListView.builder(
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (BuildContext context, int index) {
                                    return ListTile(
                                      title: Text(snapshot.data[index].displayValue,
                                          softWrap: true),
                                      onTap: () {
                                        Navigator.push(context, new MaterialPageRoute(builder: (context) {
                                          return DetailItem(dataItem: snapshot.data[index]);
                                        }));
                                      },
                                    );
                                  }
                              );
                            }
                        }
                        return null;
                      }

享受吧！