Beberapa hal yang harus dihindari agar pengguliran tetap lancar
1. Kecilkan pembungkus ListView.builder atau gunakan NeverScrollableScrollPhysics.
Keuntungan utama penggunaannya ListView.Builder adalah mekanisme pengoptimalannya, yang menginisialisasi hanya item yang diperlukan untuk ditampilkan di layar. Hal ini membuatnya bekerja dengan lancar dengan ribuan item, seperti halnya dengan selusin item.
Bagaimana jika daftar yang ingin kita tampilkan perlu disematkan pada tampilan gulir lain? Kesalahan umum adalah menonaktifkan pengguliran dengan menambahkan NeverScrollableScrollPhysics atau menyetel shrinkWrap ke true. Pendekatan ini menginisialisasi semua item sekaligus, yang bisa menjadi masalah. Kita dapat melakukan eksperimen sederhana untuk mengonfirmasi masalah ini.
Seperti yang bisa kita lihat dari outputnya, semua item diinisialisasi secara bersamaan, sehingga menyebabkan hilangnya performa secara signifikan. Hal ini terjadi karena seluruh daftar dirender sekaligus, bukan hanya bagian yang terlihat.
Jadi, apa yang harus kita lakukan? Pendekatan yang disarankan adalah menggunakan Slivers. Sliver memungkinkan rendering yang lebih efisien dengan hanya membuat item yang saat ini terlihat di layar. Ini membantu menjaga kelancaran kinerja, bahkan dengan daftar besar.
Seperti yang bisa kita lihat, ini hanya menginisialisasi item yang akan ditampilkan di layar, ditambah sedikit lagi karena cache viewport. Beberapa item harus sudah diinisialisasi sebelumnya, sehingga tidak ada jitter saat pengguna mulai menggulir. Jumlah piksel yang akan di-cache dapat dikonfigurasi berdasarkan cacheExtent properti CustomScrollView atau ListView dan defaultnya adalah 250.
2. Membiarkan setiap item dalam daftar menentukan ketinggiannya sendiri.
Salah satu operasi termahal dalam rendering Flutter UI adalah menghitung ukuran widget. Saat menggambar daftar, ada cara untuk menghindari perhitungan yang berlebihan, terutama untuk daftar yang semua itemnya memiliki tinggi yang sama.
Anda dapat menggunakan dua properti untuk ini:
- prototypeItem — widget yang tingginya akan digunakan untuk setiap item daftar.
- itemExtent — nilai numerik yang menentukan tinggi setiap item.
Banyak tutorial menyarankan penggunaan itemExtent, namun memiliki beberapa kelemahan yang sering diabaikan. Jika Anda memberikan nilai konstan dan item daftar Anda berisi teks, tata letak mungkin rusak saat pengguna menambah ukuran font di pengaturan OS.
Untuk menghindarinya, Anda dapat menghitung ukuran sebenarnya item dengan mengalikan ukuran font dengan skala teks OS dan menambahkan padding. Itu mungkin menyusahkan dan sulit dipertahankan. Ada cara yang lebih baik untuk melakukannya:
Dalam hal daftar sliver, kami juga mempunyai kemungkinan untuk menyediakan prototipe:
Perhatikan bahwa ListView.separator tidak memiliki properti ini, pertimbangkan untuk menambahkan pembagi ke item daftar dan gunakan ListView.builder sebagai gantinya.
Agar tidak berdasar, mari kita lakukan benchmark:
Seperti yang bisa kita lihat, memiliki Slivers dengan sebuah itemPrototype memberikan hasil terbaik, namun peningkatan dari memiliki itemPrototype tidak terlalu terlihat dalam kasus ini.
3. Membungkus ListView menjadi widget Padding
Jika Anda ingin menambahkan padding ke ListView widget (ini juga berlaku untuk SingleChildScrollView), pastikan Anda tidak memasukkan a ListView ke dalam Padding widget. Melakukan hal ini akan bertindak seperti margin pada konten yang dapat di-scroll, bukan sebagai padding. Sebagai gantinya, tambahkan parameter padding langsung ke objek ListView (atau SingleChildScrollView) Anda.
Perbedaannya bisa dilihat di sini:
Sayangnya, tidak ada SliverLists dan tidak CustomScrollView memiliki parameter seperti itu. Dalam hal ini untuk menambahkan beberapa padding ke konten CustomScrollView Anda dapat menggunakan SliverPadding widget:
4. Menggunakan fisika gulir yang salah untuk platform yang berbeda
Android dan iOS memiliki fisika gulir dan perilaku gulir berlebih yang berbeda. Berikut kutipan dari dokumentasi:
Android dan iOS sama-sama memiliki simulasi fisika bergulir kompleks yang sulit dijelaskan secara verbal. Secara umum, perangkat yang dapat digulir di iOS memiliki lebih banyak bobot dan gesekan dinamis, tetapi Android memiliki lebih banyak gesekan statis. Oleh karena itu, iOS memperoleh kecepatan tinggi secara lebih bertahap tetapi tidak berhenti tiba-tiba dan lebih licin pada kecepatan lambat.
Jika Anda secara eksplisit menyetel phisic ke BouncingScrollPhisics atau ke ClampingScrollPhisics maka itu akan terlihat asli hanya pada satu platform. Gunakan saja AlwaysScrollableScrollPhisics, kecuali jika itu adalah kasus yang jarang terjadi ketika Anda benar-benar perlu mengatur fisika gulir dengan cara ini.
5. Menambahkan kunci ke setiap item daftar dan mengharapkannya akan meningkatkan kinerja pengguliran
Merupakan mitos umum bahwa menambahkan kunci ke item daftar membantu mendaur ulang widget dan meningkatkan kinerja. Mari kita lakukan pembandingan terlebih dahulu, lalu lihat mengapa cara kerjanya seperti ini.
Untuk melakukan itu, mari lakukan uji integrasi. Kami akan mengukur kinerja halaman yang berisi 200 item dengan kompleksitas sedang dengan menggulirnya hingga akhir dan melacak metriknya.
Seperti yang bisa kita lihat, tidak ada peningkatan kinerja saat menggunakan kunci dalam daftar.
Lalu kapan menambahkan kunci ke item daftar masuk akal?
- Ketika item dalam daftar dapat disusun ulang, diedit, dihapus, dll
- Saat menulis pengujian UI dan berinteraksi dengan item daftar
6. Tidak menggunakan restorasiId.
Bayangkan menggulir bagian berita di aplikasi yang Anda sukai, lalu diganggu oleh panggilan, dan kemudian, ketika panggilan selesai, aplikasi tersebut lupa di mana Anda membaca dan menampilkan posisi gulir awal.
Solusinya sederhana: tambahkan restorationIdke setiap Scrollable di aplikasi Anda
https://medium.com/@pomis172/common-mistakes-with-listviews-in-flutter-f22e7dacfaf7