The argument type 'String?' can't be assigned to the parameter type 'String' because 'String?' is nullable and 'String' isn't in Text widget - flutter

I am trying to display the name and email of the person when he logs in to the profile screen using Getx
Column(
children: [
Text(
controller.userModel!.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Kprimarycolor,
),
),
Text(
controller.userModel!.email,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Kprimarycolor,
),
),
],
),
],
but this error keep showing Error in vs code
and Error in terminal
the related code to name and email is
class UserModel {
late String? userId, email, name, pic;
UserModel({
required this.userId,
required this.email,
required this.name,
required this.pic,
});
UserModel.fromJson(Map<dynamic, dynamic> map) {
userId = map['userId'];
email = map['email'];
name = map['name'];
pic = map['pic'];
}
toJson() {
return {
'userId': userId,
'email': email,
'name': name,
'pic': pic,
};
}
}
I tried to add .toString() and as String but the error keeps showing after debugging

Column(
children: [
Text(
controller.userModel!.name!,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Kprimarycolor,
),
),
Text(
controller.userModel!.email!,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Kprimarycolor,
),
),
],
),
],
I added '!' character, it should work.

In your model, late String? userId, email, name, pic; and #Salih Can answer will be work.
Here, String? means string can accept null value. But Text widget don't accept null value. You need to use bang operator ! to handle it and by adding ! means this value is not null anymore. A better practice would be checking if it is null or not, then assign on Text. It can be
Text(myVal==null? "defalut value": myVal)
Text(myVal??"default Value")
if(myval!=null) Text(myVal) and it will render only if string is not null.

Related

Dynamically load list of words from API as map in highlight_text: ^1.6.0

I need to highlight some words in a text. I used highlight_text 1.6.0.
Map<String, HighlightedWord> words = {
"Flutter": HighlightedWord(
textStyle: textStyle,
),
"words": HighlightedWord(
textStyle: textStyle,
),
};
TextHighlight(
text: text,
words: words,
matchCase: false,
textStyle: TextStyle(
fontSize: 14.0,
color: Colors.black,
),
textAlign: TextAlign.justify,
)
It is working fine when given static values.
Is it possible to load the highlighted words from API like a list instead of the map?
List=["Flutter", "Words"]
Lets assume you get this sample list from api:
List sample = ["Flutter", "Words"];
then you can use fromIterable:
var result = Map<String, HighlightedWord>.fromIterable(sample,
key: (v) => v,
value: (v) => HighlightedWord(
textStyle: textStyle,
),
);
then use result in TextHighlight:
TextHighlight(
text: text,
words: result,
matchCase: false,
textStyle: TextStyle(
fontSize: 14.0,
color: Colors.black,
),
textAlign: TextAlign.justify,
)

Flutter apply condition on text widget if data isnt available

I am showing data in text widget like this
Text(
posts[position]['OrderDetailModifiers'][0]['ModifierName'].toString() ?? 'N/A',
style: TextStyle(
fontFamily: 'SFPROBOLD',
fontSize: 13, color: Colors.grey),
),
Issue is some time posts[position]['OrderDetailModifiers'] is null
right now its look like this
"OrderDetailModifiers": [
{
"ModifierName": "Single",
}
]
But some time its look like
"OrderDetailModifiers": [
]
Need to know how can I apply condition in my text widget if its null or not available so don't show text widget.
You can make if statement in your widget tree.
if (posts[position]['OrderDetailModifiers'].isNotEmpty)
Text(
posts[position]['OrderDetailModifiers'][0]['ModifierName'].toString(),
...
),
You can simply check the length and then show
Text(
posts[position]['OrderDetailModifiers'].length>0?posts[position]['OrderDetailModifiers'][0]['ModifierName'].toString(): 'N/A',
style: TextStyle(
fontFamily: 'SFPROBOLD',
fontSize: 13, color: Colors.grey),
),
Try using null-aware operators like this:
void main() {
printFirstModifierName(data); // Azerty
printFirstModifierName([]); // N/A
printFirstModifierName(null); // N/A
}
void printFirstModifierName(List<Map<String, dynamic>> data) {
print((data?.firstOrNull ?? const {})['ModifierName']?.toString() ?? 'N/A');
}
extension ListX<T> on List<T> {
T get firstOrNull => isEmpty ? null : first;
}
final data = [
{ 'ModifierName': 'Azerty' },
{ 'ModifierName': 'Qwerty' },
{ 'ModifierName': 'Tyuiop' },
];

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

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.
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,
)
],
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 ?? ""
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.

