Introduction Flutter untuk Pengembangan Mobile App

6 min readApr 29, 2021

Intro

Halo semua !, balik lagi di artikel medium saya. Untuk kali ini saya ingin memberikan sedikit pengetahuan tentang salah satu framework hybrid buat develop aplikasi di Android maupun IOS yaitu Flutter. So hope you enjoy it and easily understand it.

Apa itu Flutter ?

Flutter sendiri merupakan teknologi yang dikembangkan oleh Google untuk membangun aplikasi cross platform yaitu Web, mobile (Android dan IOS), dan Desktop hanya dari satu kali penulisan kode. Flutter menggunakan bahasa Dart, sebuah bahasa pemrograman yang juga dikembangkan oleh Google.

Awalnya, Flutter dikenal dengan nama Sky dan pertama kali diperkenalkan pada acara Dart Developer Summit pada tahun 2015. Kemudian pada Desember 2018, Google merilis Flutter 1.0 di acara Flutter Live Event. Hal yang menandai rilisnya versi stabil pertama dari Flutter. Selanjutnya Flutter 1.12 dirilis di acara Flutter Interact yang diadakan pada Desember 2019. Pada versi ini, versi beta Flutter untuk web juga diperkenalkan ke publik dan mulai tahun 2019 lah Flutter mulai menyebarkan “virus”-nya kepada para tech enthusiast. Terakhir Flutter telah merilis versi stabil terbarunya yaitu 2.0.0 pada Maret 2021 kemarin.

Get In Touch

Dah lah ya pengenalannya hehehe, buat pengenalan lebih lanjut dan teknisnya, bisa teman-teman baca pada official website Flutter. Untuk persiapannya yang perlu diinstall adalah :

Flutter (lihat instalasi dan konfigurasinya disini)
Visual Studio Code (saya merekomendasikan menginstall ekstensi Dart dan Flutter)
Android Studio (bagi yang akan menjalankan di emulator Android)
XCode (bagi yang akan menjalankan di emulator IOS)

Jika semua hal diatas sudah dilakukan hingga saat teman-teman menulis flutter doctor -v di terminal, jika sudah tidak ada masalah, maka kita siap membuat aplikasi pertama.

First Move

Disini kita mulai inisiasi project flutter kita dengan membuka suatu directory atau folder, kemudian membuka terminal yang sudah di set ke alamat directory tersebut. Kemudian ketik flutter create todo kemudian tunggu beberapa saat hingga pembuatan project selesai. Pastikan project sudah dalam versi null-safety, karena kode yg akan saya bagikan sudah masuk versi tersebut sehingga untuk berjaga-jaga silahkan masuk dalam versi null-safety dengan mengetik dart migrate pada terminal kemudian buka link yg tercantum, seperti contoh berikut :

Kemudian saat sudah masuk pada laman tersebut di browser, klik tombol apply pada pojok kanan atas dan selesai migrasi. Berikut adalah struktur file di dalam folder lib

lib --- 
      |--- constant     
      |      |--- constant.dart   
      |
      |--- models   
      |     |--- todo_model.dart
      |
      |--- ui    
      |    |--- screen
      |    |      |----- todo_screen.dart
      |    |
      |    |--- widgets
      |           |----- todo_cart.dart
      |
      |--- main.dart

Second Move

Yes sir!, kita mulai koding disini, mulai dari yang paling atas ya . . .

constant.dart

import 'package:flutter/material.dart';const colorPrimary = Color(0xFF161d6f);const colorBackground = Color(0xFFf6f6f6);

Di file ini, kita mendefinisikan atribut konstan yang akan dipakai secara berkala dan nilainya tidak berubah-ubah, contoh kasusnya adalah warna, di Flutter kita bisa menggunakan warna bawaan Flutter atau membuat kustom seperti diatas berdasarkan nilai hex-nya dengan rumus 0xFF+nilai hex.

todo_model.dart

class TodoModel {String? title;
  bool? status;TodoModel({this.title, this.status});
}

Mari kita definisikan model kita dan apa saja isi dari todo model kita. Pertama tentunya harus memiliki judul/title, kemudian status apakah task tersebut sudah selesai atau belum.

todo_card.dart

Ko ga screen nya dulu ? gapapa si, takut bingung aja, makanya kita bikin komponen todo card terlebih dahulu seperti berikut

Mari kita bedah kode diatas .-.

