Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show Icon in Text widget in flutter?

Tags:

flutter

I want to show an icon in text widget. How do I do this ?

The following code only shows the IconData

Text("Click ${Icons.add} to add"); 
like image 907
UVic Avatar asked Jul 01 '19 18:07

UVic


People also ask

How do I add Icons to text widget in Flutter?

The simplest way to create a button with icon and text in Flutter is to use the new Material button called ElevatedButton with an icon constructor. ElevatedButton. icon() gives you the ability to add the icon and label parameter to the button.

How do I show Icons on Flutter?

You can wrap Icon() widget with InkWell or alternatively GestureDetector() widget to make icons clickable in your Flutter app.

How do you put Icons before text in Flutter?

“icon before text in flutter” Code AnswerFlutter has WidgetSpan() to add a widget inside the RichText(). You can treat the child of WidgetSpan like the usual widget.


2 Answers

Flutter has WidgetSpan() to add a widget inside the RichText().

Example use:

RichText(   text: TextSpan(     children: [       TextSpan(         text: "Click ",       ),       WidgetSpan(         child: Icon(Icons.add, size: 14),       ),       TextSpan(         text: " to add",       ),     ],   ), ) 

Above code will produce:

image

You can treat the child of WidgetSpan like the usual widget.

like image 121
dennbagas Avatar answered Oct 11 '22 02:10

dennbagas


An alternative might be to use emoji.

In Dart, strings supports escape sequences for special characters. For unicode emoji, you can use \u and curly braces with emoji hex code inside. Like this:

Text('Click \u{2795} to add') 

The result is:

enter image description here

You can find a complete unicode emoji list here: http://unicode.org/Public/emoji/1.0/emoji-data.txt

like image 44
GaboBrandX Avatar answered Oct 11 '22 04:10

GaboBrandX