如何为Flutter中的Text组件设置文本背景色？

我想给文本添加背景色，期望效果是文本带有填充的背景色块（类似带底色的标签样式），但目前只有纯文本，没有背景。

期望效果：

当前效果：

我写的代码：

Text(
  'Last Activity',
  style: TextStyle(
    fontSize: 16,
    color: ColorName.whitePrimary,
  ),
),

试试这两种方法实现你要的文本背景效果：

方法一：用Container包裹Text（推荐，更灵活） #

通过Container的color设置背景色，再用padding控制背景色块的内边距，适配你要的样式：

Container(
  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4), // 按需调整内边距
  color: Colors.grey[800], // 替换成你需要的背景色
  child: Text(
    'Last Activity',
    style: TextStyle(
      fontSize: 16,
      color: ColorName.whitePrimary,
    ),
  ),
),

方法二：用TextStyle的background属性 #

如果只需要给文本本身加背景（无额外内边距），可以直接在TextStyle里配置background参数：

Text(
  'Last Activity',
  style: TextStyle(
    fontSize: 16,
    color: ColorName.whitePrimary,
    background: Paint()..color = Colors.grey[800]!, // 注意空安全处理
  ),
),

提示：方法一的Container能更方便地调整背景块的圆角、大小等细节，更贴合你期望的标签式效果。

内容的提问来源于stack exchange，提问作者Bilbo Baggins