Best practice untuk performa di Flutter

Performa adalah hal yang selalu dipertimbangkan ketika dalam mengembangkan aplikasi. Nah kali ini kita akan coba bahas, hal-hal apa saja yang bisa kita lakukan untuk meningkatkan performa aplikasi Flutter kita. Langsung aja, Yuk Ngoding 😀

1. Control build() cost

Kita semua tahu jika method build() akan dijalankan ulang ketika kita melakukan perbaruan state. Jadi jika code yang digunakan pada method tersebut sudah terlalu panjang, maka jadikan lah widget terpisah.

Lakukanlah perbaruan state di widget yang membutuhkan saja. Misalkan kita memiliki home screen, dan di screen tersebut ada icon notification. Lalu kita ingin menambahkan badge merah ke icon tersebut karena ada notif baru yang masuk. Maka lakukan lah perbaruan state cukup di icon tersebut.

Gunakan  const sesering mungkin. Dengan menggunakannya akan mempercepat proses rebuild yang dilakukan oleh Flutter. Jika lint pada IDE yang digunakan belum ngetrigger hal ini, ikuti panduan flutter_lints_migration_guide.

Untuk membuat reusable widget, gunakan StatelessWidget / StatefulWidget dari pada sebuah method. Hal ini berkaitan dengan Element tree dan RenderObject tree. Widgets vs helper methods

2. Gunakan saveLayer() dengan pertimbangan

Beberapa code Flutter menggunakan saveLayer(), untuk menerapkan visual effect ke UI. Meskipun kita tidak menulis code ini, tapi bisa saja code ini tetap kita gunakan di balik widget atau function yang kita gunakan. Method ini mahal karena akan metrigger GPU untuk melakukan stream sementara pada render target.

Beberapa widget yang mungkin mentrigger saveLayer():

• ShaderMask
• ColorFilter
• Chips – Jika disabledColorAlpha != 0xff
• Text – Jika terdapat overflowShader
• Canvas

3. Kurangi penggunaan Opacity dan Clipping

Opacity

• Gunakan widget Opacity ketika dibutuhkan. Gunakan Transparent image jika hanya menerapkan opacity kepada satu image.
• Dari pada ngewrap simple shapes atau text dengan widget Opacity, akan lebih cepat dengan menggunakan color. Misal: Color.fromRGBO(255, 0, 0, 0.5)
• Untuk implement fading sebuat image, pertimbangkan menggunakan FadeInImage

Clipping

Kita mungkin sering menggunakan clipping, baik secara widget (ClipRect , ClipRRect, ClipOval, ClipPath) maupun behavior (Clip.none, Clip.antiAlias, Clip.hardEdge, dst).

Clipping tidak akan memanggil saveLayer() ( Jika tidak direquest dengan Clip.antiAliasWithSaveLayer ), jadi penggunaannya tidak akan semahal Opacity, tapi clipping masih tetap mahal, jadi gunakan dengan hati-hati. Secara default clipping yang digunakan pada kebanyakan widget adalah Clip.none. Cek doc untuk lebih rinci.

Jika membuat kotak dengan rounded di setiap sudutnya, dari pada menggunakan clipping, gunakan property borderRadius yang terdapat pada berbagai widget

4. Be lazy!

Hal ini berkaitan degan membuat list atau grid. Jadi ketika membuat grid atau list yang panjang, gunakan mehotd lazy builder ( Listview.builder ). Hal ini akan membuat screen yang terlihat saja yang di buitl ketika startup time.

5. Intrinsic operations

Beberapa dari kita mungkin pernah menggunakan IntrinsicHeight dan IntrinsicWidth. Hal tersebut dibutuhkan karena terdapat beberapa layout, yang ukurannya bergantung ke layout yang lainnya. Di sisi lain mungkin terdapat pros and cons terkait pengunaannya karena cost yang mahal. Tonton video berikut ini untuk mendapatkan pencerahan (lol).

TL;DR – Jika boleh mimin simpulkan, jika kompleksitasnya rendah, tidak terdapat animasi, gunakan saja IntrinsicHeight dan IntrinsicWidth.

6. Build dan display frame dalam 16ms

Aplikasi yang kita kembangkan harus bejalan di bawah 16ms, untuk rendering pada display 60Hz. Untuk melakukan pengecekan terkait hal ini, kita harus menjalakan aplikasi dalam profile mode, dan pengecekan dapat dilakukan melalui DevTools. Jika aplikasi yang kita kembangkan berjalan dengan baik di bawah 16ms, berarti kita tidak harus cemas terkait performa. Tapi, jika aplikasi kita lebih cepat, maka hal itu akan menambah masa penggunaan baterai device kita.

Btw, jika ada yang bertanya-tanya, kenapa harus 60Hz, silahkan tonton video berikut:

TL;DR – Klo mimin simpulkan, jika kita menggunakan di bawah 60 fps, maka akan terlihat animasi yang tersendat-sendat atau ngelag. Sedangkan jika diatas itu maka mata tidak terlalu terlihat perubahan yang signifikan pada mata manusia. Meskipun begitu, sekarang ini udah mulai banyak device2 yang mencapai 120fps ya.

Masih banyak hal yang bisa kita bahas terkait performa, seperti penggunaan DevTools, perbandingan data performa before dan afternya, dan hal-hal lainnya. Kita akan bahas di artikel yang berbeda ya. Sekian dulu tulisan kali ini, terimakasih dan semoga bermanfaat ya 😀

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

• Penyimpanan data lokal pada Flutter (shared_preferences)
• Mengelompokkan Berbagai Widget dengan Column
• Membuat animasi dengan Motion Layout di Android (Part-1)
• Menggunakan berbagai versi Flutter SDK sekaligus dengan FVM
• Memulai dengan Kotlin Multiplatform

Referensi:

• https://docs.flutter.dev/perf/best-practices