Tutorial Menambahkan Gambar pada Aplikasi Flutter

Hampir semua aplikasi memiliki gambar, entah aplikasi berbasis website, desktop ataupun mobile. Pada artikel yang berjudul Tutorial Menambahkan Gambar pada Aplikasi Flutter kita akan membahas bagaimana cara menambahkan gambar pada aplikasi flutter kita.

Image.asset

Dengan metode satu ini kita akan menyimpan gambar pada file projek aplikasi yang kita buat. Jadi kita harus melakukan beberapa konfigurasi terlebih dahulu, yaitu membuat folder assets yang berguna menyimpan gambar kita. Kali ini saya akan membuat folder dengan struktur seperti ini assets/images. Buatlah folder dulu bernama assets setelah itu didalam assets buat folder lagi bernama images

Tutorial Menambahkan Gambar pada Aplikasi Flutter

kemudian letakan gambar kita didalam folder images. Lalu, sekarang kita akan mengubah file pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - assets/images/logo.png

Jalankan flutter pub get



Jika anda mengikuti struktur folder sepert diatas. Kita akan menggunakan gambar seperti ini

Image.asset('assets/images/logo.png')

Contoh penggunaanya seperti ini

return Scaffold(
 appBar: AppBar(
    title: Text('Contoh menggunakan Gambar'),
  ),
 body: Image.asset('assets/images/logo.png'),
);

Metode yang satu ini adalah kita akan menggunakan gambar dari internet. Tidak ada konfugurasi khusus untuk cara yang ini.

Image.network('https://tukangaplikasi.com/wp-content/uploads/2020/05/flutter_logo.png')

contoh penggunaanya seperti ini

Scaffold(
      appBar: AppBar(
        title: Text('Contoh menggunakan Gambar'),
      ),
      body: Image.network(
          'https://tukangaplikasi.com/wp-content/uploads/2020/05/flutter_logo.png'),
    );

Cached network image

Yang satu ini sama dengan Image.network, kita akan menggunakan gambar dari internet. Cached network Image merupakan plugin atau package yang tersedia untuk flutter.  Hal pertama yang akan kita lakukan untuk menggunakan Cached network Image mengubah file pubspec.yaml menjadi seperti ini

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  image_picker: 0.6.6+4
  image_cropper: 1.2.2
  cached_network_image: 2.2.0+1

kemudian jalankan flutter pub get.  Contoh penggunaanya adalah seperti ini

 

CachedNetworkImage(
        imageUrl: "https://tukangaplikasi.com/wp-content/uploads/2020/05/flutter_logo.png",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

Sekian artikel tentang Tutorial Menambahkan Gambar pada Aplikasi Flutter, semoga bermanfaat

Tinggalkan Balasan

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!

%d blogger menyukai ini: