Friday, December 27, 2019

Cara Menambahkan Custom Font pada Flutter

Menggunakan Custom Font pada Flutter
Menggunakan Font Custom pada Style Flutter - Dalam membuat aplikasi mobile salah satu komponen yang mendukung UI/User Interface adalah pemilihan jenis font yang tepat. Pada pembuatan aplikasi mobile dengan Flutter baik untuk output Android (apk) ataupun iOS (ipa) akan menggunakan font default (bawaan) dari masing-masing device jika kita tidak mendefinisikan jenis font pada style text dari aplikasi yang kita buat.

Untuk itu agar mendapatkan output style text aplikasi sesuai standar yang kita inginkan, kita perlu mendefinsikan jenis font untuk aplikasi kita agar kita mendapatkan output tampilan yang seragam pada setiap device dimana aplikasi kita di jalankan. Hal ini tentu saja sangat penting, mengingat kita tidak bisa memprediksi atau memperkirakan jenis font apa saja yang dipakai oleh target device aplikasi kita.

Dengan demikian, mendefinisikan font khusus pada aplikasi kita akan dapat meningkatkan kualitas User Interface maupun User eXperience terhadap aplikasi yang kita buat. Tentu saja hal ini menjadi keuntungan tersendiri bagi kita dalam membuat sebuah aplikasi mobile.

Untuk itu, mari langsung saja kita praktikan bagaimanca cara menambahkan dan menggunakan font custom pada aplikasi Flutter kita.

Ikuti langkah-langkah berikut ini:

1. Mencari Font

Langkah pertama yang perlu sobat lakukan adalah mencari file true type font (biasanya berektensi ttf), pilihlah jenis font sesuai selera sobat. Untuk mencari font, sobat bisa kunjungi website-website penyedia font yang gratis, misalnya dafont, download file ttf yang sobat inginkan.

2. Menaruh di Projek Flutter

Setelah sobat memilih dan menentukan file ttf seperti pada langkah sebelumnya, selanjutnya sobat perlu menaruh file ttf tersebut ke dalam projek Flutter sobat. Masukan kedalam folder (misalnya) font (sobat perlu membuat foder ini terlebih dahulu, sejajar dengan folder lib).

3. Mendaftarkan font di pubspec.yaml

Agar jenis font / file ttf yang sobat masukan ke projek Flutter (seperti langkah sebelumnya) dikenali oleh projek Flutter, maka sobat perlu mendaftarkan file tersebut melalui file pubspec.yaml.
Untuk mendaftarkan jenis font pada file pubspec.yaml harus dilakukan dibawah section flutter, contoh formatnya seperti dibawah ini: 
flutter:
  fonts:
    - family: Schaeffer
      fonts:
        - asset: fonts/Schaeffer.ttf
Pada contoh di atas, kita menambahkan font dengan jenis Schaeffer dimana lokasi file ttf nya ada di folder fonts dengan nama file Schaeffer.ttf.

4. Mengimplementasikan pada kode

Setelah sobat menyelesaikan ke-tiga langah di atas, maka jenis font sudah bisa digunakan pada kode Flutter kita. Berikut adalah contoh kode untuk mengimplementasikan jenis font yang baru kita tambahkan seperti di atas.

Hasil Aplikasi
BerikutContoh hasil aplikasi, dengan menggunakan Custom font diatas
Hasil Aplikasi

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

Tuesday, December 24, 2019

Membuat Tampilan (Layout) Responsive Pada Flutter

Tampilan Responsive pada Flutter
Cara Membuat Tampilan (Layout) Responsive Pada Flutter - Dalam membuat aplikasi baik aplikasi web maupun mobile, tentu saja kita harus memikirkan variasi ukuran layar (space) dari target device dimana aplikasi yang kita buat akan diakses atau diinstall. Untuk itu dalam mambuat tampilan aplikasi kita perlu membuat tampilan dengan kemampuan responsive atau menyesuaikan dengan keadaan.

Ada berbagai macam cara untuk membuat tampilan aplikasi responsive pada Flutter, tapi sebelum kita membahas lebih jauh perlu anda pahami terlebih dahulu konsep utama dari tampilan responsive yang akan kita buat adalah menyesuaikan ukuran viewport/layar/space yang ada. Misalnya pada sebuah contoh kasus,, dimana jika device dengan lebar layar sama dengan atau lebih besar dari 600 logical pixel, kita akan membuat 3 kolom, dan jika kurang dari ukuran (600 logical pixel) itu maka kita akan membuat layout dengan 2 kolom.

