Card image cap
[Flutter][22] ListView, Array Map, ListView Builder, Menampilkan Array Object ke dalam List
Tuesday, 07 May 2019

Hello world,

Melanjutkan dari post sebelumnya yang membahas mengenai array map dan listview, kali ini sedikit berbeda karena array yang ditampilkan sedikit lebih rumit (lihat di bawah). Pada dasarnya struktur datanya adalah object dalam array yang biasa kita lihat dalam file JSON. Dan kali ini array di bawah ini akan dicoba ditampilkan dengan dua cara berbeda yaitu Array Map dan ListView.Builder.

var lokasi = [
{
'kota': 'Jakarta',
'img':
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Jakarta_Panorama.jpg/300px-Jakarta_Panorama.jpg'
},
{
'kota': 'Surabaya',
'img':
'https://www.goodnewsfromindonesia.id/uploads/post/large-surabaya-6b40c47198235b9b7d075492a0745ca8.jpg'
},
{
'kota': 'Jogjakarta',
'img':
'https://s3-ap-southeast-1.amazonaws.com/traveloka/imageResource/2018/12/10/1544412660735-aeface5904e4948ee6468eaec91784a1.jpeg'
}
];


Cara 1 : Array Map

import 'package:flutter/material.dart';

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

class Halamantiga extends StatelessWidget {
var lokasi = [
{
'kota': 'Jakarta',
'img':
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Jakarta_Panorama.jpg/300px-Jakarta_Panorama.jpg'
},
{
'kota': 'Surabaya',
'img':
'https://www.goodnewsfromindonesia.id/uploads/post/large-surabaya-6b40c47198235b9b7d075492a0745ca8.jpg'
},
{
'kota': 'Jogjakarta',
'img':
'https://s3-ap-southeast-1.amazonaws.com/traveloka/imageResource/2018/12/10/1544412660735-aeface5904e4948ee6468eaec91784a1.jpeg'
}
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: new ListView(
children: lokasi.map((nama){
return new Card(
child: new Column(
children: <Widget>[
new Image(
image: NetworkImage('${nama['img']}'),
),
new Text('${nama['kota']}')
],
),
);
}).toList()
),
),
);
}
}


Cara 2 : ListView Builder

import 'package:flutter/material.dart';

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

class Halamantiga extends StatelessWidget {
var lokasi = [
{
'kota': 'Jakarta',
'img':
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Jakarta_Panorama.jpg/300px-Jakarta_Panorama.jpg'
},
{
'kota': 'Surabaya',
'img':
'https://www.goodnewsfromindonesia.id/uploads/post/large-surabaya-6b40c47198235b9b7d075492a0745ca8.jpg'
},
{
'kota': 'Jogjakarta',
'img':
'https://s3-ap-southeast-1.amazonaws.com/traveloka/imageResource/2018/12/10/1544412660735-aeface5904e4948ee6468eaec91784a1.jpeg'
}
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: new ListView.builder(
itemCount: lokasi.length,
itemBuilder: (context, i) {
return new Card(
child: new Column(
children: <Widget>[
new Image(
image: NetworkImage('${lokasi[i]['img']}'),
),
new Text('${lokasi[i]['kota']}')
],
),
);
},
),
),
);
}
}


Cara mana yang lebih bagus untuk dipakai? tergantung situasinya. Jika Jumlah datanya cukup banyak atau mengambil data secara online dari API mungkin lebih baik pakai Listview builder (menurut saya) meskipun pada dasarnya sama saja. 

Selamat mencoba :)