Flutter自定义消息气泡：如何实现容器宽度适配文本长度？

你的问题出在Center组件上——它会强制父容器（带背景的Container）占据可用的最大宽度，导致容器没法跟着文本长度自适应。要实现宽度随文本内容调整，同时保持文本在容器内居中，直接调整组件结构就行：

修改方案： #

• 删掉Container内部的Center组件，用Padding控制文本和容器边缘的间距，避免文本贴边
• 如果需要短文本时容器有最小宽度，可以给Container加constraints: BoxConstraints(minWidth: 80)（可选）
• 用Container的alignment属性让文本在容器内居中（因为你设置了固定height:40）

修改后的完整代码： #

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bubble Demo')),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return Column(
            children: [
              Align(
                alignment: index % 4 == 0 ? Alignment.centerRight : Alignment.centerLeft,
                child: Container(
                  height: 40,
                  constraints: const BoxConstraints(minWidth: 80), // 可选，避免短文本容器过窄
                  padding: const EdgeInsets.symmetric(horizontal: 16), // 文本左右间距
                  alignment: Alignment.center, // 让文本在容器内居中
                  child: Text('Here is the Message Number ' + index.toString()),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: index % 4 == 0 ? Colors.blue : Colors.orangeAccent,
                  ),
                ),
              ),
              const Divider(indent: 50),
            ],
          );
        },
      ),
    );
  }
}

说明： #

• Container的alignment: Alignment.center可以让文本在容器内垂直水平居中，同时不会强制容器撑满宽度
• Padding保证文本和容器边缘有合适的距离，提升视觉效果
• 可选的BoxConstraints(minWidth)可以避免像"Hi"这种短文本的容器太窄，保持气泡的美观性

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