如何在Flutter中实现如图所示样式的统计容器？

目标效果：

我尝试了以下代码，但不知道如何调整以达到指定的展示样式：

Container(
  width: MediaQuery.of(context).size.width / 1.5,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(18),
      color: Colors.black.withOpacity(0.1)),
  child: Text('Subcribers \n 365'),
),

从目标图的视觉效果来看，需要调整文本排版、容器内边距、字体层级这些细节，以下是修改后的代码：

Container(
  width: MediaQuery.of(context).size.width / 1.5,
  padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24), // 添加内边距避免内容贴边
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(18),
    color: Colors.black.withOpacity(0.1),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐匹配目标样式
    mainAxisSize: MainAxisSize.min, // 容器高度适配内容
    children: [
      const Text(
        'Subscribers', // 修正拼写错误
        style: TextStyle(
          fontSize: 14,
          color: Colors.grey, // 小字用灰色弱化视觉权重
          fontWeight: FontWeight.w500,
        ),
      ),
      const SizedBox(height: 8), // 控制两行文本的间距
      Text(
        '365',
        style: TextStyle(
          fontSize: 24,
          color: Colors.black.withOpacity(0.8), // 数字用深色调突出显示
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
),

关键调整说明： #

• 将单个Text拆分为Column包裹的两个独立Text，能分别精准控制标题和数字的样式，比用\n更灵活
• 添加padding让内容与容器边缘保持合适距离，避免视觉拥挤
• 设置crossAxisAlignment: CrossAxisAlignment.start让文本左对齐，匹配目标图的排版
• 通过字体大小、颜色、字重的差异，构建清晰的视觉层次
• 用SizedBox替代换行符，更精准控制文本间的垂直间距

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