A non-null String must be provided to a Text widget - flutter - flutter

Question

I'm new to flutter and I'm learning it via a course on Udemy in this course we learn to create a simple BMI calculator which I did but the problem is that my app stats working perfectly and I can change the numbers and gender on it and sometimes it shows the result
<════════ Exception caught by widgets library ════════════
The following assertion was thrown building ResultsPage(dirty):
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 381 pos 10: 'data != null'
The relevant error-causing widget was:
ResultsPage
file:///D:/FlutterProjects/bmi_calculator/lib/input_page.dart:223:47
When the exception was thrown, this was the stack:
#2 new Text (package: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)>
I don't know exactly what the problem is I tried to read similar problems here but unfortunately, I couldn't find which text widget I pass empty. this is the code for my results page
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')
],
),
);
}
}
EDIT:
Thanks, everyone for responding to my issue.
All of the solutions worked for me and stopped my app from crashing. and I used this method
Text(
bmiResult ?? '',
style: kResultTextStyle,
),
Text(
resultText ?? '',
style: kNumberTextStyle.copyWith(
fontSize: 100.0,
fontWeight: FontWeight.bold,
),
),
Text(
interpretation ?? '',
textAlign: TextAlign.center,
style: kBMIResultTextStyle,
)
to keep my code short and concise. But, I also realized something else in my code. I have three conditions in my app, which as you can guess are underweight, normal, and overweight. When I calculate the results, the application shows resultText and interpretation only if it's overweight. if the result is normal or underweight, it doesn't show them, and I assume it means this is what makes my app to crash because somehow it can't get the Text strings which I assigned for normal and underweight.

Answer 1

Either initialize the values to be not null or simply using ?? Operator to make this empty string when null is detected
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

You just need to check if your variables : resultText, bmiResult, interpretation are not null because the Text widget cannot receive null value.
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,
)
Or, you can just use the null-coalescing operator ?? to simplify :
this.interpretation ?? ""

Answer 3

You have at least 3 Text widgets where the data property is initialized from class members: resultText, bmiResult, interpretation. It looks like one of these member is null. To avoid the red screen you need to:
Call widget with initialized props:
ResultsPage(
resultText: 'Result Text',
bmiResult: 'BMI result',
interpretation: 'interpretation',
)
Set default values for ResultsPage's properties in constructor (e.g. empty string)
ResultsPage({this.resultText = '', this.bmiResult = '', this.interpretation = ''})
Use null aware feature in Text() widgets:
Text(resultText ?? 'n/a'),
This means that Text data will be equal to value of resultText if it is not null, or n/a if is null.
empty string will be used as data.