Halo sobatINA gimana kabarnya hari ini, gk kerasa ya udah banyak juga materi yang kita bahas. Mimin pikir nih ya kalau kita membaca artikel atau melihat sebuah aplikasi tanpa ada gambar gimana ya rasanya? Pasti boring banget kan!! Nah disini Mimin akan kasih tau nihh gimana caranya kita menambahkan image di code kita. Langsung saja kita Gasss!!

Dalam konteks Flutter, widget Image adalah sebuah elemen dalam framework yang digunakan untuk menampilkan gambar. Widget ini memungkinkan pengembang untuk menyematkan gambar ke dalam tata letak aplikasi Flutter.

Berikut adalah beberapa hal penting terkait dengan widget Image:

Menampilkan Gambar:Widget Image digunakan untuk menampilkan gambar dari berbagai sumber, seperti file lokal di perangkat, URL gambar dari internet, atau bahkan dari penyimpanan cache.

Penggunaan Berbagai Sumber:Anda dapat menggunakan widget Image dengan berbagai sumber gambar, termasuk AssetImage untuk gambar dari file lokal, NetworkImage untuk gambar dari URL, atau MemoryImage untuk gambar dari data di dalam memori.

Caching:Flutter memiliki mekanisme caching bawaan yang dapat mempercepat proses pemuatan gambar, terutama saat mengambil gambar dari internet. Jika gambar sudah diunduh sebelumnya, Flutter dapat mengambilnya dari cache daripada mengunduhnya lagi.

Konfigurasi dan Transformasi:Widget Image juga memungkinkan konfigurasi seperti penyesuaian ukuran, memutar, dan mengubah warna gambar. Ini memberi pengembang fleksibilitas dalam menampilkan gambar sesuai dengan kebutuhan aplikasi.

Apa ajaa sihh provider yang support di flutter, Berikut uraiannya

JPEG (Joint Photographic Experts Group):

• Format yang paling umum digunakan untuk menyimpan gambar berwarna.
• Mendukung kompresi lossy yang dapat menghasilkan gambar dengan ukuran file yang lebih kecil.

PNG (Portable Network Graphics):

• Format yang mendukung gambar dengan latar belakang transparan.
• Biasanya digunakan untuk gambar dengan kualitas tinggi atau yang memerlukan transparansi.

GIF (Graphics Interchange Format):

• Format yang mendukung animasi sederhana.
• Meskipun mendukung animasi, di Flutter, penggunaan animasi GIF yang kompleks dapat memerlukan paket eksternal atau solusi khusus.

WebP:

• Format gambar modern yang dikembangkan oleh Google.
• Menyediakan kualitas kompresi yang baik dan mendukung transparansi.

BMP (Bitmap Image File):

• Format gambar tanpa kompresi yang menyimpan data gambar dalam bentuk bit per pixel.
• Tidak seefisien format lainnya dalam hal ukuran file, tetapi masih didukung.

TIFF (Tagged Image File Format):

• Format yang mendukung banyak warna dan kompresi tanpa kehilangan data.
• Umumnya digunakan dalam industri grafis dan fotografi.

SVG (Scalable Vector Graphics):

• Format berbasis vektor yang mendukung grafik skalar tanpa kehilangan kualitas.
• Meskipun Flutter tidak secara langsung mendukung SVG melalui widget Image, ada paket pihak ketiga seperti flutter_svg yang memungkinkan penggunaan SVG.

Asset Image:

• Selain format gambar berbasis file, Flutter juga mendukung gambar yang dimuat dari sumber daya aset aplikasi.

Memory Image:

• Anda dapat membuat gambar langsung dari data di dalam memori menggunakan widget MemoryImage.

Di Flutter, terdapat beberapa jenis ImageProvider yang digunakan untuk memuat gambar dari berbagai sumber. ImageProvider adalah abstraksi yang digunakan oleh widget Image untuk mendapatkan gambar. Beberapa jenis provider gambar yang umum digunakan termasuk:

AssetImage:

• AssetImage digunakan untuk memuat gambar dari sumber daya aset aplikasi.
• Contoh penggunaan:

                      
                        Image(
  image: AssetImage('assets/image.png'),
)

                        
                      
                      Salin
                    

NetworkImage:

• NetworkImage digunakan untuk memuat gambar dari URL internet.
• Contoh penggunaan:

                            
                              Image(
  image: NetworkImage('https://example.com/image.jpg'),
)


                            
                            Salin
                          

FileImage:

• FileImage digunakan untuk memuat gambar dari file lokal di perangkat.
• Contoh penggunaan:

                                
                                  Image(
  image: FileImage(File('path/to/image.jpg')),
)

                                  
                                
                                Salin
                              

MemoryImage:

• MemoryImage digunakan untuk membuat gambar langsung dari data yang ada di dalam memori.
• Contoh penggunaan:

                                  
                                    Image(
  image: MemoryImage(Uint8List.fromList(imageBytes)),
)



                                  
                                  Salin
                                

Ada 4 format yang mendukung, tapi kebanyakan orang hanya menggunakan 2 format yaitu assetimage dan networkimage, seperti biasa kita akan praktek cara memakainya, Letsss Gooo!!

1. assetImage

    Nahh untuk assetimage ada langkah atau step tambahan yaitu kita mendeklarasikan di pubspec.yaml. Langkah langkahnya seperti berikut

1. Pergi ke pubspec.yaml
2. Scroll ke bawah di angka 61 sampai 64 an, seperti ini

   

3. Dan kalian ubah jadi seperti ini

 

4. Setelah itu kalian buat folder baru dengan nama image dibagian Explorer

5. Nahh kalian tinggan drag and drop gambar kalian dari komputer/ Laptop ke folder tersebut

6. Setelah itu kalian tekan gambar itu sekali aja dan kalian  copy dengan cara ctrl + C 

7. Baikk untuk sekarang kalian buat codenya, Contohnya seperti berikut

                              
                                Center(
  child: Container(
    height: 200,
    width: 200,
    child: Image.asset(''),
  ),
)
 



                              
                              Salin
                            

Okkk setelah itu kalian tinggal pastekan saja kedalam asset tersebut seperti ini

                              
                                Center(
  child: Container(
    height: 200,
    width: 200,
    child: Image.asset('image/fb_icon_325x325-removebg-preview.png'),
  ),
)


                              
                              Salin
                            

Dan ini hasilnya

2. networkImage

Nahh untuk networkimage kita tidak perlu step yang panjang seperti assetimage, cuman bentar aja, berikut langkahnya

1. Kalian pergi google chrome atau yang lain
2. pilih gambar gambar yang kalian inginkan
3. setelah itu klik kanan dan pilih opsi Copy image address
4. setelah itu kalian ganti saja argumentnya, kalau tadi menggunakan argument assetimage sekarang pilih networkimage
5. dan kalian pastekan saja kedalamnya

Perlu diingat, kalau networkimage tidak membutuhkan folder tambahan seperti tadi dan kita panggil di pubspec.yaml, jadi kalian hanya pure copy paste dari internet, Apakah kalian paham? Horee

Nahh segitu dulu pembahasan kita kali ini, See you next time and Byee