How to display .9.png format of a picture in flutter?

Question

Here is my code:

new Image.asset('images/launcher/border_highlight.9.png', fit: BoxFit.fill)));

When I change the width and height of the image, it has a poor display effect, but show normal in native android.

Does flutter not support .9 picture? Is there another way to achieve the same effect?

Solution 1

Flutter supports similar concepts, but not directly support 9-patch files, so it actually works with any images.

For example, I have a 50x50 image here, button.png:

When zoomed in to 1200% in Photoshop, we can see the area which we would like to define as "center" so it can be stretched. I've drawn some blue guide lines at 15px from each edge:

To use it in Flutter, we can use the centerSlice property and pass in a Rect that basically defines the rectangle that I drew in Photoshop, i.e. spanning from 15px to 35px on both width and height:

        Image.asset(
          "images/button.png",
          height: 100,
          width: 350,
          centerSlice: Rect.fromLTRB(15, 15, 35, 35),
        )

And the result is as follows (vs not passing in centerSlice, but pass in fit: BoxFit.fill instead):

Solution 2

You can set the centerSlice property on the Image widget if you know the coordinates of the middle section of your nine-patch image. We don't currently read those coordinates out of the image automatically. If there's any documentation on how Android does that it's something we could consider doing, please don't hesitate to file a feature request.

Comments

[coder.john]

Thanks for your answer. Android nine-patch（.9.png）is a special png format, see http://developer.android.com/guide/topics/graphics/2d-graphi‌​cs.html#nine-patch. What is the alternative way in flutter?

[Günter Zöchbauer]

Sorry, don't know about that.

[Rene]

I guess you could manually split the images and use different scaling parameters for them, but that is not as nice as a nine-patch of course.

[Herohtar]

It looks like the coordinates are simply black lines on the edges: radleymarx.com/ux/simple-guide-to-9-patch