如何在 Flutter 中心显示带有图标的文本？答案

【问题标题】：How to have Text with Icon in center Flutter?如何在 Flutter 中心显示带有图标的文本？
【发布时间】：2020-05-30 10:41:27
【问题描述】：

我正在使用一个包fab_circular_menu，该包用于一个动画浮动操作按钮，它打开一个圆形菜单。在其中我想要一个小部件作为菜单项，以便下面有一个图标和一个文本。图标以文本为中心。

例如

我怎样才能做到这一点，到目前为止我正在使用下面的代码，但它不适用于不同的屏幕尺寸。

FlatButton(
 splashColor: Colors.transparent,
 highlightColor: Colors.transparent,
 shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(100),
 ),
 padding: EdgeInsets.only(bottom: 15),
 onPressed: () async {
   await _auth.signOut().then((value) {
   Navigator.of(context).popUntil((route) => route.isFirst);
   });
 },
 child: Stack(
       overflow: Overflow.visible,
       children: <Widget>[
                Icon(Icons.power_settings_new),
                  Positioned(
                    bottom: -12,
                    right: -10,
                    child: Text('Logout'),
                  ),
                ],
      ),
 ),

【问题讨论】：

您可以使用 Column 代替 Stack 并将它的 Cross axis 和 Main axis 对齐设置为中心。

标签： flutter

【解决方案1】：

另一种可以多种方式使用的解决方案

   Wrap(
        direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Icon(Icons.power_settings_new),
          Text('Logout'),
        ],
      ),

【讨论】：

虽然你可以使用Wrap，但它不是为这种用例设计的。
@CopsOnRoad：这是另一种在这种情况下寻求其他场景的解决方案。

【解决方案2】：

您可以使用 Column 小部件而不是 Stack 来实现此结果。

示例如下：

.....

Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,

       children: <Widget>[
                Icon(Icons.power_settings_new),
                 Text('Logout'),

                ],
      ),

【讨论】：

【解决方案3】：

简答：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.call),
    SizedBox(height: 4), // spacing between two
    Text('Call Icon'),
  ],
)

长答案：

复制这个类：

class TextWithIcon extends StatelessWidget {
  final IconData icon;
  final String text;
  final double spacing;

  const TextWithIcon({Key key, this.icon, this.text, this.spacing = 2}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon),
          SizedBox(height: spacing),
          Text(text),
        ],
      ),
    );
  }
}

用法：

TextWithIcon(
  icon: Icons.call,
  spacing: 6, // Space between icon and text
  text: 'Call Icon',
)

【讨论】：

【解决方案4】：

您可以为此使用列：

FlatButton(
 splashColor: Colors.transparent,
 highlightColor: Colors.transparent,
 shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(100),
 ),
 padding: EdgeInsets.only(bottom: 15),
 onPressed: () async {
   await _auth.signOut().then((value) {
   Navigator.of(context).popUntil((route) => route.isFirst);
   });
 },
 child: Column(
       children: <Widget>[
                Icon(Icons.power_settings_new), 
                SizedBox(height:10),          // set height according to your needs
                Text('Logout'),  
                ],
      ),
 ),

【讨论】：