Flutter问题：实现与文本宽度匹配的StadiumBorder背景

想要为文本添加上下半圆、左右直边的填充背景，要求背景的左右直边与文本宽度完全匹配，但使用StadiumBorder的代码无法实现预期效果，且文本会动态缩放，无法通过固定边距解决。

当前使用代码：

Container(
  padding: EdgeInsets.all(5),
  decoration: ShapeDecoration(
    color: Colors.grey,
    shape: StadiumBorder(),
  ),
  alignment: Alignment.topLeft,
  child: Text('text'),
),

当前效果：

期望效果：

问题核心有两点：

1. StadiumBorder默认是左右半圆、上下直边的形状，和需求方向相反；
2. 默认Container会尽可能撑满父容器宽度，导致背景宽度远大于文本。

推荐使用以下方案实现预期效果：

方法：适配文本宽度的横向圆角背景 #

通过IntrinsicWidth限制容器宽度与文本一致，搭配RoundedRectangleBorder动态生成上下半圆的圆角：

import 'package:flutter/material.dart';

// ... 你的组件代码
IntrinsicWidth(
  child: LayoutBuilder(
    builder: (context, constraints) {
      return Container(
        // 仅保留上下内边距，确保背景左右直边与文本对齐
        padding: EdgeInsets.symmetric(vertical: 5),
        decoration: ShapeDecoration(
          color: Colors.grey,
          shape: RoundedRectangleBorder(
            // 圆角半径设为容器高度的一半，形成标准的上下半圆效果
            borderRadius: BorderRadius.circular(constraints.maxHeight / 2),
          ),
        ),
        child: Text('text'),
      );
    },
  ),
)

关键逻辑说明 #

• IntrinsicWidth强制容器宽度与子文本宽度完全匹配，自动适配文本缩放后的宽度变化；
• LayoutBuilder实时获取容器高度，保证圆角半径始终为容器高度的一半，无论文本大小如何变化，都能保持上下半圆的形状；
• 仅设置上下内边距，避免左右额外间距导致背景宽度超出文本范围。

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