Untuk itu, agar lebih memahami bagaimana cara membuat tampilan responsive pada Flutter, langsung saja kita membuat sebuah contoh kode tampilan responsive pada Flutter seperti dibawah ini:

Kode:

Keterangan Kode:
Pada contoh pembuatan tampilan responsive kali ini, saya menggunakan widget bernama LayoutBuilder, widget ini memiliki 2 object variabel utama pada parameter builder yaitu (BuildContext context, BoxConstraints constraints) dimana kita bisa menggunakan object constraints untuk mengambil ukuran lebar maksimal dimana widget LayoutBuilder ditempatkan.

Pada contoh kasus diatas, widget LayoutBuilder ditempatkan langsung pada body Scaffold paling luar, dehingga bisa dikatakan ukuran lebar yang kita dapatkan hampir seukuran logical pixel dari layar device.

Lalu, pada kode tersebut kita menggunakan widget Gridview sebagai widget layout utama aplikasi kita, dimana pada Gridview kita memainkan parameter crossAxisCount untuk mengatur jumlah kolom yang muncul pada ukuran layar tertentu.

Hasil Aplikasi

Berikut adalah contoh hasil eksekusi kode pada layar HP dengan lebar kurang dari 600 logical pixel (kiri) dan pda layar tablet dengan lebar lebih dari 600 logical pixel (kanan).

Hasil Aplikasi
Tips:
Sekedar mengingatkan saja, dengan metode LayoutBuilder maxWidth dan maxHeight tidak akan berpengaruh dengan rotasi layar atau oerientasi layar. Sehingga jika apliaksi yang anda buat menginginkan untuk responsive pda level orientasi, anda bisa mengunakan kode MediaQuery.of(context).orientation untuk mendeteksi posisi orientasi layar baik portrait maupun landspace serta mengkombinasikan dengan cara di atas.

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

Monday, December 23, 2019

Membuat Fungsi setTimeout (sleep) dan setInterval Pada Flutter (Dart)

Fungsi setTimeout (sleep) dan setInterval (timer) pada Flutter
Membuat Fungsi setTimeout (sleep) dan setInterval pada Flutter (Dart) - Salah satu fungsi yang penting yang biasa kita gunakan dalam membuat aplikasi untuk mengimplementasikan algorithma secara khusus adalah fungsi setTimeout (sleep) dan fungsi setInterval (timer). Kedua fungsi itu sangatlah penting dan tidak jarang terlibat dalam penerapan kedalam kode yang kita buat di Flutter (Dart).

Fungsi setTimeout

Fungsi setTimeout yang saya maksud  adalah merujuk/ber-equivalen pada javascript (sleep secara pemrograman umum) yang berfungsi untuk menunda eksekusi kode pada periode tertentu baik secara sinkron maupun asinkron. Artinya dengan metode ini kita bisa menunda eksekusi kode dengan memberikan jeda yang kita inginkan.

Kode Fungsi:
void _setTimeOut(int _ms){
  Future.delayed(Duration(milliseconds: _ms), (){
    //. action    print("action for setTimeout");
  });
}

Keterangan :
Pada Flutter/Dart kita bisa menggunakan fungsi Future.delayed untuk membuat equivalent fungsi setTimeout, dimana kita bisa memasukan variabel dengan tipe class Duration sebagai variabel yang menunjuk waktu tunda dari fungsi yang akan dieksekusi pada Callback nya. Pada contoh di atas kita memasukan waktu pada class Duration dengan satuan miliseconds.

Fungsi setInterval

Fungsi setInterval yang saya maksud disini adalah merujuk pada/ber-equivalen pada javascript (timer secara pemrograman umum) yang berfungsi untuk melakukan eksekusi kode secara periodek dengan jeda waktu yang kita tentukan. Fungsi ini tidak sama seperti looping, karena secara umum setInterval (timer) digunakan untuk eksekusi kode secara periodic dan asinkron tanpa harus menganggu thread utama dari halaman yang aktif.

Kode Fungsi:
import 'dart:async';
void _setInterval(int _ms){
  Timer.periodic(Duration(milliseconds: _ms), (timer) {
    //. action    print("action for _setInterval");
  });
}

Keterangan :
Pada Flutter/Dart kita bisa menggunakan fungsi Timer.periodic untuk membuat equivalent fungsi setInterval (timer), dimana kita bisa memasukan variable dengan tipe class Duration sebagai variabel yang menunjuk waktu jeda secara periodik dari fungsi yang akan dieksekusi pada Callback nya. Pada contoh di atas kita memasukan waktu pada class Duration dengan satuan miliseconds.

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

