How to show Icon in Text widget in flutter?

Question

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\"         


        

Answer 1

You can use WidgetSpan() on Text.rich(). Here's a link for InlineSpan-class.

Answer 2

Another option is String.fromCharCode(int charCode)

This is icons.dart created by flutter team and charCodes are can found here.

RichText(
  text: TextSpan(
  style: TextStyle(
    color: Colors.black,
    fontSize: 24.0,
  ),
  text: 'This is alarm icon : ',
    children: <TextSpan>[
      TextSpan(
        text: String.fromCharCode(0xe190), //<-- charCode
        style: TextStyle(
        fontFamily: 'MaterialIcons', //<-- fontFamily
        fontSize: 24.0,
        color: Colors.red,
       ),
     )
   ],
  ),
)

And result :

Answer 3

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:

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

Answer 4

Try Wrap:

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    Text('Click'),
    Icon(Icons.add),
    Text('to add'),
  ],
)

Answer 5

Row Widget can be one solution for this issue, but you have to use different widgets to make it happen.

Follow below example.

Row(
   children: <Widget>[
     Text("Hi"),
     Icon(Icons.add),
     Text("Hello")
   ]
 )

Answer 6

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:

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