如何居中对齐文本小部件，然后向文本添加前导图标？

Question

在行小部件中，我添加了一个文本小部件，并且可以通过使用居中对齐文本mainAxisAlignment.center，但是当我在文本之前添加图标时，文本现在显然不是居中对齐，因为图标和文本都居中对齐在一起。

请找到下面的屏幕截图以便更好地理解。

我的设计师建议将“早上”文本与屏幕居中对齐，并且图标应放在文本前面，我该如何实现？

Answer 1

您可以使用透明颜色技巧：

      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.wb_sunny, color: Colors.yellow),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text('Morning'),
          ),
          Icon(Icons.wb_sunny, color: Colors.transparent),
        ],
      )

右侧图标仅用于平衡，并且具有透明颜色。