Wednesday, January 29, 2020

Membuat Upload File ke Server dengan Flutter dan PHP

Upload File ke Server Flutter
Membuat File Uploader dengan Flutter dan PHP (Dilengkapi Source Code) - Dalam membuat CRUD ataupun input data dari aplikasi mobile biasanya kita tidak hanya mengirimkan data tekstual saja. Akan tetapi banyak jenis data lain, terutama data yang bersifat binary yaitu contohnya file. Dalam teknologi mobile, file sendiri dikelompokan dalam berbagai macam grup misalnya Audio, Video, Image, dan Dokumen (file umum).

Pada kesempatan kali ini, saya akan memberikan contoh bagaimanca cara mengupload (mengirim) file melalui Flutter dengan tanpa mengklasifikasikan kelompok file tersebut. Karena, pada dasarnya suatu file tersusun dari data binary yang mana cara mengirim ke servernya bisa menggunakan cara yang sama. Untuk ini, metode upload atau pengiriman file yang digunakan disini bisa dipakai untuk semua jenis file.

Perlu sobat ketahui bahwa artikel ini merupakan rangkain artikel lanjutan dari artikel sebelumnya yaitu (Membuat Login dan Session dan Membuat CRUD + Seacrh) karena source code yang dibuat disini melanjutkan dari source code projek-projek tersebut.

Sebelum, kita membahas konsep upload file melalui aplikasi mobile yang kita buat dengan Flutter ke server PHP, ada baiknya sobat lihat terlebih dahulu skema atau gambaran umum proses upload file dari klien ke server berikut ini:

Skema Proses Upload file ke Server
Pada gambar skema diatas, dapat saya jelaskan secara singkat bahwa pembuatan aplikasi untuk upload file ke server dengan Flutter dan PHP seperti pada artikel kali ini adalah dengan cara membaca file binary lalu mengkonversi data file binary tersebut ke dalam bentuk base64 (karena kita tidak bisa post data binary ke API). Lalu hasil konversi base64 dikirim ke API melalui parameter tertentu, lalu pada sisi server akan menerima data base64 yang mana data itu akan di decode kebentuk binary untuk selanjutnya disimpan di hardisk (storage).

Konsep Pembuatan Aplikasi

Konsep pembuatan aplikasi upload file ke Server dengan Flutter dan PHP sebagai backend, adalah sebagai berikut:
  1. Menggunakan package file_picker sebagai library bantuan untuk memilih file baik pilihan single ataupun multiple.
  2. Menggunakan package http sebagai library bantuan untuk mengirim data ke API dengan method POST.
  3. File yang dipilih melalui library file_picker dibaca satu persatu, lalu nama file dan data-nya disimpan ke memory.
  4. Data dari masing-masing file di memory yang masih berbentuk binary, dikonversi kedalam format base64 (text) untuk dikirimkan melalui API
  5. Data file berbentuk base64 dimasukan ke parameter filedata dan nama file dimasukan ke parameter filename, lalu data-data tersebut dikirimkan melalui API.
  6. Ulangi pengiriman data sebanyak file yang dipilih.
  7. Data yang sampai ke server yang masih berbentuk base64 dikonversi lagi kedalam bentuk binary dengan cara decode_base64, lalu data tersebut di tulis ke hardisk dengan nama file sesuai yang dikirimkan dari klien dan diberikan ektensi untuk menghindari hal-hal yang tidak diinginkan.
  8. Selesai

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Sunday, January 26, 2020

Membuat Login, Session Timeout, dan Logout dengan Flutter dan PHP MySQL

Membuat Login, Session dan Logout dengan Futter dan PHP
Membuat Login, Session Timeout, Autologin, dan Logout dengan Flutter dan PHP MySQL Dilengkapi Source Code -  Dalam membuat aplikasi baik dekstop, web, ataupun mobile fungsi login, session dan logout adalah hal paling penting dan paling utama untuk dibuat sebagai sarat utama user dalam mengakses aplikasi secara valid.

Dalam praktiknya, membuat fungsi login dan logout baik pada aplikasi web maupun mobile dengan back-end dan database pada server hampir serupa caranya. Bedanya, pada aplikasi web, session bisa langsung disimpan pada variabel yang disediakan oleh web server (tergantung bahasa yang dipakai). Namun pada aplikasi mobile, session harus disimpan di database yang nantinya digunakan sebagai kunci utama untuk memvalidasi apakah request yang dilakukan dari sisi klien valid atau tidak.

