Cómo usar imágenes de nueve parches en Flutter

Una imagen de nueve parches es una imagen PNG especial que permite a los desarrolladores estirar ciertas áreas de la imagen sin que se deformen, evitando así la distorsión de la imagen. Esto es muy útil al crear elementos de interfaz de usuario escalables, como fondos de botones, barras de progreso, etc. Aunque Flutter no admite directamente el formato nativo de imagen de nueve parches, podemos lograr efectos similares usando algunos trucos.

Crear imágenes de nueve parches con el Editor de 9 Parches

Primero, necesitas preparar una imagen PNG. Luego, usa la herramienta Editor de 9 Parches para crear tu imagen de nueve parches. Esta herramienta te permite especificar las áreas estirables y las áreas de contenido de la imagen. Los pasos específicos son los siguientes:

1. Visita el sitio web del Editor de 9 Parches.
2. Sube tu imagen PNG.
3. Utiliza el editor proporcionado por la herramienta para seleccionar las áreas estirables de la imagen (arrastra los bordes izquierdo y superior de la imagen).
4. Selecciona las áreas de contenido de la imagen (arrastra los bordes derecho e inferior de la imagen, estas áreas permanecen sin cambios al estirar).
5. Descarga la imagen de nueve parches generada (descarga diferentes imágenes según tu plan).

Usar imágenes de nueve parches en Flutter

Flutter no tiene un mecanismo para cargar imágenes de nueve parches directamente. Necesitamos usar bibliotecas de terceros o usar la propiedad Image.centerSlice integrada de Flutter para simular el efecto de una imagen de nueve parches.

Método 1: usar bibliotecas de terceros

Actualmente, hay algunas bibliotecas de terceros de Flutter que pueden ayudarte a cargar y renderizar imágenes de nueve parches, como ninepatch_image y nine_patch.

Usar la biblioteca ninepatch_image

Necesitas agregar la dependencia en el archivo pubspec.yaml:

dependencies:
  ninepatch_image: ^0.0.4

Coloca la imagen PNG en la carpeta assets de tu proyecto Flutter y declárala en el archivo pubspec.yaml:

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

Luego, puedes usar el widget NinePatchImage para mostrar tu imagen de nueve parches:

NinePatchImage(
  imageProvider: AssetImage("assets/my_image.9.png"),
  child: Text( "Lorem Ipsum es simplemente el texto de relleno de las imprentas"))

Para obtener información detallada sobre cómo usarlo, consulta la documentación de ninepatch_image.

Usar la biblioteca nine_patch

Necesitas agregar la dependencia en el archivo pubspec.yaml:

dependencies:
  nine_patch: ^1.0.0

Necesitas crear un archivo JSON que almacene información de imágenes de nueve parches en la carpeta assets y colocar la imagen original en la carpeta assets.

{
  "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 es el área estirable de la imagen, contents es el área de contenido de la imagen, dimensions son las dimensiones de la imagen. Puedes ver esta información en la herramienta Editor de 9 Parches o usar la herramienta nine_patcher para generar esta información.

Luego, puedes usar el widget NinePatchImage para mostrar tu imagen de nueve parches:

import 'package:nine_patch/nine_patch.dart';

...

// Crea un nuevo widget NinePatchImage
NinePatchImage.fromAssetMetadata(
    name: "my_image.9.json",
)

Recuerda reemplazar assets/my_image.9.json con la ruta del archivo JSON de tu imagen de nueve parches.

Para obtener información detallada sobre cómo usarlo, consulta la documentación de nine_patch.

Método 2: usar Image.centerSlice

Si no quieres usar bibliotecas de terceros, puedes usar la propiedad Image.centerSlice integrada de Flutter para simular el efecto de una imagen de nueve parches. Necesitas especificar manualmente el área estirable de la imagen:

Image.asset(
  'assets/my_image.png',
  width: 200,
  height: 100,
  centerSlice: Rect.fromLTWH(20, 20, 160, 60), // Especificar manualmente el área estirable
),

Nota: La imagen debe ser la imagen original o la imagen compilada.

Necesitas ajustar manualmente los valores de la propiedad centerSlice según tu imagen. Puedes ver esta información en la herramienta Editor de 9 Parches.

Resumen

Aunque Flutter no admite imágenes de nueve parches directamente, podemos lograr efectos similares usando bibliotecas de terceros o la propiedad Image.centerSlice. Se recomienda usar la biblioteca ninepatch_image, que es más fácil de usar. Si necesitas funciones más flexibles y potentes, puedes considerar el uso de nine_patch. Si no quieres importar bibliotecas de terceros, puedes usar el método Image.centerSlice, pero las funciones son limitadas y debes especificar manualmente las áreas estirables. La elección del método depende de tus necesidades específicas y de la complejidad del proyecto.