Dicoding Developer Coaching #49: Flutter | Kenali Widget ListView dan GridView Lebih Dekat

Umumnya, membangun aplikasi tidak lepas dari menampilkan beberapa item yang dapat di scroll secara mendatar (horizontal) dan menurun (vertical). Dengan jumlah item yang banyak, kita dapat membangun sebuah list dengan fleksibel dan dinamis tanpa perlu membuatnya satu per satu secara statik.

Flutter telah memperkenalkan widget ListView dan GridView untuk mempermudah membuat list secara dinamis. Tidak hanya itu, widget tersebut dapat melakukan scrolling secara horizontal dan vertical sesuai arah yang kita inginkan. Untuk lebih lengkapnya akan dibahas pada Developer Coaching dengan poin pembahasan seperti berikut:

- Pengenalan widget yang scrollable
- Pendahuluan ListView dan GridView
- Penerapan list dalam aplikasi

Transcript

1. Kenali Widget ListView dan GridView Lebih Dekat Dicoding Developer Coaching #49 Achmad Ilham Curriculum Developer Dicoding
2. Scrollable Widgets Banyak sekali widget yang dapat melakukan scrolling terhadap widget children-nya, antara lain: • SingleChildScrollView • ListView • GridView • DraggableScrollableSheet • …
3. import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); final List<String> _dataName = const [ "Cut Nyak Dien", "Ki Hajar Dewantara", "Moh Yamin", "Patimura", "R A Kartini", "Ir Sukarno", "Imam Bonjol", "Jendral Soedirman", "Pangeran Diponegoro", "Sultan Hasanuddin", "Mohammad Hatta", "H.O.S. Cokroaminoto", "Hasyim Asyari", "Bung Tomo", "Tjoet Nyak Dien", ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("Scrollable Widget")), body: SingleChildScrollView( child: Column( children: [ for (String data in _dataName) ListTile( title: Text(data), ), ], ), ), ); } } Common Scrollable Widget SingleChildScrollView + Column
4. Lalu, bagaimana cara untuk menampilkan list dengan data dalam jumlah besar? Apakah bisa menampilkan list menggunakan widget SingleChildScrollView + Column ?? Iya, tetapi…
5. ListView Widget dapat melakukan scrolling seperti Scrollable Widget pada umumnya. Widget ini akan menampilkan widget children satu per satu ketika sedang scrolling.
6. ListView Ada 4 opsi constructor ListView yang dapat digunakan: • Default constructor • ListView.builder • ListView.separated • ListView.custom
7. ListView (default) import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); final List<String> _dataName = const [ "Cut Nyak Dien", "Ki Hajar Dewantara", "Moh Yamin", "Patimura", "R A Kartini", "Ir Sukarno", "Imam Bonjol", "Jendral Soedirman", "Pangeran Diponegoro", "Sultan Hasanuddin", "Mohammad Hatta", "H.O.S. Cokroaminoto", "Hasyim Asyari", "Bung Tomo", "Tjoet Nyak Dien", ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("Scrollable Widget")), body: ListView( children: [ for (String data in _dataName) ListTile( title: Text(data), ), ], ), ); } }
8. GridView Widget dapat melakukan scrolling seperti Scrollable Widget pada umumnya namun dalam bentuk 2D (baris dan kolom).
9. Ada 5 opsi constructor GridView yang dapat digunakan: • Default constructor • GridView.count • GridView.builder • GridView.custom • GridView.extend GridView
10. GridView(default) import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); final List<String> _dataName = const [ "Cut Nyak Dien", "Ki Hajar Dewantara", "Moh Yamin", "Patimura", "R A Kartini", "Ir Sukarno", "Imam Bonjol", "Jendral Soedirman", "Pangeran Diponegoro", "Sultan Hasanuddin", "Mohammad Hatta", "H.O.S. Cokroaminoto", "Hasyim Asyari", "Bung Tomo", "Tjoet Nyak Dien", ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text("Scrollable Widget")), body: GridView( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, ), children: [ for (String data in _dataName) ListTile( title: Text(data), ), ], ), ); } }
11. Dicoding Dicoding Dicoding Dicoding Indonesia Contact us : Contact me : ilham@dicoding.com