Untuk itu menguasai pembuatan fungsi login, session, dan timeout sangat wajib sobat kuasai karena merupakan fungsi dasar yang wajib ada pada aplikasi yang sobat buat nantinya. Maka dari itu, pada tutorial kali ini saya membuatkan contoh bagaimana cara membuat (tampilan dan fungsi) login, membuat session, dan fungsi logout pada Flutter dengan backend PHP + MySQL. Tutorial ini melanjutkan source code dari tutorial sebelumnya yaitu (Membuat Search+CRUD dengan Flutter dan PHP + MySQL), dimana saya menambahkan fungsi Login, Session, dan Logout pada source code tutorial tersebut.

Pada source code artikel ini, sobat akan melihat bagaimana cara login dan memvalidasi user, lalu backend akan membuatkan session untuk disimpan pada sisi klien. Setiap kali request yang akan dilakukan, seperti Create, Read, Update, Delete, dan Search akan melalui pengecekan atau validasi session, jika session sudah tidak valid atau dengan kata lain expired (sesuai waktu yang kita tentukan di server) maka request akan ditolak dan diberikan respon dengan kode tertentu agar aplikasi klien kembali ke halaman login.

Pada artikel kali ini, saya hanya akan memaparkan konsep dan bagian-bagian pada source code atau pembuatan fungsi Login, Session, dan Logout.

Konsep Membuat Login, Session, Autologin dan Logout

  1. Aplikasi klien mengirimkan data username dan password, sesuai yang diinput oleh pengguna melalui API.
  2. Backend melalui pencocokan (ke database) username dan password yang dikirim melalui API, untuk password di hash dengan md5 (sesuai hash yang kita pilih atau tentukan).
  3. Jika tidak sesuai, maka berikan respon invalid user.
  4. Jika username dan pasword sesuai, buatkan session (informasi / nilai yang unik) lalu catat session tersebut kedalam database (table users, pada baris username yang login tersebut) dan mencatat last_request.
  5. Klien akan mencatat session yang di hasilkan dari respon API server kedalam memory (untuk digunakan setiap kali request) dan juga ke persistent store melalui SharedPreference (untuk digunakan pada proses autologin)
  6. Setiap kali request dari sisi klien terjadi, harus menyertakan username dan session, dimana informasi ini akan diproses di server, pakah informasi username dan session valid atau tidak.
  7. Jika valid atau terdapat record (baris) dari table user, baru bandingkan waktunya apakah session masih valid atau tidak.
  8. Perbandingan waktu dilakukan dengan field last_request (field ini selalu diupdate dengan timestamp setiap kali ada request melalui API). Jika perbandingan waktu melebihi batas waktu yang kita tentukan (batas timeout), maka request tersebut dianggap tidak valid, dan diberikan kode/status yang menandakan session expired, agar klien bisa melakukan action berupa keluar dari halaman yang aktif dan menuju halaman login lagi.
  9. Proses logout dilakukan dengan cara menghapus data session didalam database, sesuai username dan session yang dikirimkan, fungsinya untuk meproteksi bahwa logout hanya bisa dilakukan oleh username dan session yang cocok.
  10. Proses autologin, dilakukan dengan cara menaruh fungsi pengecekan session pada initState (nilai session dan username diambil dari persistent store SharedPreference), jika session masih valid, maka aplikasi mobile langsung menuju halaman utama tanpa melalui proses login manual. 

Informasi bagian-bagian penting pada source code projek:

- source_backend\table_users.sql
Adalah file script sql untuk tabel users dan 1 record contoh (user admin dengan password 123)

- source_backend\table_siswa.sql
Adalah file script sql untuk tabel siswa untuk table CRUD.

source_backend\service.php
Adalah file PHP atau file back-end untuk memproses API, pada file tersebut terdapat baris code

define("cfg_session_timeout", 60); 

baris kode tersebut, adalah waktu pengaturan untuk tiemout dalam satuan detik. Sobat bisa mengganti nya sesuai keinginan sobat, misalnya untuk 1 jam, maka nilai yang harus dimasukan adalah 3600, dst.

- lib\utils.dart
Adalah file script dart yang berisi kode-kode utilitas pendukung dari projek ini, pada file tersebut terdapat baris code:
const String url_api = "http://nabita.info/eduprog/crud/service.php";

baris kode tersebut, adalah URL dari API dimana lokasi backend berada.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Saturday, January 25, 2020