Flutter use reusable method in class

I am new to flutter, I want to create classes that encompass some functionality of my code. Example here, I have a class that manages my notifications.
As you can see I set the status of my notifications to be able to use them more easily. I have a success status, an error, etc ... but for now I have to rewrite all the code in each method.
How do I set the appearance of a default notification and then inject this code into my methods? In each method I want to be able to change the title and description but I don't want to change the colors manually. They must be defined in my method.
My class :
import 'package:flutter/material.dart';
import 'package:flushbar/flushbar.dart';
import 'package:app/utils/colors.dart';
class MyInfoBar extends Flushbar {
final String title;
final String description;
MyInfoBar({
#required this.title,
#required this.description,
});
Future information(BuildContext context)
{
return Flushbar(
flushbarPosition: FlushbarPosition.TOP,
duration: Duration(seconds: 3),
icon: Icon(
Icons.info_outline,
size: 28.0,
color: Colors.white,
),
shouldIconPulse : false,
backgroundColor: MyColors.colorContrastPurple,
titleText: Text(title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.white)),
messageText: Text(description, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, color: Colors.white)),
).show(context);
}
Future success(BuildContext context)
{
return Flushbar(
flushbarPosition: FlushbarPosition.TOP,
duration: Duration(seconds: 3),
icon: Icon(
Icons.check_circle_outline,
size: 28.0,
color: Colors.white,
),
shouldIconPulse : false,
backgroundColor: MyColors.colorContrastGreen,
titleText: Text(title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.white)),
messageText: Text(description, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, color: Colors.white)),
).show(context);
}
Future error(BuildContext context)
{
return Flushbar(
flushbarPosition: FlushbarPosition.TOP,
duration: Duration(seconds: 3),
icon: Icon(
Icons.error_outline,
size: 28.0,
color: Colors.white,
),
shouldIconPulse : false,
backgroundColor: MyColors.colorContrastRed,
titleText: Text(title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.white)),
messageText: Text(description, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, color: Colors.white)),
).show(context);
}
}
And when I want to use it :
MyInfoBar(title: "title", description: "description",).information(context);
Is this the right way to go?
You are almost there!
class MyInfoBar extends Flushbar {
// No need to store the values
MyInfoBar({
#required String title,
#required String description,
FlushbarPosition flushbarPosition = FlushbarPosition.TOP, // This is a default value. If you do not pass this property to the constructor, FlushbarPosition.TOP will be considered
Duration duration = const Duration(seconds: 3), // Same here but notice the const keyword. This is because default values should always be constant
bool shouldIconPulse = false,
// Other properties here and their default values. If you specify no default value, they will be null.
}) : super( // Now send these properties to the parent which is Flushbar
titleText: Text(title), // add default styling if you want
messageText: Text(description),
duration: duration,
shouldIconPulse: shouldIconPulse,
// Etc.
);
// So what we are doing here is creating a Flushbar with some default properties and naming it MyInfoBar.
// Now whenever you instantiate MyInfoBar, you get the default notification and you can of course adjust the properties.
// Static methods are cleaner in this context as in your example,
// you are instantiating this class but only using it to instantiate
// a new Flushbar thus eliminating the purpose of the first object you created.
static Future success({
#required String title,
#required String description,
#required BuildContext context
}) {
return MyInfoBar(title: title, description: description).show(context); // Other properties get the default values as you have not specified any here.
}
// Similarly you can define other methods.
}
Now to access it:
MyInfoBar.success(title: "Hello World", description: "Beep boop!", context: context);
I wrote this code here directly so there may be some typos but, I hope you get the idea.

Update flutter font with a function

I want to update the displaying font in flutter using a function.I've tried with following method but it won't update.I can't find the problem.
Function
_fontselect(String ){
if (_character==1) {
return "Font";
} else{
return "Font2";
}
}
context
Center(child: Text(text,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily:_fontselect(String),
fontWeight: FontWeight.bold,
fontSize: 28.0,
color: Colors.red)
),
),
Use Ternary Operator within the fontFamily itself.
Center(child: Text(text,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _character==1 ? "Font" : "Font2",
fontWeight: FontWeight.bold,
fontSize: 28.0,
color: Colors.red)
),
),
Your function needs a String variable to use inside of the function.
_fontselect(String character){
if (character==1) {
return "Font";
} else{
return "Font2";
}
}
Also it looks like character is an int but you are sending a String over to the function you should call the function with an int if this makes more sense.