Tutorial Futter

4 materi





Menggunakan ListView Flutter

Publish : 19 Jan 2020 | Software Programming Mobile App





Share this post :

fb-icon tw-icon pt-icon wa-icon


Pada artikel kali ini saya akan membuat cara menggunakan ListView pada Flutter. Disini saya sudah membuat project baru, isi dari file main.dart adalah seperti berikut:

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
          return MaterialApp(
               title: 'Tutorial Drawer',
               debugShowCheckedModeBanner: false,
               theme: ThemeData(
                    primarySwatch: Colors.blue,
                                ),
               home: HalamanHome(),
          );
    }
}

class HalamanHome extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
          return Scaffold(
              appBar: AppBar(
                  title: Text('IDR CORNER LISTVIEW'),
                  backgroundColor: Colors.orangeAccent,
                  centerTitle: true,
              ),

              body: MyList()
          );
     }
}

 

class MyList extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
          return Container(

          );
     }
}

 

Pada MaterialApp, home nya adalah HalamanHome().

HalamanHome memiliki nilai balik adalah sebuah Scaffold, yang memiliki body class MyList()

Pada class MyList disini nilai baliknya masih standar, yaitu sebuah Container yang kosong.

 

1. ListView Standar :

Membuat list standar kita dapat menggunakan widget ListView pada class MyList()

 

class MyList extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
          return ListView(
              children: <Widget>[
                  ListTile(
                     title: Text("List Item 1"),
                     leading: Icon(Icons.check),
                  ),
                     ListTile(
                     title: Text("List Item 2"),
                     leading: Icon(Icons.check),
                  ),
                  ListTile(
                     title: Text("List Item 3"),
                     leading: Icon(Icons.check),
                  ),
              ],
          );
     }
}

 

Apabila item ListView berjumlah banyak dan melebihi tampilan layar, maka list akan otomatis dapat di Scroll.

Agar ListView otomatis memiliki garis pembatas antara item, dapat menggunakan ListTile.divideTiles, contoh :

 

class MyList extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return ListView(
           children:ListTile.divideTiles(
                context: context,
                tiles: [
                    ListTile(
                        title: Text("List Item 1"),
                        leading: Icon(Icons.check),
                    ),
                    ListTile(
                        title: Text("List Item 2"),
                        leading: Icon(Icons.check),
                    ),
                    ListTile(
                        title: Text("List Item 3"),
                        leading: Icon(Icons.check),
                    ),
                ],
           ).toList()
      );
   }
}

 

 

 

2. ListView dari data Array/Object :

 

Untuk membuat List yang berasal dari data Array sebuah object, langkah pertama saya akan membuat sebuah file baru sebagai model untuk data yang akan digunakan. Dalam contoh ini adalah data Contacts.

contacts.dart

class Contacts {

    String nama;
    String alamat;
    String tlp;
    String avatar;
    Contacts({this.nama, this.alamat, this.tlp, this.avatar});
}

 

main.dart

import 'package:flutterappbar/models/contacts.dart';
 
...
...
class MyList extends StatelessWidget {
    final contacts = [
       Contacts(nama:'Idr Corner', alamat:'JL. Merdeka No. 1', tlp:'01100110', avatar:'1.png'),
       Contacts(nama:'Khalid Al Faruq', alamat:'Jl. Pemuda No. 1', tlp:'08123123', avatar:'2.jpg'),
       Contacts(nama:'Dora Explorer', alamat:'Jl. Laskar Pelangi NO.1', tlp:'01234567', avatar:'3.png'),
       Contacts(nama:'Putri Salju', alamat:'Jl. Madu tiga', tlp:'44344344', avatar:'4.png'),
       Contacts(nama:'Massa and The Bear', alamat:'Jl. Mekarsari', tlp:'12332112', avatar:'5.png'),
       Contacts(nama:'3 Litle Ducks', alamat:'Jl. Kolam Ikan No. 5', tlp:'76776777', avatar:'6.jpg'),
    ];
    @override
    Widgetbuild(BuildContext context) {
        return  ListView.builder(
           itemCount: contacts.length,
           itemBuilder: (context, index) {
                return  ListTile(
                   title: Text(contacts[index].nama),
                   subtitle: Text(contacts[index].alamat),
                );
           },
        );
    }
}
...
...
 
 
 
 

3. Custom List Item:

 

Pada contoh ini saya akan menggunakan gambar sesuai dengan nama avatar pada data array diatas. Langkah yang akan saya lakukan adalah membuat folder images untuk gambar-gambar avatar dan mendaftarkan gambarnya pada file pubspec.yaml

 

pubspec.yaml   

 

Selanjutnya pada file main.dart, pada class MyList, return dari ListView.Builder ganti dengan sebuah custom class bernama CardList(), dan buat sebuah class baru bernama CardList(), untuk mendesain tampilan card item-nya.

 

class MyList extends StatelessWidget {
    final contacts = [
       Contacts(
          nama: 'Idr Corner',
          alamat: 'JL. Merdeka No. 1',
          tlp: '01100110',
          avatar: '1.png'),
       Contacts(
          nama: 'Khalid Al Faruq',
          alamat: 'Jl. Pemuda No. 1',
          tlp: '08123123',
          avatar: '2.jpg'),
       Contacts(
          nama: 'Dora Explorer',
          alamat: 'Jl. Laskar Pelangi NO.1',
          tlp: '01234567',
          avatar: '3.png'),
       Contacts(
          nama: 'Putri Salju',
          alamat: 'Jl. Madu tiga',
          tlp: '44344344',
          avatar: '4.png'),
       Contacts(
          nama: 'Massa and The Bear',
          alamat: 'Jl. Mekarsari',
          tlp: '12332112',
          avatar: '5.png'),
       Contacts(
          nama: '3 Litle Ducks',
          alamat: 'Jl. Kolam Ikan No. 5',
          tlp: '76776777',
          avatar: '6.jpg'),
    ];
    @override
    Widgetbuild(BuildContext context) {
        return ListView.builder(
             itemCount: contacts.length,
             itemBuilder: (context, index) {
                  return CardList(contacts[index]);
             },
        );
    }
}
class CardList extends StatelessWidget {
     finalContacts contact;
     CardList(this.contact);
     @override
     Widgetbuild(BuildContext context) {
         return Padding(
             padding: const EdgeInsets.all(10.0),
                 child: Card(
                     child: Row(
                        children: <Widget>[
                             Padding(
                                padding: const EdgeInsets.only(top: 8,left: 8,right: 20,bottom: 8),
                                child: Container(
                                    width: 100,
                                    height: 100,
                                    decoration: BoxDecoration(
                                       image: DecorationImage(
                                          image: AssetImage("images/${contact.avatar}"),
                                          fit: BoxFit.cover
                                       ),
                                       shape: BoxShape.circle
                                    ),
                                ),
                             ),
                             Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: <Widget>[
                                     Text(contact.nama,
                                                                                     style:TextStyle(fontSize:20,color:Colors.blue),),
                                     Row(
                                       children: <Widget>[
                                            Icon(Icons.home, color:Colors.grey,),
                                            Text(contact.alamat),
                                       ],
                                     ),
                                     Row(
                                       children: <Widget>[
                                            Icon(Icons.phone, color:Colors.grey,),
                                            Text(contact.tlp),
                                       ],
                                     ),
                                 ],
                             )
                        ],
                   ),
             ),
        );
    }
}
 

Share this post :

fb-icon tw-icon pt-icon wa-icon