Membuat Aplikasi Validasi IMEI Black Market dengan Flutter

Membuat Validasi IMEI Black Market
Membuat Aplikasi Validasi IMEI (Kemenperin) dengan Flutter - Indonesia sebagai salah satu pasar HP (Smartphone) terbesar di dunia sangat rentan terhadap aktifitas penjualan gelap atau sering disebut dengan black market. Hal ini tentu saja sangat merugikan pemerintah, karena dengan adanya black market atau pasar gelap akan mengurangi pendapatan resmi pemerintah dari sektor pajak cukai dari barang elektronik tersebut.

Untuk itu pemerintah melalui kementrian perindustrian, telah mencanangkan peraturan baru yang berlaku mulai 17 Agustus 2019 dengan validasi IMEI, agar nantinya digunakan oleh para semua operator yang beroperasi resmi di Indonesia. Maka, jika IMEI pada HP (smartphone) anda tidak terdaftar pada kemenperin, maka dapat dipastikan smartphone tidak bisa digunakan dengan simcard dengan operator apapun di Indonesia (nantinya, sesuai undang-undang yang berlaku).

Pemerintah melalui kemenperin sendiri, sudah menyediakan fasilitas bagi pengguna smartphone di Indonesia untuk memastikan apakah HP (smartphone) yang telah dibeli atau akan dibeli merupakan barang BM (black market) atau resmi. Yaitu dengan mengunjungi website cek imei, namun untuk melihat imei suatu smartphone bukanlah hal yang mudah bagi orang awam, belum lagi harus menuliskan imei HP yang berjumlah 15 digit ke website tersebut.

Sehingga dengan demikian, muncul ide saya untuk mempermudah pengecekan imei melalui website kemenperin yang dibungkus dengan aplikasi mobile yang saya buat dengan Flutter (tersedia source code, sehingga sobat juga bisa mengetahui cara pembuatanya).

Konsep Pembuatan Aplikasi Validasi Imei

  1. Memanfaatkan, website cek imei kemenperin sebagai database utama IMEI pemerintah.
  2. Mengalanisa cara kerja website kemenperin untuk validasi IMEI.
  3. Membaca IMEI dari HP dengan framework Flutter menggunakan package imei_plugin
  4. Menggunakan plugin flutter_webview_plugin untuk membuka website kemenperin dari aplikasi.
  5. Jika IMEI berhasil didapat, lalu membuka website cek imei kemenperin.
  6. Menggunakan fungsi evalJavascript untuk mengeksekusi javascript ke webview.
  7. Karena website kemenperin menggunakan jQuery, script untuk mengisi nomor imei adalah $('input[name="imei"]').val('variabelimei')
  8. Lalu menggunakan script $('.btn').click() untuk melihat hasil dari imei tersebut.
  9. Selesai
Berikut adalah hasil dan cara kerja aplikasi untuk validasi IMEI via kemenperin dengan Flutter yang saya buat.
Hasil aplikasi

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Friday, January 24, 2020

Membuat Widget Signalbar pada Flutter

Membuat Widget Signalbar Flutter
Membuat Widget Tampilan Signalbar pada Flutter - Dalam membuat aplikasi mobile adakalanya kita membutuhkan sutu widget atau komponen untuk menampilkan status kekuatan koneksi ataupun wifi yang biasa kita gambarkan dalam sebuah bar dan biasa disebut dengan signalbar.

Contoh Hasil Aplikasi
Dalam Flutter sendiri, widget signalbar bukan merupakan widget standar bawaan pada framework. Untuk itu, tentu saja kita harus membuat widget ini dari awal sesuai imaginasi masing-masing. Bagi teman-teman pecinta Flutter dan sobat eduprog semuanya, jika membutuhkan widget untuk mengambar signalbar lengkap dengan animasi dan pengaturan nya sekarang bisa langsung menambahkan package bernama ep_signalbar yang merupakan package yang dirilis oleh eduprog untuk membuat widget signalbar pada Flutter.

Lalu bagaimana cara menggunakan widget ini untuk projek Flutter yang akan sobat buat, serta beberapa contoh kode dan widget signalbar yang dihasilkan oleh package ep_signalbar ini. Berikut adalah contoh kode lengkap cara penggunaan widget ep_signalbar ini.

Sebelum membuat contoh kode sepert dibawah ini, jangan lupa tambahkan package ep_signalbar : ^0.0.2 kedalam file pubspec.yaml sobat.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Tuesday, January 21, 2020

