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
   

   View Slide

2. Scrollable Widgets
   Banyak sekali widget yang dapat
   melakukan scrolling terhadap widget
   children-nya, antara lain:
   ● SingleChildScrollView
   ● ListView
   ● GridView
   ● DraggableScrollableSheet
   ● …
   

   View Slide

3. import 'package:flutter/material.dart';
   class HomePage extends StatelessWidget {
   const HomePage({Key? key}) : super(key: key);
   final List _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
   

   View Slide

4. Lalu, bagaimana cara untuk
   menampilkan list dengan data
   dalam jumlah besar?
   Apakah bisa menampilkan list
   menggunakan widget
   SingleChildScrollView + Column ??
   Iya, tetapi…
   

   View Slide

5. ListView
   Widget dapat melakukan scrolling seperti
   Scrollable Widget pada umumnya.
   Widget ini akan menampilkan widget
   children satu per satu ketika sedang
   scrolling.
   

   View Slide

6. ListView
   Ada 4 opsi constructor ListView yang dapat
   digunakan:
   ● Default constructor
   ● ListView.builder
   ● ListView.separated
   ● ListView.custom
   

   View Slide

7. ListView (default)
   import 'package:flutter/material.dart';
   class HomePage extends StatelessWidget {
   const HomePage({Key? key}) : super(key: key);
   final List _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),
   ),
   ],
   ),
   );
   }
   }
   

   View Slide

8. GridView
   Widget dapat melakukan scrolling seperti
   Scrollable Widget pada umumnya namun
   dalam bentuk 2D (baris dan kolom).
   

   View Slide

9. Ada 5 opsi constructor GridView yang
   dapat digunakan:
   ● Default constructor
   ● GridView.count
   ● GridView.builder
   ● GridView.custom
   ● GridView.extend
   GridView
   

   View Slide

10. GridView(default)
    import 'package:flutter/material.dart';
    class HomePage extends StatelessWidget {
    const HomePage({Key? key}) : super(key: key);
    final List _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),
    ),
    ],
    ),
    );
    }
    }
    

    View Slide

11. Dicoding
    Dicoding
    Dicoding
    Dicoding Indonesia
    Contact us :
    Contact me :
    ilham@dicoding.com
    

    View Slide