flutter point nine settings

1. The top and left are stretched areas, and the right and bottom are filled areas
2. fromLTRB/fromLTWH setting area
3. fromLTRB setting area, it is not very clear
4. The understanding of centerSlice

Stretch area: It can be simply understood as stretching a certain pixel, and that pixel will naturally become larger. In order to meet the space required by the content, it will continue to stretch that area so that the content can fit the
content Padding area: that is, where the content can be displayed

本文地址：https://blog.csdn.net/qq_40785165/article/details/120116188，转载需附上此链接

学而不化，非学也。

大家好，我是小黑，一个还没秃头的程序员~~~

最近想做一个Flutter版的简易聊天交友软件，可以当成是自己的Flutter实战经验，说到聊天软件肯定涉及聊天气泡，原生中的气泡背景一般都直接使用.9图，那么Flutter中如何实现缩放背景呢，这就是这次要介绍的centerSlice组件了，效果如下：

以下是我找的背景（113x48）
 
话不多说直接上代码：

        ConstrainedBox(
          //没有下面的最小高度的话，当只有一行文字的时候.9图片无法显示
          constraints: BoxConstraints(minHeight: 50),
          child: Container(
              margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
              padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
              decoration: BoxDecoration(
                  image: DecorationImage(
                centerSlice: Rect.fromLTRB(20, 20, 38, 38),
                image: AssetImage(
                  'assets/images/bg_message_right.png',
                ),
              )),
              child: ConstrainedBox(
                constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  "${messageBeanData.messageContent}",
                ),
              )),
        )
注意：

这里的气泡背景是作为Container的背景展示的，在Container外层需要再套一层ConstrainedBox，并设置最小高度minHeight，否则当当只有一行文字的时候背景图片无法显示，并报以下错误：
centerSlice was used with a BoxFit that does not guarantee that the image is fully visible
Failed assertion: line 465 pos 12: 'sourceSize == inputSize'
可以使用fromLTRB/fromLTWH设置.9图片区域，计算方法不同而已
Rect.fromLTRB(this.left, this.top, this.right, this.bottom):四个参数即区域四个方向的长度，距离都是以原图左上角（0，0）作为原点进行相对计算的
Rect.fromLTWH(double left, double top, double width, double height)：前两个参数代表.9图左上的点坐标，后面两个参数分别代表区域的宽和高，这样划分出来的区域即.9图的区域了

centerSlice: const Rect.fromLTRB(60, 27, 85, 53),
the four values ​​are the top, left, right, button of the telescoping area.
It should be easy to understand: centerSlice is the area where stretching is set, and the four corners will not be stretched

There is another key point. It is not displayed after setting point 9.

My understanding is that if you set the square stretch area in the middle, the height of your content should at least exceed the height of the low side of the square. You can set the minimum height. The width must at least exceed the right width of the square, and the minimum width can also be set, so that it can be stretched normally. That is to say, your content height must be greater than 35, and your content width must be greater than 35