Dicoding Developer Coaching #51: Flutter | Membuat List Lebih Menarik dengan Sliver Widget

Kita tahu bahwa Widget ListView dan GridView merupakan widget sederhana untuk membuat aplikasi dengan scrolling sebuah List sederhana. Namun, apa jadinya jika ingin membuat List dan Grid dapat scroll bersamaan atau membuat efek scrolling yang kompleks?

Sliver Widget hadir untuk mengatasi masalah tersebut. Pada dasarnya, widget ini merupakan implementasi dari ListView dan GridView. Sliver sendiri merupakan bagian dari area yang scrollable di dalam Custom Scroll View. Flutter menyediakan berbagai macam widget Sliver seperti SliverListView, SliverGridView, SliverAppBar, dan masih banyak lainnya. Untuk lebih lengkapnya akan dibahas pada Developer Coaching dengan poin pembahasan seperti berikut:

- Pengenalan Sliver Widget
- Penjelasan beberapa Sliver Widget
- Penerapan Sliver Widget

Transcript

1. Membuat List Lebih Menarik dengan Sliver Widget Dicoding Developer Coaching #51 Achmad Ilham Curriculum Developer Dicoding
2. Apa itu Sliver? • Suatu bagian yang dapat melakukan scroll. • Low-level widget untuk melakukan scrolling. • Seluruh widget yang dapat di scroll mengandung Sliver.
3. Bedanya dengan Widget Scrolling lain • Dapat kustomisasi widget dengan bebas. • Banyak widget yang digunakan. • Dapat membuat efek scrolling yang menarik.
4. Macam-macam Widget Sliver • SliverAppBar • SliverList • SliverGrid • SliverPadding • SliverPersistentHeader • SliverFillRemaining • SliverToBoxAdapter • Dan lainnya.. Widget Penting : CustomScrollView dan NestedScrollView
5. Widget CustomScrollView Seperti widget ScrollView, namun khusus untuk widget-widget Sliver. return const CustomScrollView( slivers: [ /// Sliver widget ], );
6. Widget NestedScrollView Membangun ScrollView yang bersarang. Widget ini biasanya digunakan ketika ingin menampilkan CustomScrollView + TabBarView. return NestedScrollView( headerSliverBuilder: (context, innerBoxIsScrolled) { return [ /// Sliver widget SliverToBoxAdapter( child: Text("dasd"), ), ]; }, body: /// Widget );
7. SliverAppBar Desain Material AppBar yang mendukung Sliver. return SliverAppBar( title: Text("Sliver App Bar"), );
8. Contoh Penerapan Widget Sliver
9. Let’s Code
10. Referensi : • https://flutter.dev/go/sliver-workshop • https://docs.flutter.dev/development/ui/advanced/slivers
11. Dicoding Dicoding Dicoding Dicoding Indonesia Contact us : Contact me : ilham@dicoding.com