Tutorial Membangun Aplikasi Todo List dengan Flutter dan Redux

membangun aplikasi todo list dengan flutter dan redux

Flutter merupakan Android SDK yang sedang populer di tahun ini, bahkan lonjakan developer yang mengadopsi untuk ke ranah produksi juga semakin banyak. Meski belum sepenuhnya pada versi stabil, Flutter sudah berhasil menggaet banyak developer untuk menggunakannya, apalagi ada aplikasi-aplikasi dari Flutter di lapak playstore. Hal tersebut bisa menjadi potensi besar bagi developer untuk menjajal membuat aplikasi mobile alternative selain native development.

Perlu diketahui bahwa Flutter ini berbeda dengan framework yang sudah pernah-pernah teman jumpai seperti Hybrid App, PWA, AMP, Cordova, dan PhoneGap. Apabila dibandingkan dengan React native hampir sama hanya flow mekanismenya berbeda. Baik HybridApp ataupun React native memakai bahasa Java Script sedangkan Flutter memakai bahasa yang lumayan asing (bahkan opsi pada tulisan ini untuk editor yang dipakai malah belum ada), yakni Dart. Apabila teman-teman ingin tahu kenapa Flutter memakai Dart teman-teman bisa kunjungi di laman ini.

Saya cukupkan untuk perkenalan Flutter, mari kita bahas lebih jau mengenai penggunaan Flutter, case kali ini kita akan membangun Todo List menggunakan Flutter, Todo List ini dari tampilan UI kita bisa mengadopsi UI miliki Tasks App Google. Supaya lebih enak dan nyaman untuk pengembangan selanjutnya kita akan membangun dengan memakai application architecture Redux. Apabila teman-teman sudah pernah memakai React native, pasti teman-teman tidak asing dengan aplication architecture ini, baiklah saya akan tekankan kepada teman-teman kegunaan Redux di Flutter ini.

  • Di Setiap kondisi terntu Flutter menggunakan state untuk memantai perubahan, baik perubahan data atau perubahan ui dengan Redux kita tahu kapan state berubah, dan tentunya pengelolaan state jadi lebih gampang sehingga timbulnya duplikasi bisa dihindari.
  • Fungsi Reducer mempermudah kita untuk melakukan unit testing, kita dapat melewati state dan mengubah state.
  • Tentunya aplikasi kita akan terstruktur, karena beberapa bagian kita bagi dengan layer untuk melakukan proses tertentu, dari segi action, models, business logic, dll. sehingga apabila ada fitur baru teman-teman bisa mengimplementaisnya lebih mudah.

Todo List dengan Redux

Fitur-fitur yang dapat kita bangun untuk aplikasi Todolist adalah sebagai berikut

  • Create task and save task persistance
  • Read task
  • Remove task
  • Toogle task remover

Library yang kita akan pergunakan

  • Redux – Redux for Dart using generics for typed State.
  • Flutter Redux – A set of utilities that allow you to easily consume a Redux Store.
  • Shared Preferences – Providing a persistent store for simple data.
  • Sqflite – SQLite plugin for Flutter. Supports both iOS and Android.
  • flutter_redux_dev_tools – A Widget you can use to show a Redux Time Travel UI.

Berikut contoh jadi Aplikasi Todo List, mirip Task App Google bukan? 🤣

  

 

Mari bersiap koding 👇

Mari kita buat User Interface(UI) terlebih dahulu, UI yang akan kita buat seperti yang sudah diterangkan diatas kita mengadopsi UI Google tasks. Yap kemudahan membuat material desain jelas sekali didukung oleh Flutter, jadi konsep Material desain bisa diimplementasikan lebih mudah menggunakan Flutter,

Membuat BottomAppbar Widget

Contoh seperti gambar diatas, kita akan membuat BottomAppbar widget,

