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

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

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

349a7f52975989094c75c055f9f6ba25?s=128

Dicoding Indonesia

June 07, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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