Widget adalah salah satu komponen dasar dalam Flutter, yang bertanggung jawab untuk menampilkan user interface (UI) dalam aplikasi Flutter. Setiap widget merupakan objek yang diinstansiasi dari kelas widget yang tersedia di dalam framework Flutter. Widget dapat bersifat statis atau dinamis, tergantung pada apakah widget tersebut mampu merespon perubahan dari aplikasi atau tidak.

Di flutter Widget dapat berupa elemen-elemen UI seperti tombol, teks, gambar, atau container. Widget juga dapat mengandung widget lainnya sebagai anak-anaknya (child widgets), yang memungkinkan Anda untuk membuat struktur UI yang lebih kompleks.

Flutter menyediakan banyak widget yang siap digunakan yang dapat membantu Anda dalam membuat UI aplikasi Anda. Anda juga dapat membuat widget Anda sendiri dengan meng-extend kelas widget yang tersedia atau dengan menggabungkan beberapa widget yang ada menjadi satu widget baru yang lebih kompleks.

Widget Image di Flutter

DI flutter Image widget digunakan untuk menampilkan gambar dalam aplikasi. Widget ini bisa menampilkan gambar dari file-file gambar yang tersimpan secara lokal di dalam aplikasi, atau dari URL di internet.

Contoh sederhana penggunaan Image widget adalah sebagai berikut:

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

Anda juga dapat mengatur beberapa properti lain dari Image widget, seperti ukuran, margin, dan aligment. Misalnya:

Image(
  image: NetworkImage('https://www.example.com/image.jpg'),
  width: 50,
  height: 50,
  margin: EdgeInsets.all(10),
  alignment: Alignment.center,
)

Baca Juga

Flutter: Membuat Button di flutter

Tambah Asset Image dari local storage

Untuk memuat gambar dari assets dalam aplikasi Flutter, Anda bisa menggunakan AssetImage class. Contohnya:

Image(
  image: AssetImage('assets/images/image1.jpg'),
)

Sebelumnya pastikan anda telah menambahkan asset image di pubsec.yaml, contohnya :

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/
    - assets/image/
    - assets/logo/

Jika Anda ingin memuat gambar yang memiliki resolusi yang berbeda sesuai dengan ukuran layar perangkat yang digunakan, Anda bisa menggunakan AssetImage dengan menentukan nama file yang berbeda untuk setiap resolusi. Misalnya:

Image(
  image: AssetImage(
    'assets/images/image1_${devicePixelRatio}.jpg',
  ),
)

Dengan menambahkan devicePixelRatio pada nama file, Flutter akan memuat gambar yang sesuai dengan resolusi perangkat yang digunakan. Jika Anda memiliki file image1_2.jpg dan image1_3.jpg, maka Flutter akan memuat file image1_2.jpg untuk perangkat dengan device pixel ratio 2, dan file image1_3.jpg untuk perangkat dengan device pixel ratio 3.