How to Use Nine-Patch Images in Flutter

Nine-patch images are a special type of PNG image that allows developers to stretch certain areas of an image while keeping others intact, thus avoiding image distortion. This is particularly useful when creating scalable UI elements, such as button backgrounds, progress bars, etc. Although Flutter doesn't directly support the native format of nine-patch images, we can achieve similar effects through some techniques.

Creating Nine-Patch Images with 9 Patch Editor

First, you need to prepare a PNG image. Then, use the 9 Patch Editor tool to create your nine-patch image. This tool allows you to specify the stretchable and content areas of the image. The specific steps are as follows:

1. Go to the 9 Patch Editor website.
2. Upload your PNG image.
3. Using the provided editor, select the stretchable areas of the image (drag the left and top edges of the image).
4. Select the content areas of the image (drag the right and bottom edges of the image, these areas will remain unchanged when stretched).
5. Download the generated nine-patch image (please download the appropriate image based on your needs).

Using Nine-Patch Images in Flutter

Flutter does not have a mechanism for directly loading nine-patch images. We need to use third-party libraries or Flutter's built-in Image.centerSlice property to simulate the effect of nine-patch images.

Method 1: Using Third-Party Libraries

Currently, there are several third-party Flutter libraries that can help you load and render nine-patch images, such as ninepatch_image and nine_patch.

Using the ninepatch_image Library

You need to add the dependency in your pubspec.yaml file:

dependencies:
  ninepatch_image: ^0.0.4

Place your PNG image in the assets folder of your Flutter project, and declare it in the pubspec.yaml file:

flutter:
  assets:
    - assets/my_image.9.png

Then, you can use the NinePatchImage widget to display your nine-patch image:

NinePatchImage(
  imageProvider: AssetImage("assets/my_image.9.png"),
  child: Text( "Lorem Ipsum is simply dummy text of the printing "))

For detailed usage, please refer to the ninepatch_image documentation.

Using the nine_patch Library

You need to add the dependency in your pubspec.yaml file:

dependencies:
  nine_patch: ^1.0.0

You need to create a JSON file storing the nine-patch image information in the assets folder, and place the original image in the assets folder.

{
  "stretch": {
    "x": 118,
    "y": 40,
    "width": 121,
    "height": 60
  },
  "contents": {
    "x": 19,
    "y": 18,
    "width": 248,
    "height": 101
  },
  "dimensions": {
    "x": 285,
    "y": 167
  },
  "name": "TextBox_Side.png",
  "scale": 2
}

stretch is the stretchable area of the image, contents is the content area of the image, and dimensions is the size of the image. You can view this information in the 9 Patch Editor tool or use the nine_patcher tool to generate it.

Then, you can use the NinePatchImage widget to display your nine-patch image:

import 'package:nine_patch/nine_patch.dart';

...

// Create a new NinePatchImage widget
NinePatchImage.fromAssetMetadata(
    name: "my_image.9.json",
)

Remember to replace assets/my_image.9.json with the path to your nine-patch image JSON file.

For detailed usage, please refer to the nine_patch documentation.

Method 2: Using Image.centerSlice

If you don't want to use third-party libraries, you can use Flutter's built-in Image.centerSlice property to simulate the effect of nine-patch images. You need to manually specify the stretchable area of the image:

Image.asset(
  'assets/my_image.png',
  width: 200,
  height: 100,
  centerSlice: Rect.fromLTWH(20, 20, 160, 60), // Manually specify the stretchable area
),

Note: The image should be the original image or the compiled image.

You need to manually adjust the value of the centerSlice property based on your image. You can view this information in the 9 Patch Editor tool.

Summary

Although Flutter does not directly support nine-patch images, we can achieve similar effects by using third-party libraries or the Image.centerSlice property. It is recommended to use the ninepatch_image library, as it is simpler to use. If you need more flexible and powerful features, consider using nine_patch. If you don't want to introduce third-party libraries, you can use the Image.centerSlice method, but its functionality is limited and requires manual specification of the stretchable area. The choice of method depends on your specific needs and project complexity.