Shutter widget: centerslice attribute

Write it at the front

stay Flutter In the project , Sometimes I use Android The one on the is called dot 9 Picture things . spot 9 Graph is a kind of graph that allows us to set a certain direction , Stretch a part of the picture .

As far as I know ,Flutter Up to point 9 The support of figure is similar to Android There are some differences in .Flutter It's when we decide 9 After the central area of the figure , It will automatically stretch horizontally and vertically . It seems that if the picture is a more standardized graphic , Ordinary pictures are also ok .

Content

stay Flutter On , There will be a control called centerSlice Properties of , To help us deal with some 9 chart .

 /// The center slice for a nine-patch image.
  ///
  /// The region of the image inside the center slice will be stretched both
  /// horizontally and vertically to fit the image into its destination. The
  /// region of the image above and below the center slice will be stretched
  /// only horizontally and the region of the image to the left and right of
  /// the center slice will be stretched only vertically.
  ///
  /// The stretching will be applied in order to make the image fit into the box
  /// specified by [fit]. When [centerSlice] is not null, [fit] defaults to
  /// [BoxFit.fill], which distorts the destination image size relative to the
  /// image's original aspect ratio. Values of [BoxFit] which do not distort the
  /// destination image size will result in [centerSlice] having no effect
  /// (since the nine regions of the image will be rendered with the same
  /// scaling, as if it wasn't specified).
  final Rect? centerSlice;

centerSlice yes Rect type , So it's a rectangle .

Take this picture for example , Its size is 50 * 50.

In use , Let's first determine its middle rectangle , That is to say centerSlice, Then it will extend along the four sides of the rectangle , Divide the picture into 9 Parts of ：

Then we take the position of its central rectangle ：

Rect.fromLTRB(15, 15, 35, 35)

here Rect.fromLTRB(15, 15, 35, 35) It's the rectangle in the middle .

Suppose we run the following code

    Image.asset(
            'assets/black_square.png',
            height: 100,
            width: 350,
            centerSlice: Rect.fromLTRB(15, 15, 35, 35),
          )

Then the actual effect is here 9 In two parts , With centerSlice As the central part , The rectangular part of the four corners will not change , The left, right, upper and lower parts will be stretched . So in the figure of our example , The fillet will not be deformed due to stretching .

Column(
        children: [
          Container(
            height: 100,
            width: 330,
            color: Colors.red,
          ),
          Image.asset(
            'assets/black_square.png',
            height: 100,
            width: 330,
            centerSlice: Rect.fromLTRB(15, 15, 35, 35),
          ),
          Image.asset(
            'assets/black_square.png',
            height: 100,
            width: 330,
            fit: BoxFit.fill,
          ),
          Image.asset(
            'assets/black_square.png',
            height: 100,
            width: 330,
            fit: BoxFit.fitWidth,
          )
        ],
      )

Reference resources

How to display .9.png format of a picture in flutter?
Flutter centerSlice .9 The understanding of graph