Berdasarkan kode diatas kita membuat kelas yang meng-extends stateless Widget, artinya widget ini immutable/data tidak berubah. Pada parameter bottomNavigationbar kita menginstasiasi PreferedSize salah satu widget yang dapat menentukan Height pada bar dengan nested child BottomBar didalam container. Parameter dengan nama hasNotch merupakan param yang menentukan lekukan pada bar apabila terdapat floating actionbar yang overlapping. Kemudian di param Row terdapat MainAxisSize.Max artinya Row memperoleh space maksimal berdasarkan space layar. Param SpaceBetween berguna untuk memisahkan Widget secara berseberangan.

Baiklah kita akan mengintegrasikan library Redux terlebih dahulu kedalam package project kita menggunakan file pubspec.yaml. Taruh dibawah flutter dan indent harus sejajar dengan kata flutter di atasnya. kemudian save otomatis package akan didownload, apabila terdapat kesalahan maka diharuskan untuk mengetik di terminal menggunakan

Runs-MBP:redux_task_apps ran$ flutter packages get

Nah kemudian teman-teman diharuskan membuat struktur project sebagai berikut,

Struktur project diatas terdiri atas item, list, model, redux, util, dan widget. Masing-masing memiliki fungsi yang berbeda, item sebagai file untuk action setiap click pada item khususnya item list. kemudian list yakni widget khusus untuk menampilkan list builder beserta itemnya, selanjutnya model berisi data model atau POJO yang nantinya akan digunakan dan dimuat, berikutnya ada Util berisi file pendukung seperti file untuk mengumpulkan semua package import. terakhir widget sebagai penyimpan file-file widget.

Model Data

Langkah pertama sebelum memulai project adalah membuat model kelas terlebih dahulu, kenapa? karena model kelas atau POJO tidak terikat oleh kelas manapun alias berdiri sendiri, mari kita tuliskan kode, sebelumnya teman-teman membuat file terlebih dahulu dengan nama “data_model.dart” di dalam model folder. Satu lagi, di dalam file dart ini tidak diharuskan untuk menulis nama kelas dengan nama file yang sama.

Berikut kode yang telah kita tuliskan, dari kode ditas kita membuat kelas dengan nama Data. Bila teman-teman perhatikan diatas yang terdapat pada Data.fromJson() nah pada baris tersebut di Dart Lang dikenal sebagai Initializer list yakni meng-invoke superclass konstruktor untuk meng-init terlebih dahulu sebelum menjalan/mengeksekusi didalam body konstruktor. Nah Data.fromJson tersebut berfungsi sebagai parsing Json, param json bertipe Map ini diolah untuk di parsing ke masing-masing objek. Artinya json[‘tugas’] berisi String tugas di simpan pada objek tugas, sedangkan json[‘checked’] berisi boolean true/false di simpan pada object boolean checked. kemudian fungi toJson() berfungsi men-transform objek tugas dan objek checked kedalam Map<String, dynamic> atau Json.

Selanjutnya kita membuat file dengan nama list_data.dart di dalam folder model. ListData ini sebagai list yang memuat  model data dari kelas Data. LisData.fromJson merupaka initializer list konstruktor hampir sama dengan fungsi kelas di Data, perbedaannya kita akan mengolah list data. Data json[‘data’] yang bertipe List akan diiterasi dengan map yang setiap iterasi didalamnya yakni “i” akan dimasukkan kedalam instansiasi objek baru Data.fromJson sebagai dynamic. Nah model ini sebenarnya digunakan untuk menyimpan data menggunakan Json, JSON kita simpan menggunakan shared preferences dengan tipe String. untuk strukturnya kurang lebih seperti dibawah ini.

Integrasi Komponen Redux

Langkah selanjutnya kita akan membuat file action di dalam folder redux action ini berguna sebagai intent yang dapat memanggil perubahan state aplikasi, dalam aplikasi yang ingin kita kembangkan ada empat yakni menambahkan, mengecek perubahan aksi. memperoleh list item, meremove item.