Sunday, December 22, 2019

Membuat Widget untuk Indikator Loading Data Pada Flutter

Membuat Widget Untuk Loading Data pada Flutter
Membuat Indikator Loading Data pada Flutter - Membuat tampilan loading atau indikator loading data saat aplikasi mobile melakukan proses pengambilan data atau proses rendering terlihat sederhana, namun hal ini sangat penting dan wajib kita lakukan dalam pembuatan aplikasi mobile.

Indikator loading sangat penting untuk menginformasikan kepada pengguna bahwa aplikasi kita sedang melakukan hal (bekerja) sehingga pengguna perlu menunggu karena aplikasi sedang melakukan proses.

Bayangkan, jika kita tidak melakukan atau membuat indikator loading pada aplikasi yang kita buat, tentu saja akan membuat pengguna bingung dan interaksi dengan pengguna akan terganggu karena tidak ada indikator yang memastikan apa yang sedang dilakukan aplikasi saat itu.

Untuk itu, dalam artikel kali ini saya akan memberi contoh cara membuat widget atau membuat indikator loading ketika aplikasi melakukan pengambilan data sehingga aplikasi terksan interaktif.

Membuat Projek Flutter

Untuk memperjelas cara membuat widget untuk loading indikator saat loading data pada Flutter, buatlah sebuah projek Flutter dengan kode sebagai berikut:

Kode



Keterangan:
Yang perlu anda perhatikan pada kode di atas adalah, ketima membuat satu variable bernama isLoading dengan type bool dimana, ketika variable tersebut bernilai true maka kita asumsikan aplikasi dengan memuat (mengambil) data dan pada widget dari halaman tersebut kita menampilkan CircularProgressIndicator dan kita berikan tulisa Loading.. dibawah komponen tersebut.

Lalu jika variable isLoading bernilai false maka tampilan widget pada halaman tersebut akan berubah menjadi ListView (yang dapat disasumsikan sebagai tampilan data-data yang berhasil di muat oleh aplikasi).

Hasil Aplikasi

Berikut adalah hasil tamplan aplikasi dari kode yang kita buat di atas.

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

Tuesday, December 17, 2019

Flutter : Membuat Push Notification dengan Firebase Cloud Messaging

Membuat Push Notification pada Futter dengan FCM
Membuat Push Notification dengan Firebase Clound Messaging (FCM) pada Flutter - Salah satu fitur wajib sebuah aplikasi mobile yang enterprise adalah mampu mengirimkan informasi dari server suatu saat jika ada informasi yang penting sehingga pengguna mendapatkan informasi yang cepat dan tepat.

Notifikasi yang dikirimkan dari server harus bersifat aktif dan mampu mengakomodasi kepentingan aplikasi, dengan cara notifikasi akan tetap muncul tanpa aplikasi sedang berjalan saat itu dan ini berlaku pada semua platform / mobile OS baik Android maupun iOS.

Untuk menghadirkan fitur Push Notification pada aplikasi mobile yang kita buat baik di iOS maupun Android yaitu menggunakan fasilitas API dari firebase dengan nama Firebase Cloud Messaging (FCM). Banyak sekali kelebihan dari FCM ini sehingga sangat cocok untuk digunakan sebagai pilihan utama kita dalam pembuatan Push Notification aplikasi mobile, tanpa harus membuat kode-kode yang panjang.

Kenapa harus menggunakan FCM?

Seperti yang kita singgung sebelumnya bahwa kelebihan utama dari FCM ini sebenarnya adalah sangat ringkas, sehingga dapat menghemat waktu pembuatan Push Notification multi platform pada Flutter.

Dapat anda bayangkan, jika anda membuat Push Notification anda sendiri maka anda perlu menyiapkan mekanisme dan pemlihan teknologi sendiri (misal websocket, tcp socket, dll) belum lagi ditambah pembuatan service yang terpisah pada iOS dan Android. Jadi dengan kata lain, efisien adalah alasan utama kita menggunakan FCM untuk fitur Push Notification aplikasi mobile kita.

Dengan FCM ini kode yang kita tulis untuk menerima notifikasi di sisi klien sangatlah sederhana, karena Flutter telah menyediakan Plugin / Library yang lengkap untuk melakukan hal tersebut.

Membuat Projek Flutter untuk Push Notification FCM

