“Containing Flutter Widget for Async (StreamBuilder, & StreamController). Create a TimerApp, & RandomData App for Implementation ” #Day30 #100DaysOfCode #flutter #codeNewbie #100DaysOfFlutter #FlutterBeginner
The Github repos of the code:
https://github.com/x1q2q/100DaysOfCodeRafikbojes/blob/master/day30/
Akhirnya sampai juga pada katalog list terakhir flutter widget basic aplikasi Flutter Catalog. Meskti tetap ada beberapa widget yang belum tercover pada tiap artikel #100DaysOfCode saya ini. Dan pada materi selanjutnya — yang memang memiliki pembagian — dari aplikasi flutter catalog ini adalah flutter advance.
Saya akan melanjutkan materi dari aplikasi tersebut. Tapi masih memilih judul yang sama: flutter widget. Tanpa ada imbuhan ‘advance’, karena bagi saya sekadar mengikuti tutorial — meski di dalamnya kita mengotak-atik, dlsb — masih berkategorikan sama. Yaitu beginner. Apalagi saya sendiri yang masih tergopoh-gopoh belajar framework baru ini.
Tapi, tentu saja materi tersebut bagi saya memang pada tingkatan flutter framework (sejauh yang saya ketahui) memang berada di luar basic; beginner. Mungkin antara intermediate sampai ke ranah ‘lumayan’ advance. Seperti, misalnya, pada bagian flutter advance terdapat juga materi design pattern (seperti BLoC), sq(F) lite, sembast, firebase, dll.
Kita tidak perlu jauh-jauh mengamini persepsi itu. Ah, ini bagian subjektivitas (bagi saya).
Kembali ke projek hell ini. Di artikel terakhir pada bulan ini (Juni, 2020) saya menambahkan flutter widget untuk Asynchronous (meski sebelumnya sudah pernah menuliskan materi tersebut). Tapi pada bagian ini lebih mengarah ke Stream (aliran data).
Pada bagian ini terdapat dua jenis, yaitu StreamBuilder & StreamController. Dan memiliki kompleksitas masing-masing. Sebenarnya saya juga masih lamban untuk memahami konsep ini (bukan sekadar tahu alur, melainkan bagaimana tiap bagian terproses). Sedangkan belajar akan hal ini cukup penting, sebab nanti sangat berguna ketika akan belajar state management. Begitu.
- ) StreamBuilder (TimerApp)
StreamBuilder adalah widget yang digunakan sebagai pembungkus terjadinya stream (aliran data) tersebut. Seperti halnya dengan FutureBuilder, yang menampung data-data untuk diolah. Pada widget ini kita menambahkan sumber dari StreamBuilder ini, yaitu pada variable _periodicStream. Dimana fungsinya tiap detik mengalirkan (i) dan setiap detik yang telah mengalir pada StreamBuilder akan diolah lagi dengan Buildcontext (builder). Di situ terjadilah penambahan variable _timerVal (increment) dan membuat angka yang ada pada tengah-tengah widget itu seolah berjalan.
Dilengkapi dengan tombol stop, dan lanjutkan/jeda. Dengan fungsi yang sesuai sehingga widget yang dibuat layaknya timerApp (penghitung waktu). Dan casenya berdasarkan detik.
2.) StreamController (RandomDataApp)
Masih menggunakan widget yang sama, yaitu StreamBuilder. Kali ini konsep aplikasi yang dibuat yaitu RandomData App (mengambil data random) memiliki penambahan StreamController. Dengan penambahan StreamController tersebut, kita dapat mengontroll aliran data (stream) dengan event tertentu. Sesuai kebutuhan.
Di sini, sebagai contoh terdapat tombol ‘ambil data’ yang berfungsi mengalirkan data dari StreamBuilder. Pada prosesnya ialah, mengalirkan data berupa text random English pada judul, dan timestamp (waktu tahun & jam) ke model yang telah dibuat, kemudian me-rendernya ke widget ListTile yang tersedia. (Sekiranya begitu).
Full App:
Sekian untuk #100DaysOfCode kali ini.
