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:
Related
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,
),
I want to create a icon from a text like currency symbol. Currency symbols are not available in material icons and i don't want to use any third party library. I want to convert the text string like '$' to Icons and use them.
As per your requirement try below code hope its help to you:
Using \ character
Text(
'\$ Search',
),
Your Output Screen like->
Using Flutter Unicode character. You found Unicode character here
Text(
'Your \u{1F4B2} Symbol',
),
Your result screen like->
You can add any Symbol in between text
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Text('Your'),
Icon(Icons.add),
Text('Icon'),
],
),
Your result screen like->
Or in VS Code you can used Windows + . keys and add any symbol on your need
Please try this one. 0024 is Unicode for $
Icon( IconData(0x0024, fontFamily: 'MaterialIcons'),size: 50, ))
I am making this showcaseview in my app using this library. But I have a long text as the description. But the text will just be in one line like this:
I really want the text to be in multiple lines. A solution would be to do \n to make it a new line, but i would have to do that every time i think it is a long line, and it would be a nightmare.
Is there a better way i could do this?
This is my code:
Showcase(
key: _graph,
title: 'Diagram',
description:
'This is a long description. This is a long description. This is a long description. This is a long description. This is a long description. This is a long description. ',
child: Container(
height: _size.height * 0.3,
child: Diagram()
),
),
Show Case View is supposed to provide a short description of your widget not show multi lines and long descriptions.
For a Text you can try this:
Container(
width: 100,
child: Text(
'This is a long description. This is a long description. This is a long description. This is a long description. This is a long description. This is a long description. ',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
If you want to provide a longer or custom description try using Showcase.withWidget() instead of just Showcase() The takes a container: property where you can build a custom description widget that incorporates things like RichText().
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 want to move the box that is full of red background over there to the position of the empty box.
In other words, I want to insert a container right next to the point where TextFormField ends.
Is this something that can be implemented in Flutter? Or is there no way?
-- UPDATE
I actually want to add a "send" Icon to the end of the text. All the examples I looked up were always going to the end of the Containers due to Rows, as shown in the photos I posted. Since the position of the send icon will always change, depending on the length of the text, in real time, this problem feels very difficult to me. and also for your information, this is not Text, but TextField or TextFormField widget.
Unfortunately, there is no way of doing this since TextFormField accepts string only and not a widget. Also, according to material guidelines, any such widget should be at the end of the text field as a suffix such as:
TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Enter a message",
suffixIcon: IconButton(
onPressed: () => _controller.clear(),
icon: Icon(Icons.clear),
),
),
)
May I ask what is the purpose?! maybe we can help find better solution then?
but if we have to then I can think of 2 ways.
1- Include the box as a Text - For example ▀ (Alt + 223)
var box = ▀
Text("efwewewefwewefe$box"),
2- Option 2: Wrap in a Stack widget
Stack(
children: [
Text("efwewewefwewefe"),
Container(height:5, width:5, color: Colors.red]),