Membuat CRUD dan Search pada Flutter (Dengan Backend PHP dan MySQL)

Membuat CRUD Flutter
Tutorial Lengkap Membuat CRUD + Search pada Flutter dengan Backend PHP dan MySQL dilengkapi Source Code - CRUD atau kependekan dari Create Read Update dan Delete adalah fungsi operasional paling dasar dalam pembuatan aplikasi, baik aplikasi desktop, web, maupun mobile. Untuk itu memahami pembuatan CRUD adalah dasar utama dalam pembuatan aplikasi, karena sejatinya dalam membuat aplikasi baik desktop, maupun mobile tentu saja tidak akan terlepas dari aktifitas membuat data (create), membaca data (read), memperbaharui data (update) dan menghapus data (delete).

Selain CRUD sendiri, biasanya kita juga perlu menambahkan beberapa fitur untuk mempermudah pengguna aplikasi yang kita buat, seperti paging dan pencarian data (search). Kusus untuk pembuatan aplikasi mobile termasuk menggunakan framework Flutter, kita harus melibatkan proses back-end, dikarenakan database yang kita gunakan bersifat central (berada pada server).

Dengan demikian untuk melakukan proses CRUD pada aplikasi mobile dengan database pada server, kita harus membuat layanan API agar data dari apliakasi mobile hasil interaksi dengan pengguna bisa sampai ke server dengan API tersebut.

Prinsip Pembuatan CRUD

Pada pembuatan CRUD kali ini, saya akan jelaskan secara singkat dimana pada aplikasi mobile kita akan menggunakan Flutter dan sebagai back-end kita menggunakan PHP dan MySQL sebagai database nya. Secara singkat bisa saya gambarkan bahwa ketika proses CRUD terjadi, aplikasi mobile mengirimkan data data dengan identitas tertentu untuk membedakan setiap aksi melalui API, lalu data yang dikirimkan API (biasanya method POST) di proses oleh webserver dan PHP dan MySQL sebagai database nya.

Adapun gambaran singkat CRUD seperti yang saya jelaskan di atas, bisa dilihat dari gambar dibawah ini:
Skema CRUD
Pada source code CRUD dengan Flutter yang saya buat prinsipnya adalah dengan menggunakan parameter dengan method POST sebagai pengenal untuk melakukan setiap aksi, dimana saya menentukan parameter utama sebagai pengenal utama apakah peintah yang dikirimkan melalui API untuk proses Create, Read, Update, Delete, atau Search data. Parameter utama-nya adalah cmd dengan daftar perintah sebagai berikut:
1. get_all_data : untuk melakukan proses READ dan search data (dengan parameter tambahan)
2. insert_data : untuk melakukan proses CREATE data
3. update_data : untuk melakukan proses UPDATE data
4. delete_data : untuk melakukan proses DELETE data

Untuk memperjelas konsep dan penjelasan CRUD di atas, mari kita mulai pebuatan kode aplikasi CRUD pada Flutter dengan back-end PHP dan MySQL.

Struktur Table MySQL

Sebelum memulai pembuatan kode untuk PHP dan Flutter, kita harus membuat table yang akan kita lakukan prose CRUD, pada contoh CRUD kali ini saya membuat table dengan nama siswa pada database eduprog dengan struktur / query sebagai berikut.
CREATE TABLE `siswa` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
`alamat` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
`jk` varchar(1) COLLATE utf8_unicode_ci DEFAULT NULL,
`status` int(11) NOT NULL DEFAULT '1' COMMENT '0 = tidak aktif, 1 = aktif',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Table terdiri dari 5 kolom, dimana kita hanya akan mengisi 3 kolom pada CRUD yaitu nama, alamat, dan jk. Khusus untuk kolom `jk` kita akan mengisi dengan 1 karakter, dimana P untuk perempuan dan L untuk laki-laki, karena inputan ini sudah kita tentukan maka pada aplikasi mobile kita akan menggunakan Dropdown untuk kolom ini. Kolom id sebagai kunci utama table dengan sifat auto increment sehingga kita tidak perlu menyebut kolom tersebut saat melakukan query insert.

Kode Backend PHP


Setelah kita membuat table pada MySQL, langkah selanjutnya adalah membuat kode back-end yang mengkonsumsi table tersebut. Berikut adalah kode PHP sebagai API aplikasi mobile kita untuk keperluan CRUD kali ini.

