How to show Icon in Text widget in flutter?

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.


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


Screenshot:

enter image description here


  • Using Wrap:

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

    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Click'),
        Icon(Icons.add),
        Text('to add'),
      ],
    )
    
  • Using Text.rich:

    Text.rich(
      TextSpan(
        children: [
          TextSpan(text: 'Click'),
          WidgetSpan(child: Icon(Icons.add)),
          TextSpan(text: 'to add'),
        ],
      ),
    )
    

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")
   ]
 )