Menampilkan Gambar di Flutter

Assalamualaikum,

Hallo semua, kali ini kita akan belajar bagaimana menampilkan gambar pada flutter, untuk menampilkan gambar pada flutter sebenarnya kita dapat menggunakan dua cara yaitu:

•  Menggunakan Asset

Asset digunakan ketika kita akan menampilkan gambar yang sifatnya lokal, yang dimana artinya gambar tersebut dapat di akses tanpa koneksi internet. Atau gambar tersebut tersimpan di dalam project flutter kita. Hanya saja ketika kita menggunakan cara ini, apabila aplikasi yang kita buat memiliki jumlah gambar yang cukup banyak, tentu akan membuat ukuran aplikasi yang kita buat membengkak. Sehingga tidak direkomendasikan untuk menyimpan gambar2 secara lokal kecuali untuk icon dan logo. 

Contoh penggunaannya sebagai berikut:

Langkah pertama :

• Create New Folder

Pada bagian ini kita membuat folder baru dengan nama "asset".

• Menambahkan gambar kadalam folder asset

Pada bagian ini kita mengupload gambar ke dalam project yang kita buat, seperti gambar dibawah ini.

• Menginisialisasi image yang telah di upload ke dalam pubspec.yaml
  

Image/Gambar yang telah kita upload tidak secara otomatis akan dikenali oleh flutter, untuk itu kita perlu melakukan inisialisasi terlebih dahulu agar gambar yang telah kita upload terbaca oleh flutter.

Secara default isi dari pubsepec.yaml pada flutter akan tersusun seperti gambar di atas. Selanjutnya di rubah menjadi seperti berikut:

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the material Icons class.

uses-material-design: true

# To add assets to your application, add an assets section, like this:

assets:

- asset/hermanto.png

Perlu diperhatikan penulisan asset pastikan sesuai baik spasi  ataupun nama gambar. Kemudian lakukan pub-get agar gambar yang sudah ada di dalam asset dan terbaca.

Setalah itu mari kita coba untuk memanggil gambar yang telah kita masukkan dengan menggunakan cara AssetImage.

Code : 

import 'package:flutter/material.dart';

void main() => runApp(Latihan());

class Latihan extends StatelessWidget {

const Latihan({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Belajar(),

);

}

}

class Belajar extends StatelessWidget {

const Belajar({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Facebook"),

),

body: Center(

child: Image(

image: AssetImage("asset/hermanto.png"),

),

),

);

}

}

Adapun tampilan ketika di jalankan yaitu sebagai berikut:

• Menggunakan Network Image

Untuk menampilkan gambar menggunakan Network Image dapat dilakukan dengan cara yang cukup mudah, yaitu langkah pertama yang kita lakukan mencopy link address image yang ada.

Kemudian link tersebut dimasukkan ke dalam Widget NetworkImage. 

import 'package:flutter/material.dart';

void main() => runApp(Latihan());

class Latihan extends StatelessWidget {

const Latihan({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Belajar(),

);

}

}

class Belajar extends StatelessWidget {

const Belajar({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Facebook"),

),

body: Center(

child: Image(

image: NetworkImage("https://www.petanikode.com/img/flutter/flutter.png"),

),

),

);

}

}

Adapun tampilan hasilnya sebagai berikut.

Terimakasih, bila ada pertanyaan silahkan di kolom komentar.