[Flutter][21] ListView, Array Map, Menampilkan Array Sederhana ke dalam List

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
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 :)