Card image cap
[Flutter][5] Menambahkan dan Menampilkan Gambar dengan Image Widget
Thursday, 21 Feb 2019

Hello world,

Hari ini pembahasannya adalah tentang penggunaan gambar atau image widget. Sama seperti di website, di dalam flutter kita bisa membuat folder khusus berisi asset dan menampilkannya dalam aplikasi. Di sini saya menggunakan kode dari post sebelumnya seperti di bawah ini:

import 'package:flutter/material.dart';

void main(){
runApp(
new MaterialApp(
title: "My Apps",
home: new Myapp(),
)
);
}


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: new Icon(
Icons.home,
size: 40.0,
color: Colors.blue,
),
)
);
}
}

Saya di sini akan mengubah widget icon di dalam contoh di atas menjadi image. Pertama kita harus menyiapkan gambar yang ingin ditampilkan. Lalu kita buat folder baru di dalam project kita. Di sini saya menamakan foldernya dengan nama "assets" seperti pada gambar di bawah. Penamaan di sini bebas ya. Semua gambar akan saya masukkan ke folder tersebut.

Folder assets

Lanjut ke tahap selanjutnya yaitu mendaftarkan gambar yang akan kita gunakan. Di sini saya memasukkan satu gambar dengan nama image01.jpg ke dalam folder assets. Untuk mendaftarkan asset kita ke dalam project kita bisa membuka file pubspec.yaml. Tambahkan kode di bawah ini pada baris paling bawah (atau di bawah kode flutter di baris 33).

assets:
- assets/image01.jpg

Selanjutnya untuk menampilkan data kita bisa menambahkan widget image seperti di bawah ini :

new Image.asset('assets/image01.jpg')

Full kodenya menjadi seperti ini :

import 'package:flutter/material.dart';

void main(){
runApp(
new MaterialApp(
title: "My Apps",
home: new Myapp(),
)
);
}


class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: new Image.asset('assets/image01.jpg')
)
);
}
}

Jalankan aplikasi untuk melihat hasilnya. Kita bisa juga menambahkan width untuk mengatur ukuran gambar.

new Image.asset('assets/image01.jpg', width: 100.0,)

Nah bagaimana kalau gambarnya kita ambil dari online atau website lain?. Begini caranya.

new Image(image: NetworkImage("http://code.byriza.com/lib/blog/flutter222.png"),),


Selamat Mencoba :)