Comment utiliser les images en 9-patch dans Flutter

Les images en 9-patch sont un type spécial d'image PNG qui permet aux développeurs d'étirer des images tout en conservant certaines zones de l'image non déformées, évitant ainsi la distorsion de l'image. C'est très utile lors de la création d'éléments d'interface utilisateur redimensionnables, tels que les arrière-plans de boutons, les barres de progression, etc. Bien que Flutter ne prenne pas directement en charge le format natif des images en 9-patch, nous pouvons obtenir des effets similaires en utilisant quelques astuces.

Création d'une image en 9-patch à l'aide de 9 Patch Editor

Tout d'abord, vous devez préparer une image PNG. Ensuite, utilisez l'outil 9 Patch Editor pour créer votre image en 9-patch. Cet outil vous permet de spécifier les zones étirables et les zones de contenu de l'image. Les étapes à suivre sont les suivantes :

1. Allez sur le site web de 9 Patch Editor.
2. Téléchargez votre image PNG.
3. À l'aide de l'éditeur fourni, sélectionnez les zones étirables de l'image (en faisant glisser les bords gauche et supérieur de l'image).
4. Sélectionnez les zones de contenu de l'image (en faisant glisser les bords droit et inférieur de l'image, ces zones restent inchangées lors de l'étirement).
5. Téléchargez l'image en 9-patch générée (veuillez télécharger différentes images en fonction de votre plan).

Utilisation des images en 9-patch dans Flutter

Flutter n'a pas de mécanisme pour charger directement les images en 9-patch. Nous devons utiliser des bibliothèques tierces ou la propriété intégrée Image.centerSlice de Flutter pour simuler l'effet des images en 9-patch.

Méthode 1 : Utilisation d'une bibliothèque tierce

Il existe actuellement plusieurs bibliothèques tierces Flutter qui peuvent vous aider à charger et à rendre des images en 9-patch, telles que ninepatch_image et nine_patch.

Utilisation de la bibliothèque ninepatch_image

Vous devez ajouter la dépendance dans le fichier pubspec.yaml :

dependencies:
  ninepatch_image: ^0.0.4

Placez l'image PNG dans le dossier assets de votre projet Flutter et déclarez-la dans le fichier pubspec.yaml :

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

Ensuite, vous pouvez utiliser le widget NinePatchImage pour afficher votre image en 9-patch :

NinePatchImage(
  imageProvider: AssetImage("assets/my_image.9.png"),
  child: Text( "Lorem Ipsum est simplement un faux texte de l'imprimerie "))

Pour des instructions détaillées sur l'utilisation, consultez la documentation de ninepatch_image.

Utilisation de la bibliothèque nine_patch

Vous devez ajouter la dépendance dans le fichier pubspec.yaml :

dependencies:
  nine_patch: ^1.0.0

Vous devez créer un fichier JSON qui stocke les informations d'image en 9-patch dans le dossier assets et placer l'image originale dans le dossier 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 est la zone étirable de l'image, contents est la zone de contenu de l'image et dimensions sont les dimensions de l'image. Vous pouvez consulter ces informations dans l'outil 9 Patch Editor ou utiliser l'outil nine_patcher pour générer ces informations.

Ensuite, vous pouvez utiliser le widget NinePatchImage pour afficher votre image en 9-patch :

import 'package:nine_patch/nine_patch.dart';

...

// Créer un nouveau widget NinePatchImage
NinePatchImage.fromAssetMetadata(
    name: "my_image.9.json",
)

N'oubliez pas de remplacer assets/my_image.9.json par le chemin d'accès au fichier JSON de votre image en 9-patch.

Pour des instructions détaillées sur l'utilisation, consultez la documentation de nine_patch.

Méthode 2 : Utilisation de Image.centerSlice

Si vous ne souhaitez pas utiliser de bibliothèques tierces, vous pouvez utiliser la propriété Image.centerSlice intégrée à Flutter pour simuler l'effet des images en 9-patch. Vous devez spécifier manuellement la zone étirable de l'image :

Image.asset(
  'assets/my_image.png',
  width: 200,
  height: 100,
  centerSlice: Rect.fromLTWH(20, 20, 160, 60), // Spécifie manuellement la zone étirable
),

Remarque : l'image doit utiliser l'image originale ou l'image compilée.

Vous devez ajuster manuellement la valeur de la propriété centerSlice en fonction de votre image. Vous pouvez consulter ces informations dans l'outil 9 Patch Editor.

Conclusion

Bien que Flutter ne prenne pas directement en charge les images en 9-patch, nous pouvons obtenir des effets similaires en utilisant des bibliothèques tierces ou la propriété Image.centerSlice. Il est recommandé d'utiliser la bibliothèque ninepatch_image, qui est plus simple à utiliser. Si vous avez besoin de fonctionnalités plus flexibles et puissantes, vous pouvez envisager d'utiliser nine_patch. Si vous ne souhaitez pas introduire de bibliothèques tierces, vous pouvez utiliser la méthode Image.centerSlice, mais ses fonctionnalités sont limitées et vous devez spécifier manuellement la zone étirable. Le choix de la méthode dépend de vos besoins spécifiques et de la complexité de votre projet.