Kode pada Flutter

Lalu setelah kita membuat kode untuk API dengan PHP, langkah selanjutnya adalah membuat aplikasi mobile atau membuat kode untuk aplikasi mobile dengan Flutter. Sebelumnya kia harus menambahkan library http pada pubspec.yaml dan permission internet  android:name="android.permission.INTERNET" /> (untuk release apk) pada file AndroidManifest.xml.

Berikut adalah kode lengkap aplikasi CRUD pada sisi Flutter:


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Saturday, January 18, 2020

Membuat Animasi (Kemunculan) Tombol pada Flutter

Animasi Tombol Flutter
Membuat Animasi (Kemunculan) Button pada Flutter - Seperti yang kita ketahui bersama bahwa salah satu komponen utama yang mendukung  tampilan antar muka dan pengalaman pengguna pada aplikasi yang kita buat adalah dengan menambahkan animasi yang ciamik. Penambahan animasi yang tepat dapat meningkatkan nilai dari kualitas antar muka (UI) dan pengalaman pengguna (UX) dari aplikasi mobile yang kita buat.

Untuk itu, mempelajari dan mengeksplorasi animasi pada framework yang kita gunakan untuk membuat aplikasi mobile yaitu pada kasus ini adalah Flutter sangatlah penting. Kali ini , saya akan memberikan contoh penggunaan animasi saat tombol muncul ataupun menghilang. 

Konsep animasi yang akan kita pelajari kali ini masih sama seperti pada tutorial sebelumnya (artikel), dimana kita akan menggunakan widget AnimatedContainer yang mendukung berbagai tipe animasi untuk transformasi warna dan ukuran, lalu kita akan menambahkan widget tombol berupa RaisedButton kedalam AnimatedContainer.

Konsep Animasi

Pada contoh pembuatan kode animasi tombol menggunakan  AnimatedContainer dan RaisedButton kali ini adalah membuat animasi saat muncul dan menghilang. Sehingga properti/field yang kita mainkan adalah width dan heigth dari ukuran 0 (tidak muncul) menjadi ukuran tertentu (muncul).

Untuk lebih memperjelas konsep tersebut, dan seperti apa contoh kode animasi tombol dan hasil aplikasi nya, berikut adalah contoh kode lengkapnya.

Contoh Kode

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Friday, January 10, 2020

Membuat Animasi Widget dengan AnimatedContainer pada Flutter

Membuat Animasi Widget Flutter
Menambahkan atau Membuat Animasi Widget pada Flutter - Salah satu kesuksesan membuat aplikasi mobile untuk digemari oleh pengguna adalah membuat User Interface dan User eXperience dengan sebaik mungkin. Salah satu cara untuk membuat pengguna aplikasi kita betah dan tidak bosan saat memakai kita adalah dengan menambahkan berbagai animasi dalam aplikasi yang kita buat.

Animasi pada tampilan aplikasi yang kita buat, tentu saja dapat meningkatkan kualitas antar muka pengguna sehingga mengusai teknik-teknik dan implementasi animasi widget pada Flutter cukup lah penting. Setidaknya kita dapat mengimplementasikan animasi yang cukup sederhana dan menambahkan terhadap widget-widget yang kita buat pada Flutter.

Flutter sendiri sudah menyediakan berbagai macam widget bantuan untuk yang teah  mendukung animasi tentu saja dengan maksud dan tujuan tertentu. Beberapa widget animasi yang bisa kita gunakan pada Flutter adalah AnimatedContainer, AnimatedAlign, AnimatedPadding, AnimatedCrossFade, AnimatedPositioned, dan masih banyak lagi widget animasi lainya.

Pada kesempatan tutorial kali ini, saya hanya akan memberi contoh satu diantara berbagai macam widget animasi yang ada pada Flutter di atas yaitu AnimatedContainer.

Jika sobat sebelumnya sudah familiar dengan Flutter, tentu saja sobat sudah tidak asing lagi dengan widget paling umum yang biasa digunakan pada Flutter yaitu widget Container. Nah, AnimatedContainer ini adalah versi animasi dari widget Container. Karena widget ini paling umum, maka dari itu saya memberi contoh tutorial animasi pertama kali pada Flutter dengan menggunakan widget AnimatedContainer.