Pada tutorial kali ini, untuk pembuatan / setup konfigurasi projek firebase tidak akan dibahas ulang, karena pada projek kali ini kita akan melanjutkan / memodifikasi tutorial sebelumnya yaitu : Membuat Login Akun Google dengan Firebase, ada baiknya anda mengikuti tutorial tersebut dan mngikuti langkah-langkah pembuatan projek pada Firebase untuk keperluan tutorial ini.

1. Membuat Projek di Flutter

PENTING! : Pada projek kali ini kita akan meneruskan kode projek Login dengan akun Google seperti tutorial sebelumnya yang mempunya nama package : "net.eduprog.eduprog_login_with_google".

2. Menambahkan Package di pubspec.yaml

Untuk keperluan pembuatan Push Notification dengan FCM ini kita harus menambahkan package "firebase_messaging" pada file pubspec.yaml seperti gambar dibawah ini:
pubspec.yaml
Setelah anda menambahkan package, seperti biasa lakukan proses Packages get dengan menekan menu aplikasi Android Studio anda.

3. Membuat File-File Source Code

Langkah selanjutnya adalah menulis kode-kode pada projek Flutter kita, dengan struktur sebagai berikut:

Setelah anda menambahkan package yang diperlukan untuk projek Flutter kita kali ini, saatnya untuk membuat file-file Source Code dengan struktu sebagai berikut ini:
  • main.dart (file utama)
  • util\screen_util.dart (file source untuk class bantuan screen)
  • page\login_page.dart (file source untuk menerima notifikasi melalui komponen snackbar)
Kode masing-masing file:

4. Menjalankan Projek ke Virtual Device

Setelah menyelesaikan semua langkah-langkah sebelumnya, sekarang anda bisa memulai mencoba hasil program / aplikasi mobile yang kita buat dari Flutter di atas.
Hasil Aplikasi

5. Mengirimkan Notification dari Server (Firebase)

Setelah anda menjalankan apliasi ke real/virtual device, waktunya kita akan mencoba mengiriman notifikasi ke klien melalui server.

Ikuti langkah-langkah nya sebagai berikut:

1) Buka projek Firebase anda, yang anda gunakan untuk pembuatan aplikasi tersebut di atas.
projek firebase
2) Buka menu Grow --> Cloud Messaging (lihat sebelah sisi kiri), lalu akan muncul tampilan sbb:
Menu Cloud Messaging
3) Buatlah notifikasi baru dengan cara menekan tombol New Notification pada kanan atas.
Mengisi notifikasi
Isi Notification title dan Notification text sesuai keingingan anda, informasi ini yang akan di tangkap di klien atau akan muncul di panel notifikasi OS Mobile pada kondisi aplikasi kita jika tidak aktif (sedang berjalan).

Setelah anda mengisi Notification title dan Notification text lalu tekan tombol Next untuk mengisi langkah selanjutnya yaitu mengisi target, islah target sebagai app dan pilih package aplikasi yang sesuai dengan target (nama package) aplikasi yang sedang anda buat.
 
Mengisi Target
Setelah anda mengisi target lalu isi bagian Scheduling dengan Now agar notifikasi muncul saat itu juga.

4) Publish Notifikasi
Setelah anda mengisi semua infromasi notifikasi pada langkah sebelumnya, lalu klik tombol Review maka akan muncul jendela review, lalu klik Publish untuk segera mengirimkan notifikasi ke aplikasi / device dimana aplikasi tersebut di install.

Review Message
5) Hasil Notifikasi
Setelah anda menekan Publish lalu notifikasi akan segera dikirimkan ke aplikasi / device dimana aplikasi diinstall, seperti berikut ini:
Hasil Aplikasi
Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Sunday, December 8, 2019

Memahami dan Menggunakan Widget / Class FutureBuilder pada Flutter

Menggunakan FutureBuilder pada Flutter

Memahami dan Menggunakan Widget / Class FutureBuilder pada Flutter - Salah satu widget yang amat sangat penting dalam framework Flutter adalah FutureBuilder, FutureBuilder ini sendiri menurut saya adalah class yang sangat wajib anda ketahui dan pahami penggunaan dan implementasi dalam sebuah Aplikasi.

Tidak seperti widget Flutter secara umum FutureBuilder dalah widget/class kusus pada Flutter yang mana dirinya dibangun atas dasar callback (return) secara asinkron dari sebuah class Future.

Sehinga dengan demkian FutureBuilder sangat cocok untuk membangun / menggambar widget-widget dimana datanya kita dapatkan secara asinkron baik itu data dari network/internet atau data dari file internal. Jika anda belum memahami pemograman asinkron, ada baiknya anda membaca sekilas tentang pemrograman asinkron (futures, async, await) sebagai dasar untuk memahami FutureBuilder pada Flutter.

