Card image cap
[Flutter][21] ListView, Array Map, Menampilkan Array Sederhana ke dalam List
Tuesday, 07 May 2019

Hello world,

Sesuai judul, pembahasan kali ini sudah mulai masuk ke bagian-bagian yang berkaitan dengan proses menampilkan data. Kita awali dengan yang sederhana lebih dahulu yaitu data dalam bentuk array yang akan ditampilkan dalam bentuk list. Contoh array yang akan dicoba sebagai berikut:

List lokasi = [
'Jakarta',
'Bandung',
'Bogor',
'Bekasi',
'Malang',
'Surabaya',
'Jogjakarta',
'Solo'
];

Selanjutnya kita buat halaman berisi listview

import 'package:flutter/material.dart';

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

class Halamantiga extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: ListView(
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
),
),
);
}
}

Selanjutnya kita dapat menambahkan Array ke dalam statelesswidget dan juga mengubah listview (tanda bold di atas) menjadi sebagai berikut.

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: ListView(
children: lokasi.map((nama) {
return ListTile(
leading: Icon(Icons.map),
title: Text(nama),
);
}).toList(),
),
),
);
}


Full Codenya akan menjadi seperti ini:

import 'package:flutter/material.dart';

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

class Halamantiga extends StatelessWidget {
List lokasi = [
'Jakarta',
'Bandung',
'Bogor',
'Bekasi',
'Malang',
'Surabaya',
'Jogjakarta',
'Solo'
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: ListView(
children: lokasi.map((nama) {
return ListTile(
leading: Icon(Icons.map),
title: Text(nama),
);
}).toList(),
),
),
);
}
}

Dari code di atas dapat dilihat bahwa dari array bernama lokasi ditampilkan menggunakan map berisi listTile.

Selamat mencoba :)