如何在颤动的文本小部件中显示图标？

Question

我想在文本小部件中显示一个图标。我该怎么做呢 ？

以下代码仅显示 IconData

Text("Click ${Icons.add} to add");

Answer 1

Flutter 必须WidgetSpan()在RichText().

使用示例：

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

上面的代码会产生：

您可以WidgetSpan像通常的小部件一样对待孩子。

Answer 2

另一种可能是使用表情符号。

在 Dart 中，字符串支持特殊字符的转义序列。对于 unicode 表情符号，您可以使用 \u 和带有表情符号十六进制代码的花括号。像这样：

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

结果是：

您可以在此处找到完整的 unicode 表情符号列表：http : //unicode.org/Public/emoji/1.0/emoji-data.txt

Answer 3

尝试Wrap：

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

Answer 4

我认为最好使用 Row 小部件。这是一个例子

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

Answer 5

另一种选择是 String.fromCharCode(int charCode)

这是icons.dart由 flutter 团队创建的，charCodes 可以在这里找到。

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

结果：

Answer 6

行小部件可以是解决此问题的一种方法，但是您必须使用其他小部件才能实现。

请遵循以下示例。

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