Prinsip Animasi Pada AnimatedContainer
Sebelum kita mulai masuk pada implementasi pembuatan kode animasi dengan AnimatedContainer sobat perlu mengetahui beberapa prinsip animasi dengan widget Flutter ini. Pada dasarnya animasi pada widget ini atau widget animasi Flutter lainya adalah mengandaplkan perubahan nilai dari berbagai macam properti/field yang bisa dianimasikan, contohnya adalah width (lebar), height (tinggi),  dan color (warna). Lalu ada properti yang menentukan jenis animasinya yaitu curve dan properti yang menentukan waktu animasi yaitu duration.

Untuk lebih memperjelas, bagaimana widget AnimatedContainer bekerja, bagaimanya perbedaanya dengan versi widget tanpa animasi (Container), berikut adalah contoh kode yang melibatkan widget dengan animasi dan widget tanpa aimasi, agar sobat lebih paham perbedaan dan hasilnya.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Monday, January 6, 2020

Latihan Widget Flutter : FloatingActionButton, BottomNavigationBar, ListView, dan ExpansionTile

Berlatih Membuat UI pada Flutter
Membuat Tampilan Flutter dengan FloatingActionButton, BottomNavigationBar, ListView, dan ExpansionTile - Salah satu resep utama dalam membuat tampilan aplikasi mobile dengan Flutter adalah mengusai widget-widget penting yang ada dalam framework Flutter. Untuk memahami widget-widget mulai dari struktur, cara kerja, dan hal-hal yang sifat-sifat dari masing-masing widget tersebut tentu saja kita harus banyak-banyak latihan.

Kali ini, saya akan membuat contoh tampilan pada framework flutter yang melibatkan beberapa widget penting yang sering dipakai oleh developer untuk membuat sebuh aplikasi mobile dengan Flutter. Widget-widget yang akan kita bahas dalam artikel ini adalah FloatingActionButton, BottomNavigationBar, ListView, dan ExpansionTile.

Sebelum kita praktik implementasi widget-widget tersebut kedalam sebuah kode untuk membentuk suatu tampilan yang menarik, perlu sobat ketahui penjelasan masing-masing widget tersebut di atas.

FloatingActionButton

FloatingActionButton adalah tombol ikon melingkar yang melayang di atas konten untuk mempromosikan tindakan utama dalam aplikasi. Tombol aksi mengambang paling umum digunakan pada field Scaffold.floatingActionButton.

BottomNavigationBar

BottomNavigationBar adalah Widget material yang ditampilkan di bagian bawah aplikasi untuk memilih di antara beberapa tampilan, biasanya antara tiga dan lima menu.

ListView

ListView adalah widget gulir (berbentuk list) yang paling umum digunakan. Widget ini menampung daftar anak-anak nya, jika melebihi batas ukuran layar akan akan ditampikan kedalam bentuk scroll.

ExpansionTile

ExpansionTile adalah widget yang bisa digunakan sebagai anak dari ListView untuk menampilkan daftar lebih dari satu level. Karena ExpansionTile ini memiliki fitur expand dan collapse, sehingga cocok untuk mengelompokan menu dan mengurangan spase penggunaan layar dengan fitur collapse nya tanpa mengurangi nilai user experience terhadap suatu menu.


Mari langsung saja kita praktikan contoh pembuatan kode tampilan di Flutter yang melibatkan widget-widget tersebut di atas, untuk lebih memahami seperti apa tampilan dan penggunaan widget-widget tersebut.

Contoh Kode

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Sunday, January 5, 2020

Membuat dan Membaca QrCode/BarCode dengan Flutter

Membuat dan Membaca QrCode/BarCode dengan Flutter
Cara Membuat dan Membaca (Scan) QrCode/BarCode dengan Camera Smartphone pada Flutter - Barcode dan QrCode mungkin sudah tidak asing lagi ditelinga sobat. Jika kita pergi ke supermarkat atau pasar swalayan lainya, biasanya kita akan menemukan Barcode ataupun Qrcode pada sebuah produk yang mana kode tersebut berisi informasi tertentu untuk mengenali sebuah produk.

Pada dasarnya BarCode dan QrCode adalah gambar yang dapat dipindai mesin yang dapat langsung dibaca menggunakan kamera Smartphone. Setiap kode terdiri dari sejumlah kotak hitam dan titik-titik pada QRCode dan baris pada BarCode yang mewakili informasi tertentu.
Contoh BarCode dan QrCode
Semkain berkembangnya teknologi informasi dan aplikasi, membuat QrCode semakin popular. terutama untuk saat ini, QrCode banyak dipakai untuk scan kode pembayaran modern misalnya dengan ovo, dana, gopay, dan sejensinya. Untuk itu, dalam tutorial kali ini saya akan menunjukan dan membuat contoh kode bagaimana cara membuat (mengenerate) teks kedalam QrCode dan membaca baik QrCode maupun BarCode menjadi sebuah teks. dengan memanfaatkan kamera smartphone.

