Flutter 图片组件上添加自定义样式标签的实现问题求助

实现方案 #

你需要在Text组件外层的Container上配置背景色和内边距，即可得到符合要求的红色标签效果，不需要额外嵌套SizedBox。修改后的代码如下：

children: [
  Container(
    height: 200,
    width: double.infinity,
    decoration: BoxDecoration(
      image: DecorationImage(
          image: NetworkImage(articles[index].imageUrl!),
          fit: BoxFit.cover),
      borderRadius: BorderRadius.circular(0.0),
    ),
    child: Container(
        margin: const EdgeInsets.only(top: 170, left: 10),
        // 新增标签样式配置
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
        decoration: const BoxDecoration(
          color: Colors.red,
          // 可选：添加圆角效果
          // borderRadius: BorderRadius.circular(4),
        ),
        child: const Text('SCIENCE',
            textAlign: TextAlign.left,
            style: TextStyle(
                color: Colors.white, 
                fontWeight: FontWeight.bold))),
  ),
]

改动说明 #

• 给包裹Text的Container添加了padding属性，控制文字和标签边缘的间距，避免文字紧贴标签边框
• 给Container添加红色背景，对应你要的标签底色
• 将Text文字颜色调整为白色适配红色背景，你也可以根据需求自行修改颜色、padding数值实现不同的标签样式

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