Yu Tant

Home
flutter

Flutter : ListView dan ListTile

Hari ini belajar tentang listView dan listTile. Jelas sekali penggunaan list view dan list tile ini sangat tidak asing, cuma kadang kita nyebutnya beda beda. Tapi dengan menyesuaikan aplikasi Flutter ini ya mau tidak mau kita menyesuaikan kamus bahasanya. 😉 lanjut ya berikut screenshoot penggunaan List View :

Contoh penggunaan List View : 

class ListPiew extends StatelessWidget {
  final List<Color> warna = [
    Colors.orange,
    Colors.green,
    Colors.blue,
    Colors.purple,
    Colors.amber
  ];

  final List<Widget> nomor = List.generate(
      50,
      (index) => Text(
            "${index + 1}.",
            style: TextStyle(fontSize: 30),
          ));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('yTn : Penggunaan List View'),
          centerTitle: true,
        ),
        body: ListView(children: nomor),
      ),
    );
  }
}

dan berikut screenshoot penggunaan listTile 



Contoh kode penggunaan ListTile :


class AppList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('yTn : List View'),
        ),
        body: ListView(
          children: [
            ListTile(
              title: Text('yTn as Title'),
              subtitle: Text('Lorem Ipsum is simply dummy'),
              leading: CircleAvatar(
                backgroundColor: Colors.deepPurple[900],
              ),
              trailing: Text('07.30 AM'),
            ),
            Divider(
              color: Colors.black45,
            ),
            ListTile(
              contentPadding: EdgeInsets.all(10),
              title: Text('yTn as Title'),
              subtitle: Text(
                'Lorem Ipsum is simply dummy text of the printing and 
                typesetting industry. Lorem Ipsum has been the industrys 
                standard dummy text ever since the 1500s',
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              leading: CircleAvatar(
                backgroundColor: Colors.amber[900],
              ),
              trailing: Text('07.30 AM'),
            ),
            Divider(
              color: Colors.black45,
            ),
            ListTile(
              title: Text('yTn as Title'),
              subtitle: Text('Lorem Ipsum is simply dummy'),
              leading: CircleAvatar(
                backgroundColor: Colors.green[900],
              ),
              trailing: Text('07.30 AM'),
            ),
            Divider(
              color: Colors.black45,
            ),
            ListTile(
              title: Text('yTn as Title'),
              subtitle: Text('Lorem Ipsum is simply dummy'),
              leading: CircleAvatar(
                backgroundColor: Colors.red[900],
              ),
              trailing: Text('07.30 AM'),
            ),
          ],
        ),
      ),
    );
  }
}

Penjelasan listTile :

  • tittle = sebagai judul atau fokus baris utama.
  • subtitle = sub bagian dari title.
  • leading = fokus keterangan biasanya ber isi avatar.
  • trailing = note info biasanya berisi keterangan waktu.