Flutter Effects - Membuat Download Button | Koding Indonesia

Flutter Effects – Membuat Download Button

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-temanPenggunaan Widget TabBar


Pada artikel ini kita akan membuat button yang memicu proses download, menampilkan proses download dan lalu memberi akses ke aset yang telah selesai di download. Hal tersebut sangat membantu untuk menunjukan ke pengguna kemajuan dari proses download yang dilakukan dan proses tersebut akan ditampilkan secara visual pada button itu sendiri berdasarkan status download aplikasi. Berikut langkah-langkahnya:

1. Mendefinisikan Widget Stateful Baru

Widget button yang kita buat membutuhkan perubahan visual dari waktu ke waktu selama proses download terjadi. Oleh karena itu, kita butuh mengimplementasikan custom widget stateful pada button tersebut.

Definisikan widget stateful baru yang diberi nama DownloadButton.


2. Mendefinisikan Button Menampilkan Perkiraan Status

Presentasi yang ditampilkan secara visual oleh button akan berdasarkan pada status download yang sedang berjalan. Dalam hal ini, kita akan mendefinisikan perkiraan status download, lalu memperbaharui DownloadButton yang selanjutnya diubah ke  DownloadStatus dan menetukan tampilan Duration berapa lama status download tersebut bergerak dari mulai sampai selesai.


3. Menampilkan Button Shape

Selanjutnya kita akan membuat visual download button berubah bentuk ke status download. Ketika status button notDownloaded dan downloaded, Button akan berbentuk persegi panjang berwarna abu-abu. Kemudian ketika button statusnya fetchingDownload dan downloading, maka button akan berbentuk lingkaran transparan.

Berdasarkan DownloadStatus terkini, buat sebuah AnimatedContainer dengan ShapeDecoration yang menampilkan persegi panjang bulat atau lingkaran.

Kita harus pertimbangkan saat mendefinisikan pohon widget shape’s di dalam method lokal _buildXXXX() sehingga method build() tetap dalam bentuk sederhana dan mudah untuk dimodifikasi. Selain itu konfigurasi pohon widget shape agar menerima widget child, sehingga dapat kita gunakan untuk menampilkan teks pada langkah selanjutnya.

Dari cupllikan kode di atas mungkin teman-teman bertanya-bertanya mengapa kita membutuhkan widget ShapeDecoration pada lingkaran transparan, itu dikarenakan lingkaran transparan tersebut tidak terlihat. Kemudian dapat kita lihat, AnimatedContainer di mulai dengan persegi panjang bersudut lengkung. Saat DownloadStatus berubah menjadi fetchingDownloadAnimatedContainer perlu dianimasikan dari persegi panjang bersudut lengkung ke lingkaran penuh dan satu-satunya cara untuk menerapkan animasi tersebut adalah dengan mendefinisikan bentuk awal yaitu persegi panjang bersudut lengkung kemudian bentuk akhirnya lingkaran penuh. Namun pada saat bentuk akhirnya kita buat lingkaran penuhnya menjadi transparan sedikit pudar, supaya terlihat bagus.


4. Menampilkan Button Text

Pada langkah ini DownloadButton menampilkan GET selama tahap notDownloaded dan menampilkan OPEN selama tahap downloaded sehingga tidak ada teks diantaranya.

Cuplikan kode di bawah ini memperlihatkan penambahan widget untuk menampilkan teks selama setiap tahap download dan memberikan efek buram pada teks di antara tahap tersebut. Tambahkan pohon widget teks sebagai child dari pohon widget shape.


5. Menampilkan Animasi Spinner Ketika Proses Download

Pada langkah ini, selama tahap fetchingDownload DownloadButton akan menampilkan radial spinner. Spinner ini mulai masuk dari tahap notDownloaded dan menghilang pada tahap fetchingDownload.


6. Menampilkan Progress dan Stop Button Saat Downloading

Setelah tahap fetchingDownload adalah tahap downloading. Selama tahap downloading, DownloadButton mengganti radial progress spinner dengan growing radial progress bar. DownloadButton juga menampilkan ikon stop button sehingga pengguna dapat membatalkan proses download yang sedang berjalan.


7. Menambahkan Button tap Untuk Melakukan Callbacks

Detail terakhir yang dibutuhkan DownloadButton adalah button behavior. Tombol tersebut harus melakukan berbagai hal saat pengguna mengetuknya. Oleh karena itu, akan kita tambahkan properti widget callback untuk memulai proses download, membatalkan download, dan membuka download.

Terakhir, gabungkan pohon widget DownloadButton yang ada dengan widget GestureDetector, dan teruskan event ketukan tersebut ke properti callback yang sesuai.


Selamat! Teman-teman sudah memiliki tombol yang akan mengubah tampilannya tergantung pada tahap mana tombol tersebut berada: not downloaded, fetching download, downloading, dan downloaded. Sekarang, pengguna dapat mengetuk untuk memulai proses download, ketuk untuk membatalkan proses download yang sedang berlangsung, dan ketuk untuk membuka hasil download yang sudah selesai.

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya:


Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. 😀😀😀😀😀😀😀 Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Author avatar
Anton Prafanto
Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda