Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

349a7f52975989094c75c055f9f6ba25?s=128

Dicoding Indonesia

June 07, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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