centerSlice Property

centerSlice is the same as 9 patch png in Android Studio. Is a technique used to scale the image in such a way that the 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis.

The Value of the centerSlice property is the Rect Class. We need to constrcut a rectangle from its left and top edges, its width, and its height. Let’s start to know the size of our picture.

Width = 320 & the Height = 190

The class we need to use is

Rect.fromLTWH(double left, double top, double width, double height)

Our centerSlice is the green rectangle in the middle of the picture. To create it we need to know the width of the orange rectangle and put it for the left value and the height of the purple rectangle and put it for the top value

Rect.fromLTWH(50.0, 50.0, double width, double height)

So we have tell the Rect class to move 50 from the left and 50 from the top of the picture and start drawing the rectangle from the yellow point marked on the picture above.

In the above picture we have the width of the rectangle is 220 and the height is 90 so the final class value should be

Rect.fromLTWH(50.0, 50.0, 220.0, 90.0)

The final code is

new Center(

child: new Container(

decoration: new BoxDecoration(

image: new DecorationImage(

image: new AssetImage('assets/images/9_patch_scaled_320x190.png'),

centerSlice: new Rect.fromLTWH(50.0, 50.0, 220.0, 90.0),

fit: BoxFit.fill,

)

),

child: new Container(

//color: Colors.yellow,

width: 110.0,

height: 110.0,

)

),



);

You can see that the four red square are unscaled. let give the child of the container more width and height.