boolean checkbox : untuk mengatasi nilai checkbox apakah “tercentang” atau tidak
title : nanti akan menerima nilai title dari model todo yang telah kita buat, agar bisa tampil namanya
callbackCheckbox : nanti digunakan apabila checkbox diklik, maka fungsi checkbox ini akan mengirim nilai kepada parent-nya atau kita sebut saja pada artikel ini sebagai screen utama dan anggap todo_card ini adalah child widget
tanda ? : itu disebut ternary operator yang berfungsi seperti if-else jadi jika checkbox == true atau (checkbox ?) maka teks akan dicoret, jika sebaliknya (:) maka teks tidak akan di apa-apakan

todo_screen.dart

Semoga teman-teman bisa memahami kodingan berikut :(

Yaps kita bedah kode lagi T_T

Dari atas adalah pendefinisian variabel untuk nantinya digunakan untuk menampilkan data. ongoingList digunakan untuk menampilkan data todo yang ada, sedangkan finishedList digunakan untuk menampilkan data todo yang sudah selesai
Kemudian ada dua fungsi widget yang masing-masing mengembalikan section tab untuk on going tab dan finished tab
Kemudian di app bar ada icon button yang memanggil fungsi untuk menampilkan modal untuk menambahkan todo list kita, sehingga saat di klik add maka data akan dimasukan dalam bentuk todo_model kemudian baru ditambahkan kedalam ongoingList
Kemudian pada masing-masing section memiliki fungsi yang konsepnya sama hanya saja logic-nya berbanding terbalik. Pada ongoing section saat checkbox dari child widget (todo_cart) di klik, maka child widget mengirimkan nilai hasil checkbox ke parent atau screen utama melalui fungsi callbackCheckbox, kemudian pada parent menerima nilai tersebut melalui callbackValue.

Walau namanya berbeda dari nilai yang dikirim dari child yang mana namanya adalah value, sedangkan di parent kita menerimanya dengan nama callbackValue, hal tersebut bukan masalah asalkan variabel diterima secara urut dan dalam tipe yang sama, serta jumlah variabel yang dikirim dan diterima jumlahnya sama, hal ini dinamakancallback function dan tadi merupakan analogi versi saya sendiri.

5. Pada section ongoing apabila nilai yang diterima(callbackValue) adalah true maka, nilai tersebut memperbarui nilai status pada index (nomor item) yang dipilih. Kemudian todo model pada index tersebut ditambahkan pada finishedList dan kemudian menghapus data pada ongoingList pada index yang terpilih tersebut. Hasilnya nanti adalah data ongoing yang sudah di checklist oleh user akan menghilang dan dianggap selesai, sehingga akan muncul pada section finished dan teksnya dicoret untuk menandakan task tersebut telah selesai.

6. SetState penasaran kenapa itu muncul di fungai callbackCheckbox ? Jadi setState berguna untuk memperbarui / meng-update variabel global yang kita definisikan pada parent screen. Contoh variabel global adalah ongoingList, finishedList, dan todoText. Agar nilai di dalam masing-masing variabel tersebut berubah, maka perlu digunakan setState, jika tidak maka nilainya tidak akan berubah sebanyak apapun kita menekan checkbox tersebut.

Catatan

Apabila menemui error, apabila sudah meng-install dua extension yang saya sebut di atas, maka cukup arahkan kursor pada bagian yang error (biasanya akan digaris bawah berwarna merah), kemudian tekan logo lampu kuning di sebelah kiri seperti ini :

atau bisa dengan menaruh kursor pada akhir code yang error, kemudian tekan ctrl + [spasi] seperti berikut :

Hit enter . Apabila hanya error import, maka akan teratasi, tetapi apabila error lain, maka hover kursor mouse ke code yang error, baca error-nya kenapa, dan searching di internet, jangan malas ya :)

Finally, the Last Move

Pada terminal ketik flutter run atau pada VSCode, cukup tekan f5 . Untuk devicenya sendiri di android bisa menggunakan USB debugging atau menggunakan emulator dari android studio dan lain-lain. Sedangkan pada IOS saya belum pernah mencoba pada mode USB debugging, tetapi apabila sudah menginstall XCode, maka secara otomatis aplikasi akan berjalan menggunakan emulator IPhone milik XCode. Kurang lebih adalah hasil dari aplikasi yang kita buat.

Jadi mungkin sekian untuk artikel kali ini, semoga bisa bermanfaat bagi teman-teman yang ingin mempelajari Flutter. Saya menerima segala masukan untuk membuat artikel yang lebih baik dan mudah untuk dipahami.

Sebelum berpisah mungkin kita bisa terhubung, cukup kunjungi saya dan See you ! untuk pembacaan kita selanjutnya, ehe.