.9图在聊天气泡很常见，功能相对简单，但是我看网上很多文章都没有讲明白，对于限制都是用约束来做的，也没讲明白约束的原理是什么，应该怎么算。

实现

先看代码和效果

你可以看到，我没有使用BoxConstraints去进行约束，依然可以正常显示。接下去我会说下为什么这样也正常的原因。

气泡图

如图我的气泡原始大小为113*48，这个大小和能否正常显示都是有关系的。

centerSlice实现.9图

flutter的.9图靠的是这个属性实现的：centerSlice: Rect.fromLTRB(12, 20, 98, 36)，按照我的参数，最后的结果如图所示。以宽度为例：当Container（注意是Container，不是Text组件）的大小变大时，填充的是12到98的绿色的部分。因为图片的宽度为113，所以剩余大小为 113-98+12 = 27，所以Container的宽只要大于27就能显示。我代码中因为设置了padding，所以我在Text为空的时候依然会有28的宽度，所以依然能正常显示，而不需要BoxConstraints。高度也是这个道理。

一旦我将centerSlice设置为Rect.fromLTRB(12, 20, 97, 36)，剩余大小就变成了113-97+12 = 28，Container必须大于28才能显示，你会看到Text为空的就消失了，而其他的正常显示（其他的Text文字把宽度撑开了大于了28），正是这个原因。这个时候你minWidth设置为29就又能正常显示了。网上的文章都是直接叫你设置BoxConstraints却都不讲明原因，其实设置约束就是为了保证Container的宽度要比.9图的剩余大小大才能显示。