Tips dan Trik Menampilkan Gambar dengan Image Widget di Flutter

Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu Tips dan Trik Desain Antarmuka yang Menarik dengan ListTile di Flutter. Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga.

Pada pembahasan artikel ini, kita akan membahas Tips dan Trik Menampilkan Gambar dengan Image Widget di Flutter. Daripada penasaran, yuk kita bedah!

Apa itu Image Widget?

Image Widget adalah widget yang manfaatnya untuk menampilkan gambar di dalam aplikasi. Widget ini biasanya digunakan oleh developer yang ingin menampilkan gambar melalui berbagai sumber, seperti Image Widget bisa diaplikasikan melalui assets lokal yang ada didalam aplikasi, melalui jaringan dengan URL (Network), maupun file dari developer.

Jenis-jenis penggunaan Image Widget di Flutter:

  1. Assets

Assets dapat memungkinkan developer untuk menampilkan gambar melalui folder assets yang kita buat untuk aplikasi Flutter. Untuk menampilkan gambar dari assets lokal, teman-teman bisa menambahkan code ini:

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

Tambahan untuk teman-teman:

  1. Setelah menambahkan image pada folder assets, perlu dipastikan untuk menambah asset image-nya pada pubspec.yaml
  • 2. Network

Network dapat memungkinkan developer untuk menampilkan gambar melalui URL, dan Network ini merupakan bagian dari ‘Image’ dari class ‘NetworkImage’. Untuk menampilkan gambar dari URL, teman-teman bisa menambahkan code ini:

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

Tidak hanya itu, dengan kita menambahkan image widget didalam aplikasi yang kita buat. Kita juga dapat menambahkan atribut fit yang berguna untuk menentukan tempat gambar yang kita tampilkan pada widget, antara lain:

  1. BoxFit.cover : Gambar yang ditampilkan akan diatur sepenuhnya untuk menutupi area kontainer, dengan tambahan tidak mengubah bentuk dari aspek rasio.
  2. BoxFit.fill : Gambar yang ditampilkan akan diatur untuk mengisi secara penuh kontainer, dengan tambahan akan menyebabkan distorsi pada aspek rasio gambar.
  3. BoxFit.contain : Gambar yang ditampilkan akan disesuaikan dengan area di dalam kontainer dengan tambahan aspek rasio dipertahankan tanpa melebihi area kontainer.
  4. BoxFit.width : Gambar yang ditampilkan akan disesuaikan dengan sesuai lebar dari kontainer, dengan tambahan aspek rasio tetap akan dipertahankan.
  5. BoxFit.height : Gambar yang ditampilkan akan disesuaikan dengan sesuai tinggi dari kontainer, dengan tambahan aspek rasion akan dipertahankan.
  6. BoxFit.none : Gambar yang ditampilkan tidak diubah ukurannya, sehingga gambar akan lebih besar dari kontainer dan bagian yang tidak dimuat akan terpotong.
  7. BoxFit.scaleDown : Gambar yang ditampilkan akan diperkecil sehingga dapat memuat dengan area kontainer, dengan tambahan tidak akan diperbesar jika lebih kecil dari kontainer.

Contoh penggunaan Image Widget :

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Latihan Image Widget'),
        ),
        body: Center(
          child: Image.network(
            'https://picsum.photos/200/300',
            width: 200,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Output Image Widget :

Kesimpulan

Image Widget di Flutter ini mempunyai manfaat untuk menampilkan gambar dalam aplikasi mobile yang kita buat. Penggunaan image widget ini memungkinkan kita untuk menampilkan gambar dari berbagai sumber seperti assets, URL gambar yang ada di internet, hingga gambar dari file penyimpanan perangkat. Dengan menggunakan image widget di Flutter, kita dapat mengontrol dengan baik terhadap pengembangan aplikasi yang kita buat dalam menampilkan gambar dari berbagai sumber, sehingga dapat membuat pekerjaan kita menjadi lebih fleksibel dan aplikasi pun berjalan dengan sesuai dengan yang kita inginkan.

Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.