Flutter Developer wajib paham Spread Operator di Dart!

Photo by iorni.com on Unsplash

Pernah lihat kode seperti [...arr] , sum(...numbers) atau { ...obj, key: 'value' } ?. Singkatnya Triple Dot / titik tiga ( ... ) atau Spread Operator (nama kerennya) mengizinkan sebuah iterable seperti collection (array ,list , set, map), object atau argumen untuk menyebarkan atau menggabungkan elementnya dengan collection lain atau sebagai argumen ke suatu fungsi.

Masih belum paham nih, lebih jelasnya gimana sih? Dengan Spread operator kita bisa mengkombinasikan atau mengekstrak elemen dari suatu collection tanpa melakukan perulangan secara eksplisit. Tentu hasil akhir yang diharapkan kode kita semakin effisien, mudah dimengerti dan di-maintain. Langsung ke contoh aja deh biar kita bisa melihat seberapa ringkas dan fleksibel code setelah kita menggunakan Spread Operator ini.

CASE 1:

Menampilkan widget berdasarkan value dari boolean menggunakan tenary operator, jika value dari boolean false maka menampilkan Container() atau SizeBox() yang mana sebenarnya tidak perlu-perlu amat.

return Column(children: [
      isShown ? const SomeWidget() : const SizedBox(),
]);

kita bisa menggunakan Spread Operator dan hasilnya menjadi seperti ini:

return Column(
    children: [
      if(isShown) ...[const SomeWidget()]
]);

Hasilnya terlihat mudah dimengerti dan lebih ringkas dimana jika variable nya bernilai true maka akan menampilkan widget yang ditentukan, selain itu tidak akan menampilkan apa apa. BTW sebenarnya ini juga bisa sih pake widget Visibility, so bebas bebas aja, tapi jika kita punya multiple widget Visibility yang bergantung pada 1 value dan mengubahnya ke Spread Operator bisa jadi ini sebuah enhancements. Enhancements kan tidak cuma speed up development process, tapi juga membuat kode mudah dipahami dan memperbaiki struktur kode supaya meningkatkan readability.

CASE 2:

Dengan Spread Operator kita bisa mengkombinasikan 2 List atau lebih. Ya daripada pake function seperti.addAll() , expand() atau + operator kan. gini aja lebih simple, jadi kayak Developer JavaScript.

void main() {
  List<String> team1 = ["Kukuh", "Elmy", "Edo"];
  List<String> team2 = ["Adri", "Aldo", "Tamsil"];
  List<String> allTeam = [...team1, ...team2, "Andi", "Rangga"];
  print(allTeam); //output: [Kukuh, Elmy, Edo, Adri, Aldo, Tamsil, Andi, Rangga]
}

CASE 3:

Kita bisa melakukan mapping data list menjadi widget langsung tanpa membuat function terpisah. Disini kita melakukan mapping pada listItem yang berisi data name dan images (anggap aja begitu ya), selain itu kita bisa menggunakan Spread Operator untuk melakukan looping widget menggunakan for seperti yang kita gunakan pada widget Image dari data item.images .

return Column(children: [
      ...listItem
          .map((item) => ListTile(
                title: Text(item.name),
                subtitle: Column(
                  children: [
                    ...[
                      for (var image in item.images)
                        Image.network(
                          image,
                          width: 100,
                          height: 100,
                        )
                    ]
                  ],
                ),
              )),
    ]);

Sisanya, jika kita memiliki function builder yang mengembalikan nilai berupa List<Widget> kita bisa langsung memanggilnya di Column seperti berikut:

@override
  Widget build(BuildContext context) {
    return Column(children: [
      ...buildListWidget(), 
      // widget lainnya disini
    ]);
  }

  List<Widget> buildListWidget() {
    //...code yang mereturn list widget
  }

Kesimpulannya apa nih? Ya semoga dengan adanya Spread Operator di Dart bisa membuat developer Dart terutama Flutter developer jadi lebih produktif. Tidak perlu membuat tenary option dengan menggunakan Sizebox atau container kosong jika nilai boolean-nya false. Ya intinya semoga artikel ini bermanfaat dan bisa memberi sedikit insight untuk membuat kode yang lebih baik lagi. Thanks!