Setelah kita mendefinisikan kelas action, kita akan membuat fungsi untuk mengecek action, dan kemudian berpotensi untuk men-transformasi action sebelum melalui proses reducer. Secara konsep mirip presentasion layer yang disebut sebagai middleware atau jembatan antar view ui dengan model data. Teman-teman bisa membuat file baru dengan nama middleware.dart. Proses didalamnya yakni mengecek kondisi action state untuk di eksekusi lebih lanjut dan proses penyimpanan json yang telah kita transform tadi ke dalam Shared preferences berbentuk String seperti dibawah ini.

Nah dua file sudah kita buat di dalam folder redux, untuk selanjutny kita akan membuat reducer, apa itu reducer? reducer merupakan bagian pada state redux yang berfungsi sebagai penerima state dan action aplikasi yang sedang berjalan dan mengembalikan state yang baru. Nah kali ini kita membuat empat buah reducer untuk lebih jelasnya mari kita lihat kode berikut,

Empat reducer yang sudah kita tuliskan diatas memiliki beberapa fungsi, sama seperti fungsi di action, method addItem digunakan untuk menambahkan data pada json apabila ada tambahan data baru. method toogleItemState berguna untuk meamntau perubahan state. Method removeItem berguna untuk mengahapus data berdasarkan string “tugas”. Terakhir method load item digunakan untuk mengambil data dari shared preferences yang berbentuk json. Jika teman-teman melihat ada titik titik artinya method tersebut menggunakan cascade notations.

Membuat List Item dan List Builder

Setelah kita menuliskan semua komponen redux kita akan membuat widget khusus untuk menangani Listdata. Buat satu file dengan nama list.dart di folder widget, di dalam file tersebut kita menaruh dua kelas yakni ListDataWidget dan ListDataItem. Kelas ListDataWidget digunakan sebagai builder atau adapter untuk menyusun list, sedangkan ListDataItem digunakan untuk membuat satu list item. Nah kita bisa mengimplementasikan fitur swipe remove laiknya task google sendiri dengan Dismissible. Dismissible merupakan widget khusus untuk menangani swipe remover, atribute yang bisa gunakan background, onDismissed, dan child. Store Connector merupakan sebuah widget yang memperoleh Store dari storeProvider, dikonversi dari store ke viewmodel menggunakan fungsi konverter. Artinya setiap waktu store berubah data atau event maka Widget akan segera otomatis me-rebuild kembali konsepnya sama seperti setState(). No need manage subscripstions 😎

Mengintegrasikan semua komponen ke dalam Widget

Selanjutnya kita akan menambahkan fitur pada Floating Action Button (FAB), sehingga kita akan memperbaiki kodingan widget FAB diawal tulisan. Buat file baru dengan nama widget.dart, di dalam file tersebut berisi kelas FAB widget, kelas Bottom sheet widget, dan dua kelas khusus menangani Stateful widget. berikut cuplikan koding untuk FAB widget. Karena widget ListData meruapakan widget yang membutuhkan perubahan data maka kita akan menggunakan stategull widget. Kalau teman-teman menggunakan text editor/IDE visual code terkadang kesulitan kita adalah menggunakan import, artinya teman-teman akan menggunakan import manual. supaya kodingan kita lebih rapi teman-teman bisa menggunakan satu buah file untuk menyimpan semua import. Buatlah satu buah file baru dengan nama all_library.dart di dalam folder util.

Baiklah, sepertinya cukup sekian dari saya kurang lebihnya mohon maaf dan semangat untuk berkarya. apabila teman-teman menemui kendala teman-teman bisa komen di bawah atau kontak saya. Kodingan selengkapnya bisa teman-teman dapatkan di sini. Akhir kata dari saya, saya ucapkan terimakasih. 😎😎

Dilihat 875 kali

Related Posts

About The Author

Interest about design and mobile development