从 FutureBuilder<DataSnapshot> 调用了 getter 'value'答案

【问题标题】：The getter 'value' was called on null from FutureBuilder<DataSnapshot>从 FutureBuilder<DataSnapshot> 调用了 getter 'value'
【发布时间】：2020-12-14 02:54:58
【问题描述】：

我可以从这两件事中得到这个结果（来自Firebase Realtime Database的数据结构和下面的代码）。

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class GetMealScreen extends StatefulWidget {
  @override
  _GetMealScreenState createState() => _GetMealScreenState();
}

class _GetMealScreenState extends State<GetMealScreen> {

  DatabaseReference itemRef = FirebaseDatabase.instance.reference().child("testtest").child("test");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
        Container(
          child:
          FutureBuilder<DataSnapshot>(
            future: itemRef.once(),
            builder: (context, snapshot) {

              List<String> menuList = [
                snapshot.data.value["tt"].toString(),
              ];

              final double card_width = 370;
              final double card_upper_height = 210;

              return
                Container(
                  height: card_upper_height,
                  width: card_width,
                  child:
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
                    child: Swiper(//
                      control: SwiperControl(
                        color: Colors.white,
                      ),
                      pagination: SwiperPagination(
                          alignment: Alignment.bottomRight
                      ),
                      itemCount: menuList.length,
                      itemBuilder: (BuildContext context, int index){
                        return
                          Text(
                            menuList[index],
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 40,
                              color: Colors.black,
                            ),
                          );
                      },
                    ),
                  ),
                );
            },
          ),
        ),
    );
  }
}

但问题是每当我尝试访问此屏幕时，都会出现以下错误。

Performing hot reload...
Syncing files to device AOSP on IA Emulator...
Reloaded 5 of 685 libraries in 702ms.
I/flutter (15990): hi

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building FutureBuilder<DataSnapshot>(dirty, state: _FutureBuilderState<DataSnapshot>#84ed7):
The getter 'value' was called on null.
Receiver: null
Tried calling: value

The relevant error-causing widget was: 
  FutureBuilder<DataSnapshot> file:///Users/mingukkim/tubuc1.1.3/lib/GetMealMenu.dart:21:11
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      _GetMealScreenState.build.<anonymous closure> (package:Tubuc/GetMealMenu.dart:26:31)
#2      _FutureBuilderState.build (package:flutter/src/widgets/async.dart:751:55)
#3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4683:28)
#4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4566:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

我认为它已经出现是因为 snapshot.data.value["tt"].toString() 返回 null 值，但事实并非如此，所以我不知道出了什么问题。另外，我在 Google 上发现了类似的问题，但我找不到像我这样的 FutureBuilder 的问题。你能告诉我有什么问题吗？

提前谢谢你。

【问题讨论】：

您正试图在 Future 完成之前访问 snapshot.data.value。您需要将其包装在 if (snapshot.hasData) 中，以便在 Future 返回后执行您的代码。看看 flutter.dev 上的类作为一个很好的例子：api.flutter.dev/flutter/widgets/FutureBuilder-class.html

标签： firebase flutter dart firebase-realtime-database

【解决方案1】：

尝试以下方法：

if(snapshot.hasData){
  List<String> menuList = [
                snapshot.data.value["tt"].toString(),
              ];

              final double card_width = 370;
              final double card_upper_height = 210;

              return
                Container(
                  height: card_upper_height,
                  width: card_width,
                  child:
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
                    child: Swiper(//
                      control: SwiperControl(
                        color: Colors.white,
                      ),
                      pagination: SwiperPagination(
                          alignment: Alignment.bottomRight
                      ),
                      itemCount: menuList.length,
                      itemBuilder: (BuildContext context, int index){
                        return
                          Text(
                            menuList[index],
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 40,
                              color: Colors.black,
                            ),
                          );
                      },
                    ),
                  ),
                );
            },
       // By default, show a loading spinner.
        return CircularProgressIndicator();
         },
          }

由于FutureBuilder用于异步操作，所以使用hasData使其从数据库中获取值后进入snapshot.data.value["tt"].toString(),。

【讨论】：