Sebelum kita memulai pembuat kode untuk membuat dan membaca QrCode/BarCode, perlu sobat ketahu bahwa disini saya memakai library tambahan  yang perlu sobat tambahkan di file pubspec.yaml

dependencies:
  qr_flutter: ^3.2.0
  qr_code_scanner: ^0.0.12

Kusus untuk library qr_code_scanner sobat perlu menambahkan permission untuk akses kamera, jika pada android berada pada file AndroidManifest.xml dengan format sebagai berikut:


< uses-permission android:name="android.permission.CAMERA" />

Lalu, setelah anda menambahkan library dan akses permission seperti di atas, tulislah kode berikut ini:

Kode untuk membuat / mengenerate QrCode adalah sebagai berikut:

Kode untuk membaca / scan QrCode dan BarCode adalah sebagai berikut:


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Membuat Tampilan Halaman Login Keren dengan Flutter

Membuat Halamn Login Keren dengan Flutter
Membuat Ui Login Modern dengan Flutter - Salah satu komponen utama dalam mendesain atau membuat aplikasi baik desktop, web, maupun mobile adalah halaman login. Halaman login (rata-rata) wajib ada dalam sebuah aplikasi mobile, dan merupakan halaman yang akan tampil dan disuguhkan terhadap pengguna aplikasi tersebut pertama kali.

Karena halaman login merupakan halaman yang pertama kali dilihat oleh pengguna aplikasi, tentu saja sebagai developer aplikasi kita harus membuat atau mendesain sedemikian rupa agar dapat menarik perhatian pengguna. Karena bisa dikatakan halaman login yang baik akan memberi kesan positif baik kepada pegguna aplikasi yang kita buat.

Untuk itu, dalam tutorial kali ini kita akan belajar bagaimana cara membuat halaman login sederhana yang luwes dan keren dengan Flutter yang bisa digunakan untuk aplikasi kita nantinya. 

Sebelum masuk ke pembuatan kode, perlu saya informasikan disini dalam membuat tampilan login saya menggunakan library tambahan untuk membuat dekorasi gelombang (clipper) bernama flutter_custom_clippers yang dipasang dibagian atas dan bawah halaman tersebut dan melibatkan 1 aset gambar sebagai logo utama apliaksi kita.

dependencies:
  flutter_custom_clippers: ^1.1.0

Buatlah projek Flutter dengan kode sebagai berikut:


Berikut adalah hasil tampilan dari kode tersebut setelah aplikasi dijalankan
Tampilan Login
Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 


Thursday, January 2, 2020

Tutorial Flutter : Membuat Single dan Multiple Selection dengan ChipChoice

Membuat Selection dengan ChipChoice
Membuat Single dan Multiple Selection dengan ChipChoice pada Flutter - Salam satu widget penting pada Flutter yang bisa kita gunakan unuk mengakomodir kebutuhan tampilan pemilihan tunggal ataupun pemilihan jamak adalah ChipChoice dengan menambahkan logic tertentu.

Pada dasarnya widget ChipChoice adalah widget tunggal yang memiliki parameter selected, dimana nilai dari parameter ini yang mengindikasikan state dari widget ini apakah dalam kondisi terpilih atau tidak. Selain parameter selected ChipChoise juga memilih event onSelected dimana event ini akan di-trigger ketika ChipChoice di tap.  Perlu sobat ketahui juga bahwa event onSelected pada ChipChoice akan mengirimkan parameter dengan tipe boolean yang mengindikasikan state yang seharusnya setelah ChipChoice  di tap.

Dengan berbekal informasi di atas, untuk membuat pemilihan tunggal ataupun pemilihan jamak dengan ChipChoice kita perlu sedikit memainkan logic untuk melakukan hal tersebut.

Agar sobat lebih memahami bagaimana cara membuat single selection (pemilihan tunggal) dan multiple selection (pemilihan jamak), simaklah kode yang sudah saya buat seperti dibawah ini:


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Tutorial Flutter : Menampilkan Konfirmasi ketika Tekan Tombol Back

