如何显示图标在文本窗口小部件在颤动?

我想在文本小部件中显示一个图标。我如何做到这一点?

下面的代码只显示 IconData

Text("Click ${Icons.add} to add");
115333 次浏览

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

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

You can use this Package to achieve this.

I am not able to find the pub of this package.

Here is the Implementation.

    RealRichText(
[
TextSpan(
text: "A Text Link",
style: TextStyle(color: Colors.red, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked.");
},
),
ImageSpan(
AssetImage("packages/real_rich_text/images/emoji_9.png"),
imageWidth: 24,
imageHeight: 24,
),
ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
imageWidth: 24,
imageHeight: 24,
margin: EdgeInsets.symmetric(horizontal: 10)),
TextSpan(
text: "哈哈哈",
style: TextStyle(color: Colors.yellow, fontSize: 14),
),
TextSpan(
text: "@Somebody",
style: TextStyle(
color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked");
},
),
TextSpan(
text: " #RealRichText# ",
style: TextStyle(color: Colors.blue, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked");
},
),
TextSpan(
text: "showing a bigger image",
style: TextStyle(color: Colors.black, fontSize: 14),
),
ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
imageWidth: 24,
imageHeight: 24,
margin: EdgeInsets.symmetric(horizontal: 5)),
TextSpan(
text: "and seems working perfect……",
style: TextStyle(color: Colors.black, fontSize: 14),
),
],
);

You can also check out below issue for more:

Flutter Issue #2022

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.

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

Another option is String.fromCharCode(int charCode)

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

enter image description 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 :

enter image description here

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'),
    ],
    ),
    )
    

For simple icons, You can use a Unicode character as regular text, just copy and paste.

You can search and copy Unicodes from this site

Text("Enjoy! 🔎❌💖🔥✅💜😍")

This method will work with any Text widget and package.

I think it's better to use the Row widget. here is an example

Row(
children: [
Icon(Icons.download_rounded),
Text(" Download")
],
)

You can use this function:

Widget _spanIcon(String text, IconData icon, TextStyle st) {
return Row(
children: [
Text(text,style: st,),
Text(
String.fromCharCode(icon.codePoint), //<-- charCode from icon data
style: TextStyle(
fontFamily: icon.fontFamily, //<-- fontFamily from icon data
fontSize: st.fontSize! + 4.0,//you can increase font size for icon here
color: st.color,
),)
],
);}

and then use it :

_spanIcon('11',Icons.access_alarm, TextStyle(fontSize: 14.0, color: Color.fromARGB(113, 0, 0, 0))),