Cara Menggunakan Gambar 9-Patch di Flutter

Gambar 9-patch adalah jenis gambar PNG khusus yang memungkinkan pengembang untuk meregangkan gambar sambil mempertahankan area tertentu dari gambar agar tidak berubah bentuk, sehingga menghindari distorsi gambar. Ini sangat berguna dalam membuat elemen UI yang dapat diskalakan, seperti latar belakang tombol, bilah progres, dll. Meskipun Flutter sendiri tidak secara langsung mendukung format asli gambar 9-patch, kita dapat mencapai efek serupa melalui beberapa trik.

Membuat Gambar 9-Patch dengan 9 Patch Editor

Pertama, Anda perlu menyiapkan gambar PNG. Kemudian, gunakan alat 9 Patch Editor untuk membuat gambar 9-patch Anda. Alat ini memungkinkan Anda untuk menentukan area yang dapat diregangkan dan area konten gambar. Langkah-langkah spesifiknya adalah sebagai berikut:

1. Buka situs web 9 Patch Editor.
2. Unggah gambar PNG Anda.
3. Menggunakan editor yang disediakan oleh alat, pilih area gambar yang dapat diregangkan (seret tepi kiri dan tepi atas gambar).
4. Pilih area konten gambar (seret tepi kanan dan tepi bawah gambar, area ini tetap tidak berubah saat diregangkan).
5. Unduh gambar 9-patch yang dihasilkan (silakan unduh gambar yang berbeda sesuai dengan skema Anda).

Menggunakan Gambar 9-Patch di Flutter

Flutter tidak memiliki mekanisme untuk memuat gambar 9-patch secara langsung. Kita perlu menggunakan pustaka pihak ketiga atau menggunakan properti Image.centerSlice bawaan Flutter untuk mensimulasikan efek gambar 9-patch.

Metode 1: Menggunakan Pustaka Pihak Ketiga

Saat ini ada beberapa pustaka pihak ketiga Flutter yang dapat membantu Anda memuat dan merender gambar 9-patch, seperti ninepatch_image dan nine_patch.

Menggunakan Pustaka ninepatch_image

Anda perlu menambahkan dependensi dalam file pubspec.yaml:

dependencies:
  ninepatch_image: ^0.0.4

Tempatkan gambar PNG di folder assets proyek Flutter Anda, dan deklarasikan di file pubspec.yaml:

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

Kemudian, Anda dapat menggunakan widget NinePatchImage untuk menampilkan gambar 9-patch Anda:

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

Untuk detail penggunaan, silakan lihat dokumentasi ninepatch_image.

Menggunakan Pustaka nine_patch

Anda perlu menambahkan dependensi dalam file pubspec.yaml:

dependencies:
  nine_patch: ^1.0.0

Anda perlu membuat file JSON yang menyimpan informasi gambar 9-patch di folder assets dan menempatkan gambar asli di folder 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 adalah area gambar yang dapat diregangkan, contents adalah area konten gambar, dimensions adalah dimensi gambar. Anda dapat melihat informasi ini di alat 9 Patch Editor atau menggunakan alat nine_patcher untuk menghasilkan informasi ini.

Kemudian, Anda dapat menggunakan widget NinePatchImage untuk menampilkan gambar 9-patch Anda:

import 'package:nine_patch/nine_patch.dart';

...

// Membuat widget NinePatchImage baru
NinePatchImage.fromAssetMetadata(
    name: "my_image.9.json",
)

Ingatlah untuk mengganti assets/my_image.9.json dengan jalur file JSON gambar 9-patch Anda.

Untuk detail penggunaan, silakan lihat dokumentasi nine_patch.

Metode 2: Menggunakan Image.centerSlice

Jika Anda tidak ingin menggunakan pustaka pihak ketiga, Anda dapat menggunakan properti Image.centerSlice bawaan Flutter untuk mensimulasikan efek gambar 9-patch. Anda perlu menentukan area gambar yang dapat diregangkan secara manual:

Image.asset(
  'assets/my_image.png',
  width: 200,
  height: 100,
  centerSlice: Rect.fromLTWH(20, 20, 160, 60), // Menentukan area yang dapat diregangkan secara manual
),

Catatan: Gambar harus menggunakan gambar asli atau gambar yang telah dikompilasi.

Anda perlu menyesuaikan nilai properti centerSlice secara manual sesuai dengan gambar Anda. Anda dapat melihat informasi ini di alat 9 Patch Editor.

Kesimpulan

Meskipun Flutter tidak secara langsung mendukung gambar 9-patch, kita dapat mencapai efek serupa dengan menggunakan pustaka pihak ketiga atau properti Image.centerSlice. Direkomendasikan untuk menggunakan pustaka ninepatch_image, yang lebih mudah digunakan. Jika Anda membutuhkan fungsi yang lebih fleksibel dan kuat, Anda dapat mempertimbangkan untuk menggunakan nine_patch. Jika Anda tidak ingin memasukkan pustaka pihak ketiga, Anda dapat menggunakan metode Image.centerSlice, tetapi fungsinya terbatas dan Anda perlu menentukan area yang dapat diregangkan secara manual. Memilih metode mana yang tergantung pada kebutuhan spesifik Anda dan kompleksitas proyek.