Menampilkan Konfirmasi pada Tombol Back Flutter
Cara Menampilkan Konfirmasi ketika Tombol Back ditekan pada Flutter - Dalam membuat aplikasi mobile tentu saja kita ingin menghindari kesalahan atau aktifitas pengguna yang tidak disengaja, salah satunya adalah memberikan konfirmasi ketika pengguna menekan tombol back pada device. Karena jika tidak, biasanya halaman atau aplikasi dapat langsung keluar, padahal pengguna tidak sengaja menekan tombol tersebut.

Untuk itu, menampilkan dialog konfirmasi pada saat tombol back ditekan baik secara sengaja atau tidak sengaja tentu saja sangat penting. Pada Flutter, cara ini sangat mudah dilaukan karena pada Flutter terdapat widget dengan nama WillPopScope yang dapat kita fungsikan untuk mendeteksi aktifitas yang terkait tombol back pada device melalui paramater onWillPop.

Bagaimana cara nemampilkan dialog konfirmasi saat tombol back pada device ditekan? Mari simak contoh kode untuk menampilkan dialog konfirmasi saat tombol back pada device ditekan, seperti di bawah ini:

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Tutorial Flutter : Membuat Menu Navigation Drawer

Membuat Menu Navigation Drawer dengan Flutter
Cara Membuat Menu Navigation Drawer dengan Flutter  - Dalam membuat aplikasi mobile yang mana viewport atau tampilan layar serba terbatas, tentu saja membuat developer untuk memutar otak untuk menaruh menu utama pada aplikasi yang dikembangkan. Karena dengan keterbatasan ruang pada ukuran layar device mobile, kita harus tetap menjaga layout aplikasi mobile yang kita buat agar tidak mengurangi nila tampilan pengguna dan pengalaman pengguna dalam menggunakan aplikasi yang kita buat.

Untuk itu salah satu cara yang bisa kita gunakan untuk menaruh informasi profile pengguna dan menu-menu utama aplikasi mobile yang kita buat dengan Flutter, kita bisa memanfaatkan widget drawer pada Scaffold. Dengan menambahkan widget ini, maka pada AppBar akan terdapat hamburger menu untuk menampilkan widget Drawer atau widget Drawer ini juga dimunculkan dengan melakukan slide dari sebelah kiri layar.

Bagaimana cara membuat menu navigation drawer pada Flutter? Mari simak contoh kode untuk menampilkan navigation drawer dan mengisinya dengan informasi akun serta beberapa menu tambahan lainya  pada widget Scaffold seperti dibawah ini:

Kode:

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 

Wednesday, January 1, 2020

Membuat Tabel dengan Freeze Column Pada Flutter

Membuat Freeze Column pada Table Flutter
Cara Membuat Tabel dengan Freeze Column Pada Flutter - Dalam membuat aplikasi mobile, salah satu model layout yang sering digunakan untuk menampilkan informasi kepada pengguna adalah layout tabel. Terkadang developer harus menampilkan informasi dalam bentuk tabel dengan jumlah kolom atau jumlah baris yang sangat banyak.

Padahal kita tahu sendiri bahwa ukuran layar pada device mobile sangatlah terbatas, sehingga untuk menyiasati infromasi yang disajikan kedalam tabel dengan jumlah kolom yang sangat banyak kita perlu melakukan freeze pada kolom tabel tersebut untuk mempertahankan informasi kolom-kolom penting saat pengguna aplikasi melakukan horizontal scrolling.

Lalu bagaimana cara membuat layout tabel dengan freeze column pada Flutter? Sebelum kita mengimplementasikan pada sebuah kode, ada baiknya sobat simak terlebih dahulu konsep layout tabel dengan Freeze Column seperti dibawah ini:
Konsep Layout Freeze Column
Pada layout utama untuk membuat Freeze Column pada Tabel, adalah dengan membagi tabel dengan 2 bagian, dimana bagian pertama (Container tanpa SingleChildScrollView) adalah untuk menaruh freeze column, sedangkan bagian yang satu lagi adalah untuk menaruh unfreeze column (Expanded dengan SingleChildScrollView) dengan axis scroll horizontal.

Untuk lebih memperjelas implementasi kode pada layout di atas, berikut adalah contoh source code nya:

Kode

Hasil Aplikasi
Berikut ada hasil aplikasi dari kode di atas, setelah di jalankan melalui virtual device:


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini