Membuat Fitur Like Mirip Instagram Pakai Flutter

Di tutorial kali ini, kita akan membuat fitur like mirip Instagram pakai Flutter. Di tutorial sebelumnya, kita sudah membuat tampilan mirip Instagram menggunakan Flutter di Visual Studio Code (VSCode). Di tutorial kali ini, kita akan menambahkan sedikit fitur supaya kita bisa menekan tombol like seperti di aplikasi Instagram. Mari kita mulai 😀

Kodingan lengkap artikel sebelumnya ada di https://github.com/meidikawardana/like_app . Untuk yang ingin melihat hanya file2 utamanya saja, ada di gist di sini. Di gist tersebut hanya ada main.dart & pubspec.yaml saja.

Kodingan kita yang terakhir terdiri dari 2 class, yaitu class AplikasiLikeInstagram (utama) dan class InstagramCards yang menampilkan 1 postingan mirip Instagram. Di class InstagramCards kita sudah membuat beberapa tombol menggunakan widget IconButton. Salah satu tombol tersebut, adalah tombol Like berbentuk hati. Saat ini, tombol tersebut tidak aktif. Tidak akan terjadi apa-apa kalau kita menekan tombol tersebut. Nah, di tutorial kali ini kita akan membuat supaya tombol tersebut bisa berfungsi & mengubah jumlah like di postingan terkait.

Supaya tombol like bisa berfungsi, kita perlu mengubah class InstagramCards supaya menjadi turunan dari StatefulWidget. Sebelum itu, kita perlu memindah isi dari class InstagramCards ke sebuah class baru, supaya kodingan kita lebih rapi. Di bawah class InstagramCards, buat class _InstagramCardsState

class _InstagramCardsState {
  
}

Kemudian, pindahkan semua yang ada di dalam class InstagramCards, dari setelah kurung kurawal buka sampai sebelum kurung kurawal tutup ke class _InstagramCardsState . Kondisi 2 class tersebut, sekarang jadi seperti ini:

class InstagramCards extends StatelessWidget {

}

class _InstagramCardsState {
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
          ... // kodingan lengkap disingkat supaya lebih mudah dimengerti
      ],
    );
  }
}

Class InstagramCards sekarang jadi error (bergaris keriting merah), tapi kita akan betulkan. Jangan takut error, karena error bisa mempercepat kita mengerti he3..

gambar  1 - class InstagramCards error

Sekarang, ubah class InstagramCards jadi seperti ini:

class InstagramCards extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _InstagramCardsState();
  }
}

Artinya, InstagramCards sekarang jadi turunan dari StatefulWidget. Yaitu widget yang memungkinkan kita mengubah tampilan di aplikasi tanpa perlu pindah halaman. Di dalam StatefulWidget, kita bisa menulis logika yang kita mau, dan logika tersebut akan bisa mengubah tampilan aplikasi tanpa kita perlu pindah halaman.

gambar  2 - error ketika memanggil class _InstagramCardsState

Sekarang ada error ketika kita memanggil class _InstagramCardsState (di baris 8 pada gambar di atas). Supaya tidak error, kita perlu membuat _InstagramCardsState menjadi turunan dari class State yang disediakan Flutter. Kodingannya hanya perlu diubah sedikit:

gambar 3 - class _InstagramCardsState mengextend State

Setelah kita tambahkan kodingan extends State<InstagramCards> pada class _InstagramCardsState seperti pada gambar di atas, maka kita bisa menambahkan logika supaya tombol like bisa berfungsi. Kita bisa menambahkan variabel untuk menampung jumlah like, & variabel untuk menentukan apakah postingan sudah kita like atau belum. Misal kita namakan variabel _jumlahLike & _sudahLike, & kita taruh di class _InstagramCardsState seperti berikut ini.

gambar 4 - menambahkan 2 variabel

Kemudian pada tombol Like, kita tambahkan kodingan di dalam fungsi onPressed nya. Seperti ini:

                IconButton(
                  icon: Image.asset(
                    'images/ic_love.png',
                    fit: BoxFit.contain,
                  ),
                  onPressed: () {
                    if (!_sudahLike) {
                      setState(() {
                        _jumlahLike += 1;
                        _sudahLike = true;
                      });
                    } else {
                      setState(() {
                        _jumlahLike -= 1;
                        _sudahLike = false;
                      });
                    }
                  },
                ),

Kodingan yang kita tambahkan di atas, artinya jika _sudahLike = false maka kita set nilai variabel _jumlahLike jadi ditambah 1, dan _sudahLike = true. Kalau _sudahLike = true maka kita set kebalikannya. _jumlahLike jadi dikurangi 1, dan _sudahLike jadi false. Kita mengeset variabel2 tersebut, di dalam sebuah fungsi yang disediakan Flutter yaitu setState.

Kalau kita sudah melibatkan fungsi setState di aplikasi kita, maka seringnya fitur hot reload Flutter tidak berfungsi. Karena itu, jika kita ingin mencoba kodingan yang barusan, maka kita perlu restart aplikasi di emulator dengan menekan Ctrl+Shift+F5 di Visual Studio Code (VSCode) jika menggunakan OS Windows.

Setelah aplikasi berjalan di emulator, & kita coba, ternyata tombol Like belum berfungsi. Kenapa? karena kita baru mengubah variabel di state nya saja. Sedangkan kita belum mengubah tampilan tombol like & tulisan jumlah like. Ubah kodingan tombol like, dari seperti ini:

                IconButton(
                  icon: Image.asset(
                    'images/ic_love.png',
                    fit: BoxFit.contain,
                  ),
                  onPressed: () {
                     // ... dipersingkat supaya lebih mudah dimengerti
                  },
                ),

Menjadi seperti ini:

                IconButton(
                  icon: (!_sudahLike)
                      ? Icon(
                          Icons.favorite_border,
                          color: Colors.grey,
                          size: 32.0,
                        )
                      : Icon(
                          Icons.favorite,
                          color: Colors.red,
                          size: 32.0,
                        ),
                  onPressed: () {
                     // ... dipersingkat supaya lebih mudah dimengerti
                  },
                ),

Artinya, kita mengubah ikon tombol like, supaya kalau belum like (_sudahLike = false) maka kita tampilkan ikon Icons.favorite_border warna abu-abu. Sedangkan kalau sudah like, maka kita tampilkan ikon Icons.favorite warna merah.

Setelah itu, kita ubah tulisan jumlah like di row #4 sesuai variabel _jumlahLike. Penjelasan row #4 ada di artikel minggu lalu . Ubah kodingan row #4 jadi seperti ini:

            Row(
              //row #4
              children: [
                Container(
                  child: Text(
                    _jumlahLike.toString() + ' like',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  padding: EdgeInsets.only(left: 10),
                ),
              ],
            ),

Nah, sekarang kalau kita coba jalankan lagi aplikasi kita di emulator, maka jadinya seperti ini:

Tombol Like sudah aktif. Dan dengan membuat tombol like ini, kita sudah belajar beberapa hal mengenai Flutter, antara lain StatefulWidget, tipe variabel, if – else, dan alur logika di Flutter. Lumayan kan? he3..

Kodingan lengkap untuk tutorial kali ini, bisa dilihat di https://github.com/meidikawardana/like_app/tree/stateful_widget .

Sampai di sini tutorial mengenai membuat fitur like mirip Instagram pakai Flutter, semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel & tutorial lainnya yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Leave a Reply

Your email address will not be published. Required fields are marked *