Kalau saya ceritakan secara garis besarnya, pengertian asinkron dalam pemrograman adalah eksekusi baris code yang tertunda hasilnya, dimana hasil eksekusi dapat terjadi sewaktu-waktu sehingga baris kode selanjutnya (yang sejajar) juga terseksekusi tanpa menunggu hasil eksekusi kode sebelumnya.

Jika anda sudah familiar dengan konsep multithreading dalam pemrograman, cara kerja dari kedua hanya hampir sama. Untuk itu jika anda masih bingung dengan praktik widget FutureBuilder, anda perlu sedikit memabca terkait pemrograman asinkron pada Dart sebagai bahasa pemrograman famework Flutter terebih dahulu.

Kapan FutureBuilder digunakan?

Pada dasarnya, tidak ada yang membatasi kapan anda akan mengimplementasikann widget FutureBuilder pada aplikasi Flutter anda. Namun yang perlu anda ketahui adalah bagaimana cara widget FutureBuilder bekerja, supaya anda paham dan dapat mengimplementasikan dengan tepat, dimana saja titik-titik yang perlu anda gunakan FutureBuilder pada projek Flutter anda.

Yang peru saya ingatkan adalah, pada kasus sesungguhnya kebanyakan developer Flutter akan menggunakan FutureBuilder untuk tampilan/widget-widget yang membutuhkan dari dari Internet. Hanya saja jika implementasi tidak dilakukan secara tepat, maka penggunaan FutureBuilder akan menyebabkan banyak masalah terutama akan membuang banyak resource internet jika kita tidak memanage/mengatur event-nya dengan benar.

Untuk itu hal yang perlu anda ketahui tentang FutureBuilder adalah, widget ini akan dibangun ulang ketika anda melakuan / memanggil fungsi setState() seperti halnya widget lainya. Hanya saja jika anda kurang berpengalaman dalam menggunakan framework Flutter, penggunaan FutureBuilder tidak anda pisah dengan benar yang bisa mengakibatkan perubahan data pada widget yang non FutureBuilder akan memanggil even build dari widget FutureBuilder pada halaman yang sama sehingga terjadi ketidak efektifan metode disini.

Maka dari itu, memahami widget FutureBuilder termasuk sifat-sifat dari widget ini sangatlah penting, kuncinya adalah dengan banyak-banyak latihan agar penggunaan widget FutureBuilder pada apliaksi anda menjadi efektif.

Pada tutorial kali ini, saya hanya sedikit membahas cara menggunakan FutureBuilder dan implementasi sesungguhnya dalam sebuah kode pada framework Flutter.

Kerangka kode widget FutureBuilder

Untuk lebih memahami seperti apda widget FutureBuilder, silahkan perhatikan contoh kode FutureBuilder berikut keterangan komponen-komponen penting didalamnya :
Struktur Kode FutureBuilder
  1. Nilai kembalian dari FutureBuilder adalah sebuah Widget sehingga jika kita ingin membuat fungsi nya, nilai yang harus dikemblaikan adalah class Widget.
  2. FutureBuilder secara umum memiliki type kembalian data yang juga sesuai pada nilai kembalian pda parameter future, jika pada contoh di atas nilai kembalian pada parameter future berupa  Future sehingga FutureBuilder nya harus berupa FutureBuilder, dimana String adaah tipe data yang dikembalikan dari fungsi asinkron Future.
  3. Parameter future digunakan untuk mendefinisikan class Future yang memiliki nilai dangan type data yang sama.
  4. Parameter builder adalah yang akan dipangil setelah fungsi Future selesai, dimana terdapat context dan snapshot untuk mengetahui progress  dari fungsi Future yang kita definisikan.

Membuat Projek Flutter contoh FutureBuilder

1. Buatlah sebuah projek Fluttermelalui Visual Studio Code / Android Studio sesuai kesukaan anda.
2. Tambahkan package http: ^0.12.0+1 pada file pubspec.yaml.
3. Tulislah kode berikut pada file main.dart anda:

Keterangan Kode:
Pada kode di atas, kita membuat aplikasi dengan tampilan utama layout Column dengan 2 widget utama yaitu widget FutureBuilder dan dibawahnya terdapat sebuah RaisedButton yang tujuanya adalah untuk reload/refresh data jika ditekan. Button akan memanggil setState() yang juga akan memanggil fungsi build pada widget FutureBuilder di atas nya.

Source Code Projek

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