I am trying to change the text on this application I am developing currently. It currently says "Training resources" and I want to capitalize it to "Training Resources". When I go into the Flutter Inspector and click into the text, I find that it is called here as "title".
title: Text(
title,
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
I then go to where "title" is being assigned as a variable and find this.
title = widget.data!.title;
I am not sure what to do next. My best guess is to look for how widget is being built, but I don't know where to start looking. Any suggestions?
EDIT:
Picture of the screen with "Training resources" as the title
Picture of the "Training resources" text on a button
My end goal is to make this say "Training Resources" (just capitalize the 'R'). I cannot find where this "title" variable is called as a string though. My understanding of widgets in Flutter is limited.
You can create a string extension to capitalize the first letter of each word in the sentence
extension StringExtension on String {
/// convert input string to string with capital letter of each word format
/// i.e this is test => This Is Test
String get toCapitalizeFirstofEach {
return split(" ").map((str) {
return str.toSentence;
}).join(" ");
}
/// convert input string to sentence format
/// i.e this is test => This is test
String get toSentence => length <= 1
? '$toLowerCase()'
: '${this[0].toUpperCase()}${substring(1)}';
}
Then use it in any strings as
title: Text(
title.toCapitalizeFirstofEach,
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
Related
I have the following function, where within a ListBody I map List values, I have a time parameter that returns a time. This contains unnecessary digits and I want to format it.
In other normal List situations I use the function
var timeFormat = DateFormat("HH:mm");
String timetest = timeFormat.format(my_data);
How can I implement my above function to format the time in the below RichText, where I enter data into TextSpan from the map, and cannot build it as a var outside and then call it in?
var mappedValues = ListBody(
children: [...mappedList.map((m) => RichText (
text: TextSpan(
children: <TextSpan> [
TextSpan(text: m.time!.toLocal().toString(), style: TextStyle(
fontSize: 18 ,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans'
)
),
]
)))]);
Thank you
Update
Example of initial output
2022-03-05 23:24:00.000
My function will turn it to
23:24
Then you should be able to create a method within this widget that takes the Datetime (m.time) as input and returns the formatted time, as:
String getFormattedTime(DateTime time) {
var timeFormat = DateFormat("HH:mm");
String timePortion = timeFormat.format(time);
return timePortion;
}
Then inside your widget just call it:
TextSpan(text: getFormattedTime(m.time!))
You could also move this method into a common utility class so you can reuse it throughout your app. Let me know if that’s what you looking for and works for your purposes.
Check out this Gist (make sure to run it through DartPad) that I created that illustrates my point. Another suggestion would be to use ListView in favor or ListBody as it is more robust.
You should get output that looks like this:
Let me know if that's clear.
I have an api from which I am fetching messages. These messages might contain emoji.
When it does contain emoji Text Widget is not displaying it correctly.
I just want to display them on the screen. Help if possible.
Thank you :)
class Message{
String text;
Message(){
this.text = get_data_from_api()['text'];
}
}
message = Message();
return Container(
child: Text(message.text),
);
No Displaying text with Emojis on Flutter
won't do it. I can do that but it only works if you have emoji in a string, that is explicitly plasing an emoji in string works fine for me. but when I am using something similar to the code above. I am getting, this
enter image description here
digging more into it I found that if I print my response on console it is
"ðððð"
and if I print a emoji it is 😭
So
I am using
Response.fromStream(await request.send())
from http/http.dart
So is that the problem ?
I did figured it out
I was taking data from an API. So while decoding for some reason it was not decoding utf-8 so what I needed to do was add
utf8.decode(response.bodyBytes);
in place of response.body and it was solved
Reference: Emoji and accent encoding in dart/flutter
If you have an emoji image explicitly present in the response from your API and you want to display it in your text, your should try adding WidgetSpan inside your RichText below is an example of how to do it :
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Click ",
),
WidgetSpan(
child: Icon(Icons.add, size: 14),
),
TextSpan(
text: " to add",
),
],
),
),
In the above example they have used the material icon( Icon(Icons.add)). If you want to replace that from the image your get from the API, you can use ImageIcon instead of Icon widget. Follow this link to know how to use ImageIcon : https://www.woolha.com/tutorials/flutter-using-imageicon-widget-examples
Reference : Add image to RichText element
I have the flutter code to display the showcase or highlights using https://pub.dev/packages/showcaseview/example
I want to show a long description which is 3 lines, is this possible?
now when my description is long it will show 1 line
Showcase(
key: _one,
description: 'I WANT ADD LONG DESCRIPTION HERE,I WANT ADD LONG DESCRIPTION HERE, I WANT ADD LONG DESCRIPTION HERE, ',
child: Icon(
Icons.menu,
color: Colors.black45,
),
),
Simply add \n in your text. Something like:
'I WANT ADD LONG DESCRIPTION HERE,\nI WANT ADD LONG DESCRIPTION HERE,\nI WANT ADD LONG DESCRIPTION HERE, ',
Result:
Why can't I set the accents as a color?
This is my code :
Text('Hello',
style: TextStyle(color: Colors.accents),
)
In reality accents is not a color but rather a list(const List accents) that contains a lot of colors (accent colors).
Its implementation is :
static const List<MaterialAccentColor> accents = <MaterialAccentColor>[
redAccent,
pinkAccent,
purpleAccent,
deepPurpleAccent,
indigoAccent,
blueAccent,
lightBlueAccent,
cyanAccent,
tealAccent,
greenAccent,
lightGreenAccent,
limeAccent,
yellowAccent,
amberAccent,
orangeAccent,
deepOrangeAccent,
]
You can find it on the flutter website via this link
Now that we know it's a list, to retrieve one of its elements, just do List_name[element_index]. So in our case we'll do accents [color_index].
A small example of use :
Text('Hello',
style: TextStyle(color: Colors.accents[0]),
),
Colors.accents[0] for redAccent
Thanks.
Hi #martiX4 i found that you are passing invalid type to TextStyle widget now as answer given by #abhishek you can use index accents[index] based on your condition
for example if you use redAccent then you can use
List<MaterialAccentColor> accents = <MaterialAccentColor>[
redAccent,blueAccent];
// accents[0] => for redAccent
// accents[0] => for blueAccent
Text('Hello', style: TextStyle(color: Colors.accents[0]),)
accents is List so you can't be assigned to the color
/// The material design accent color swatches.
static const List<MaterialAccentColor> accents = <MaterialAccentColor>[
redAccent,
pinkAccent,
purpleAccent,
deepPurpleAccent,
indigoAccent,
blueAccent,
lightBlueAccent,
cyanAccent,
tealAccent,
greenAccent,
lightGreenAccent,
limeAccent,
yellowAccent,
amberAccent,
orangeAccent,
deepOrangeAccent,
];
you can use accents color using index value
Text('Hello',
style: TextStyle(color: Colors.accents[0]),
)
I was wondering if there was a way to customize a TextFormField with more accuracy. I don't want to change the whole text color, but only part of it. For instance, below is the above mention TextFormField and I want to highlight "には" (ie what is between curly braces) by adding a red color. I would like to avoid creating multiple TextFormFields to do this because it will be a mess to assemble the text afterwards but I don't know if it is possible.
WARNING
I am not looking for the RichText widget since I want to customize a TextFormField Widget or any Widget with an editable text.
This Widget is used in a List so I would like not to use a "preview" widget with my input widget.
AND
I don't need a full RichTextEditor since the User should not be able to modify the color. Only parts between curly braces should automatically be colorised.
Looking forwards to see what kind of solutions you guys could come up with !
I've finally found a gist that match my request. For those who are searching an answer to my question, you seems to have to override EditableText (How to change color of particular text in a text field dynamically?). But, it's only a draft and it is not working correctly as for today. I'll try to follow this path and add my answer on this post.
EDIT:
The only thing you have to change to this answer is the following:
#override
TextSpan buildTextSpan() {
final String text = textEditingValue.text;
int textLength = text.length;
if (widget.annotations != null && textLength > 0) {
var items = getRanges();
var children = <TextSpan>[];
for (var item in items) {
if (item.range.end < textLength) {
children.add(
TextSpan(style: item.style, text: item.range.textInside(text)),
);
} else if (item.range.start <= textLength) {
children.add(
TextSpan(
style: item.style,
text: TextRange(start: item.range.start, end: text.length)
.textInside(text)),
);
}
}
return new TextSpan(style: widget.style, children: children);
}
return new TextSpan(style: widget.style, text: text);
}
}
Explanation:
You simply have to correct the buildTextSpan part. The error was raised when you delete a character because the Range could raise an exception when the range end was not meet.
This might not be exactly what you want, but may be this can help you get started in a way.
Use RichText widget.
var text = new RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 10.0,
),
children: <TextSpan>[
new TextSpan(text: 'Text1'),
new TextSpan(text: 'Text2', style: new TextStyle(),
],
),
);