“错误状态：无元素”错误 - Flutter Future Builder

如何解决“错误状态：无元素”错误 - Flutter Future Builder

我收到一条错误消息：

Bad state: No element
The relevant error-causing widget was: 
  Expanded file:///C:/Users/***/AndroidStudioProjects/***/lib/ui/screens/price-screen.dart:142:23

错误是指我代码的这一部分：

Expanded(
                          child: (snapshot.connectionState ==
                                  ConnectionState.waiting)
                              ? Container()
                              : Graph(snapshot.data,crypto,graphType))

我的 snapshot.data 等于 'futureData'，也就是 priceAndTimes。我在 getData() 中写了一些打印语句来查看 priceAndTimes 是否为空并且不为空。我不明白为什么我会收到这个错误。

import 'package:bitcoin_ticker/data/coin-data.dart';
import 'package:bitcoin_ticker/ui/components/crypto-card.dart';
import 'package:bitcoin_ticker/ui/components/graph.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import '../../constants.dart';
import 'package:crypto_font_icons/crypto_font_icons.dart';
import '../components/toggle-button.dart';

class PriceScreen extends StatefulWidget {
  @override
  PriceScreenState createState() => PriceScreenState();
}

class PriceScreenState extends State<PriceScreen> {
  String currency = 'USD';
  String graphType = '1M';
  String crypto = 'LTC';
  Map<String,List<String>> pricesAndTimes = {};
  Future<Map> futureData;

  var isSelectedCrypto = <bool>[false,false,true];
  var isSelectedGraph = <bool>[false,true,false];
  var isSelectedCurrency = <bool>[true,false];

  Future<Map> getData() async {
    try {
      pricesAndTimes = await CoinData(currency,graphType).getCoinData();
  print("pricesAndTimes");
  print(pricesAndTimes);
    } catch (e) {
      print(e);
    }
    return pricesAndTimes;
  }

  @override
  void initState() {
    super.initState();
    futureData = getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Crypto Watcher'),),body: FutureBuilder<Object>(
          future: futureData,builder: (context,snapshot) {
            return Stack(
              children: <Widget>[
                Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[
                      Center(
                          child: ToggleButtons(
                        borderWidth: 10,children: <Widget>[
                          CryptoCard(
                            currency,snapshot.connectionState == ConnectionState.waiting
                                ? '---'
                                : pricesAndTimes['currentCoinPrices'][0],'Bitcoin',Icon(CryptoFontIcons.BTC),CryptoCard(
                              currency,snapshot.connectionState ==
                                      ConnectionState.waiting
                                  ? '---'
                                  : pricesAndTimes['currentCoinPrices'][1],'Ethereum',Icon(CryptoFontIcons.ETH)),snapshot.connectionState ==
                                      ConnectionState.waiting
                                  ? '---'
                                  : pricesAndTimes['currentCoinPrices'][2],'Litecoin',Icon(CryptoFontIcons.LTC)),],onPressed: (int index) {
                          setState(() {
                            for (int buttonIndex = 0;
                                buttonIndex < isSelectedCrypto.length;
                                buttonIndex++) {
                              if (buttonIndex == index) {
                                isSelectedCrypto[buttonIndex] = true;
                                crypto = cryptoAbbreviation[buttonIndex];
                              } else {
                                isSelectedCrypto[buttonIndex] = false;
                              }
                            }
                          });

                          futureData = getData();
                        },isSelected: isSelectedCrypto,selectedColor: Colors.amber,renderBorder: false,fillColor: Colors.transparent,)),Center(
                        child: ToggleButtons(
                          borderWidth: 0.0,splashColor: null,children: <Widget>[
                            ToggleButton('1D'),ToggleButton('5D'),ToggleButton('1M'),ToggleButton('1Y'),ToggleButton('5Y'),onPressed: (int index) {
                            setState(() {
                              for (int buttonIndex = 0;
                                  buttonIndex < isSelectedGraph.length;
                                  buttonIndex++) {
                                if (buttonIndex == index) {
                                  isSelectedGraph[buttonIndex] = true;
                                  graphType = graphTypeList[buttonIndex];
                                } else {
                                  isSelectedGraph[buttonIndex] = false;
                                }
                              }
                            });
                            futureData = getData();
                          },isSelected: isSelectedGraph,Expanded(
                          child: (snapshot.connectionState ==
                                  ConnectionState.waiting)
                              ? Container()
                              : Graph(snapshot.data,graphType)),Center(
                          child: ToggleButtons(
                        borderWidth: 0.0,children: <Widget>[
                          ToggleButton('USD'),ToggleButton('EUR'),ToggleButton('GBP'),onPressed: (int index) {
                          setState(() {
                            for (int buttonIndex = 0;
                                buttonIndex < isSelectedCurrency.length;
                                buttonIndex++) {
                              if (buttonIndex == index) {
                                isSelectedCurrency[buttonIndex] = true;
                                currency = currenciesList[buttonIndex];
                              } else {
                                isSelectedCurrency[buttonIndex] = false;
                              }
                            }
                            futureData = getData();
                          });
                        },isSelected: isSelectedCurrency,]),Center(
                    child: (snapshot.connectionState == ConnectionState.waiting)
                        ? CircularProgressIndicator()
                        : Container())
              ],);
          }),);
  }
}

解决方法

当您的流返回 null 值时会发生此错误。为确保发送到 UI 的数据不是 null，您可以检查快照是否有数据。如果没有，返回一个加载指示器。像这样：

FutureBuilder<Object>(
          future: futureData,builder: (context,snapshot) {
            if (!snapshot.hasData) return Center(child: CircularProgressIndicator());
            return Stack(
              children: <Widget>[
              
              // ... other lines
);

,

我意识到问题不在于我上面发布的代码，而在于引用的 Graph 文件来自

Expanded(
                          child: (snapshot.connectionState ==
                                  ConnectionState.waiting)
                              ? Container()
                              : Graph(snapshot.data,crypto,graphType))

我忘记检查那个文件了。