必须向 Text 小部件提供非空字符串 - 颤振

Question

我是 Flutter 的新手，我正在通过 Udemy 上的一门课程学习它和性别，有时它会显示结果

在构建 ResultsPage(dirty) 时抛出了以下断言：

必须为 Text 小部件提供非空字符串。

'package:flutter/src/widgets/text.dart':

断言失败：第 381 行 pos 10: 'data != null'

相关的导致错误的小部件是：

结果页面 file:///D:/FlutterProjects/bmi_calculator/lib/input_page.dart:223:47

当异常被抛出时，这是堆栈：

#2 新文本（包：flutter/src/widgets/text.dart:381:10）

#3 ResultsPage.build (package:bmi_calculator/results_page.dart:50:19)

#4 StatelessElement.build (package:flutter/src/widgets/framework.dart:4749:28)

#5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4675:15)

#6 Element.rebuild (package:flutter/src/widgets/framework.dart:4369:5)>

我不知道到底是什么问题我试图在这里阅读类似的问题，但不幸的是，我找不到我传递为空的文本小部件。这是我的结果页面的代码

import 'package:bmi_calculator/bottom_button.dart';
import 'package:bmi_calculator/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'reusable_card.dart';

class ResultsPage extends StatelessWidget {
  ResultsPage(
      {@required this.resultText,
      @required this.bmiResult,
      @required this.interpretation});

  final String resultText;
  final String bmiResult;
  final String interpretation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Results'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Container(
              padding: EdgeInsets.all(15.0),
              alignment: Alignment.bottomLeft,
              child: Text(
                'Your Results',
                style: kTitleStyle,
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    bmiResult,
                    style: kResultTextStyle,
                  ),
                  Text(
                    resultText,
                    style: kNumberTextStyle.copyWith(
                      fontSize: 100.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    interpretation,
                    textAlign: TextAlign.center,
                    style: kBMIResultTextStyle,
                  )
                ],
              ),
            ),
          ),
          BottomButton(
              onTap: () => Navigator.pop(context), buttonTitle: 'ReCalculate')
        ],
      ),
    );
  }
}

---

编辑： 谢谢大家回复我的问题。 所有解决方案都对我有用，并阻止了我的应用程序崩溃。我用了这个方法

          Text(
            bmiResult ?? '',
            style: kResultTextStyle,
          ),
          Text(
            resultText ?? '',
            style: kNumberTextStyle.copyWith(
              fontSize: 100.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            interpretation ?? '',
            textAlign: TextAlign.center,
            style: kBMIResultTextStyle,
          )

保持我的代码简洁明了。但是，我也在我的代码中意识到了其他一些东西。我的应用程序中有三个条件，你可以猜到是体重不足、正常和超重。当我计算结果时，应用程序仅在超重时才显示resultText 和interpretation。如果结果正常或体重过轻，则不会显示它们，我认为这意味着这就是我的应用程序崩溃的原因，因为它无法获取我分配给正常和体重过轻的文本字符串。

Answer 1

要么将值初始化为不为空，要么仅使用 ??运算符在检测到 null 时生成此空字符串

                children: <Widget>[
                  Text(
                    bmiResult ?? "",
                    style: kResultTextStyle,
                  ),
                  Text(
                    resultText ?? "",
                    style: kNumberTextStyle.copyWith(
                      fontSize: 100.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    interpretation ?? "",
                    textAlign: TextAlign.center,
                    style: kBMIResultTextStyle,
                  )
                ],

Answer 2

您只需要检查您的变量：resultText、bmiResult、解释是否不为空，因为文本小部件无法接收空值。

                  Text(
                    this.bmiResult != null ? this.bmiResult : "",
                    style: kResultTextStyle,
                  ),
                  Text(
                    this.resultText != null ? this.resultText : "",
                    style: kNumberTextStyle.copyWith(
                      fontSize: 100.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    this.interpretation != null ? this.interpretation : "",
                    textAlign: TextAlign.center,
                    style: kBMIResultTextStyle,
                  )

或者，您可以只使用空合并运算符 ??简化：

this.interpretation ?? ""

Answer 3

您至少有 3 个 Text 小部件，其中 data 属性是从类成员初始化的：resultText、bmiResult、interpretation。看起来这些成员之一是null。要避免red screen，您需要：

1. 使用初始化的道具调用小部件：

ResultsPage(
  resultText: 'Result Text',
  bmiResult: 'BMI result',
  interpretation: 'interpretation',
)

1. 在构造函数中为ResultsPage的属性设置默认值（例如空字符串）

ResultsPage({this.resultText = '', this.bmiResult = '', this.interpretation = ''})

1. 在 Text() 小部件中使用 null 感知功能：

Text(resultText ?? 'n/a'),

这意味着如果文本data 将等于resultText 的值，如果它不是 null，或者n/a 如果是 null . 空字符串将用作数据。