Flutter - 带有文本的字体真棒图标溢出答案

【问题标题】：Flutter - Font Awesome Icon overflow with TextFlutter - 带有文本的字体真棒图标溢出
【发布时间】：2020-06-01 02:32:50
【问题描述】：

我在我的应用程序中使用FontAwesomeIcon Plugin。

FontAwesomeIcon 插件中的一些图标与 Text 小部件重叠，如下图所示。

我可以通过在 Text 和 Icon 之间添加一些宽度来解决这个问题，但这并不好。那么如何解决这个问题。

我需要这样的图片。

这里我没有在图标和文本之间添加任何宽度。

代码：

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.trip_origin,
                      color: Colors.white,
                    ),
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.idCard,
                      color: Colors.white,
                    ),
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                )
              ],
            ),

【问题讨论】：

兄弟可以加个代码吗？
@AR代码加了兄弟。

标签： flutter dart icons font-awesome font-awesome-5

【解决方案1】：

你是这样的吗？

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.trip_origin,
                      color: Colors.white,
                    ),
                    SizeBox(width:10) //as per your requirement
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.idCard,
                      color: Colors.white,
                    ),
                    SizeBox(width:10) //as per your requirement
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                )
              ],
            ),

【讨论】：

我已经尝试过喜欢这个兄弟，而尝试第一个图标和第一个文本之间的空间大于第二个图标和第二个文本之间的空间。
@MSARKrish 在 Row 的第二个孩子中使用填充：const EdgeInsets.symmetric(vertical: 0.0, Horizontal: 10.0)
我已经在我的问题中提到过，我知道我可以解决这个问题，为此添加一些填充。但我想知道是否还有其他解决方案。因为在启用颤振检查器时，fontawesome 图标占用的空间比给定的默认图标空间更多。这就是它显示这样的原因。

【解决方案2】：

你为什么不像这样使用 Padding 小部件 (https://api.flutter.dev/flutter/widgets/Padding-class.html)

在图标小部件的左侧和右侧添加填充

Row(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.0)
      child: Icon(
        Icons.trip_origin,
        color: Colors.white,
      ),
    ),
    Text(
      'TP-23',
      style: TextStyle(color: Colors.white),
    )
  ]
)

仅在图标小部件的右侧添加填充

Row(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.only(right: 16.0)
      child: Icon(
        Icons.trip_origin,
        color: Colors.white,
      ),
    ),
    Text(
      'TP-23',
      style: TextStyle(color: Colors.white),
    )
  ]
)

【讨论】：

【解决方案3】：

    child: Container(
                  child: Container(
                    height: 500.0,
                    width: 500.0,
                    // alignment: FractionalOffset.center,
                    child: Stack(
                      //alignment:new Alignment(x, y)
                      children: <Widget>[
                        Icon(
                          Icons.trip_origin,
                          size: 40.0,
                          color: Colors.orange,
                        ),
                        Positioned(
                          top: 15.00,
                          left: 40.0,
                          child: Text(
                            'TP-23',
                            style: TextStyle(
                                color: Colors.white, fontSize: 25.0),
                          ),
                        )
                      ],
                    ),
                  ),
                ),

【讨论】：