Sunday, February 23, 2020

Membuat Pencarian List dengan Highlight Text pada Flutter

Membuat Search dengan Highligh Text
Membuat Search dengan Highlight Text pada Flutter - Dalam pembuatan aplikasi mobile, salah satu fitur yang paling umum ditemui dalam aplikasi mobile adalah pencarian list atau data. Pencarian data sangat penting terutama pada form dengan daftar data yang sangat banyak yang biasa nya kita tampilkan dalam sebuah list.
hasil aplikasi
Pada artikel-artikel dan contoh source code sebelumnya, saya sudah membahas dan memberikan contoh pencarian sederhana diserta dengan CRUD. Untuk meningkatkan kualits dan user experience pada pencarian list yang kita tampilkan pada pengguna, kita bisa menambahkan highlight text yang sesuai dengan kata pencarian yang di-input oleh pengguna.


Dengan penambahan highlight pada text yang cocok dengan input yang dimasukan oleh pengguna, tentu saja akan meningkatkan user experience aplikasi yang kita buat.

Cara Membuat Highlight?

Pada pembuatan pencarian dengan tambahan fitur highlight pada artikel ini, saya menggunakan widget RichText yang mendukung style text yang sangat beragam pada widget tersebut dengan memasukan widget anak-anak nya berupa TextSpan dengan style tertentu. Prinsip pembuatan highlight text pada pencarian yang saya buat adalah sebagai berikut:
  • Menentukan item dan dijadikan sebagai variabel utama (misal: Makanan Manusia).
  • Jika pengguna memasukan kata pencarian, variabel utama akan di pecah (split) dengan kata pencarian tersebut.
  • Pecahan dari variabel utama menjadi sebuah Array String.
  • Array String disusun kembali melalui TextSpan, dan text dari input pencarian akan disisipkan diantara element Array.
  • Kusus untuk text yang cocok dengan input dari pencarian pengguna akan diberikan latar belakang kuning supaya terlihat berbeda (highlight).
Nah, agar sobat eduprog lebih bisa memahami cara pembuatan pencarian list dengan tambahan fitur highlight text, sobat eduprog bisa melihat dan mendownload source code lengkap implementasi tersebut pada Flutter.


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

Saturday, February 22, 2020

Cara Mengambil Data Dari Popup Dialog pada Flutter

Mengambil Nilai Dari Popup Dialog
Cara Mengambil atau Mengembalikan Data Dari Popup Dialog Pada Flutter - Dalam membuat aplikasi moilde dengan Flutter, tidak jarang kita menampilkan popup dialog untuk menampilkan daftar pilihan yang cukup banyak. Daftar pilihan yang kita tampilkan dalam bentuk popup dialog tersebut, harus kita tangkap atau dikembalikan nilainya ketika user memilih salah satu daftar pilihan yang kita tampilkan.
Hasil Aplikasi
Selain mengembalikan nilai yang dipilih oleh pengguna dari popup dialog, kita juga harus dapat menentukan jika pengguna tidak memilih satu diantara daftar yang ada atau menutup dialog. Karena hal ini terkait tindakan atau proses yang akan kita jalankan pada halaman dimana popup dialog itu dipanggil. Untuk itu kita perlu tahu bagaimana cara menampilkan popup dialog untuk menampilkan daftar serta mengambil nilai dari daftar yang dipilih oleh pengguna pada popup dialog tersebut.

Pada prinsipnya, untuk menampilkan dialog pada Flutter, kita bisa menggunakan method/fungsi showDialog dan menempatkan widget pada field builder dan mengisi context nya. Fungsi ini mengembalikan tipe Future yang bisa kita gunakan untuk mengembalikan nilai tertentu, Adapun struktur dari fungsi showDialog adalah sebagai berikut ini:
showDialog(
    context: context,
    builder: (BuildContext context){
      return MyWidget();
    }
);

Fungsi tersebut mengembalikan Future dengan dengan tipe tertentu. Misalnya kita akan mengambang nilai dengan tipe String, untuk menampung hasil pilihan pengguna pada popup dialog yang muncul. Sehingga kita bisa menulis fungsi wrapper nya sebagai berikut:
Future _showMyDialog(){
  return showDialog(
      context: context,
      builder: (BuildContext context){
        return MyWidget();
      }
  );
}

Dengan wrapper di atas, kita dapat mengggunakan fungsi Navigator.pop saat menutup dialog dan mengisi variable kembalian parameter keduanya seperti berikut ini:
Navigator.pop(context, "dataku");
Dengan kode di atas, nilai dengan tipe String yang dikembalikan melalui Future adalah "dataku", dan untuk mengetahui bahwa tidak ada data yang dipilih oleh pengguna atau pengguna menekan tombol close/cancel, maka kita bisa memanggil fungsi Navigator.pop tanpa parameter ke-2 seperti berikut ini:
Navigator.pop(context);

Nah, agar sobat eduprog tidak bingung dalam memahami cara mengambil data dari popup dialog pada Flutter, untuk itu saya buatkan contoh real dalam bentuk source code aplikasi dengan studi kasus aplikasi untuk memilih daftar menu makanan dengan menampilkan popup dialog.

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

Monday, February 17, 2020

Implementasi RTL dan Membuat Teks Arabic pada Flutter

Implementasi RTL dan Teks Arabic Flutter
Implementasi RTL dan Membuat Teks Arabic pada Flutter -  Sebagai programmer yang hidup, tinggal, dan mencari nafkah di Indonesia mungkin kita kurang familiar dengan istilah RTL atau kependekan dari Right To Left. RTL atau Right To Left (Kanan ke Kiri) adalah arah penulisan dari kanan ke kiri. Dimana, pada umumnya di Indonesia kita mengenal arah tulisan LTR (Left to Right) dan sangat terbiasa dengan arah penulisan LTR karena dari dulu kita menganut asas arah penulisan ini.

Hanya saja, dalam membuat aplikasi yang konteks nya lebih luas tentu saja kita harus memahami arah tulisan lain yang juga kita implementasikan pada aplikasi yang kita buat pada konteks-konteks tertentu. Misalnya adalah aplikasi yang melibatkan tulisan-tulisan Arab misalnya Kamus Bahasa Arab, kumpulan Hadits, kumpulan Doa-Doa, dan aplikasi sejenisnya.
Hasil Aplikasi RTL

Jika kita ingin membuat aplikasi-aplikasi yang melibatkan tulisan arabic tersebut, tentu saja kita harus tahu cara penggunaan RTL pada flutter. Karena, input yang kita sediakan untuk orang yang menganut asas LTR dan RTL tentu saja berbeda. Jika kita bisa mengisi input dengan arah Kiri ke Kanan, pengguna penganut asas RTL akan mengisi input dengan arah dari Kanan ke Kiri.

Pada kesempatan kali ini, saya akan memberi contoh pembuatan aplikasi yang melibatkan 2 arah penulisan teks dimana melibatkan 2 tipe abjad yang berbeda yaitu Idonesia dengan Arabic. Karena aplikasi yang kita buat melibatkan 2 tipe penulisan yaitu RTL dan TLR, tentu saja kita tidak bisa mendefinisikan RTL pada aplikasi secara global, dan harus kita implementasikan sesuai bagian-nya masing-masing.

Implementasi RTL pada Flutter?

Ada beberapa cara implementasi RTL pada flutter, pada contoh pembuatan aplikasi yang melibatkan RTL dan teks Arabic kali saya menggunakan widget Directionality yang mempunyai pengaturan textDirection dan akan mempengaruhi arah tulisan semua widget yang berada pada child nya.

Contoh penerapan widget Directionality pada sebuah kode sederhana adap sebagai berikut:

Column(
  children: [
    Directionality(
        textDirection: TextDirection.ltr,
        child: Text("Tulisan Indonesia")
    ),
    Directionality(
        textDirection: TextDirection.rtl,
        child: Text("النساۤء")
    ),
  ],
)
Properti / field yang paling penting dari widget Directionality  di atas adalah textDirection dimana hanya menerima 2 tipe TextDirection.ltr dan TextDirection.tlr. Agar sobat eduprog lebih memahami implementasi RTL pada flutter, berikut adalah contoh source code lengkap untuk menampilkan daftar Ayat dan pencarian Ayat dengan tulisan Indonesia dan Arab.

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


Saturday, February 15, 2020

Membuat Game Matematika Sederhana dengan Flutter

Membuat Game Sederhana dengan Flutter

Membuat Game Matematika Sederhana dengan Flutter - IDE dalam membuat game ini sebenarnya muncul dari permintaan putri pertama saya, yang ingin dibuatkan game oleh bapak nya sendiri. Kebetulan week-end ini lagi kosong projek Freelance, ada kesempatan untuk merealisasikan keinginan putri saya agar bisa menikmati game hasil kodingan ayah nya sendiri.

Tanpa berpikir panjang, game matematika (penambahan) saya pilih untuk mendukung belajar anak saya dalam meningkatkan kemampuan hitungan matematika nya yang nota bene saat ini masih duduk di bangku TK A (Kecil). Game yang saya tulis dalam waktu 5 jam ini memang masih jauh dari kata sempurna dan masih bisa sobat kembangkan sendiri karena source code lengkap pada game ada di link akhir posting ini.

Game ini saya bagi menjadi 3 level, dimana level 1 dibatasi dengan waktu 15 detik setiap soal, level 2 dibatasi waktu 10 detik, dan level 3 dibatasi waktu 5 detik, Selain itu game sederhana ini juga dilengkapi bahasa inggris dari bilangan dan hasil penambahan dibawah angka 20.

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

Thursday, February 13, 2020

Cara Passing Data Antar Halaman Pada Flutter

Passing Data antar Form pada Flutter
Cara Passing Data Antar Form atau Halaman pada Flutter - Dalam membuat aplikasi mobile, terutama dengan framework Flutter biasanya kita akan melibatkan lebih dari satu (banyak) halaman atau form. Jika input yangkita berikan pada user atau pengguna aplikasi terlalu banyak, maka biasanya kita akan membagi menjadi beberapa form atau halaman input, namun form-form yang diinput oleh user tentu saja harus kita jadikan satu datanya sebelum dikirim ke server.
Dalam konteks input aplikasi yang melibatkan banyak form secara terpisah, tentu saja tantanganya adalah bagaimana cara menyatukan data input pada halaman-halaman yang saling terpisha tersebut. Tenju saja, cara untuk menggabungkanya adalah dengan cara passing atau melempar data antar form dengan struktur data yang telah di tentukan.

Cara Melempar Data

Cara passing atau melempar data yang paling mudah dan relevan untuk kita gunakan antar halaman, adalah dengan cara memasukan data melalui constructor class dari masing-masing class halaman (StatefullWidget), sehingga kita perlu mendefinisikan field pada constructor class pada masing-masing halaman.

Misal nya kita menentukan field dengan nama data pada masing-masing class, sehingga contoh penulisan class (StatefullWidget) nya adalah sebagai berikut:
class Form1Page extends StatefulWidget {
  Form1Page({Key key, this.data}) : super(key: key);
  DataUser data;
  @override  _Form1PageState createState() => _Form1PageState();
}

class _Form1PageState extends State {
  
  @override  Widget build(BuildContext context) {
    return Scaffold(...);
  }
}

Pada pembuatan class (Form1Page) di atas, kita mendefinisikan field data dengan tipe data class UserData dimana class ini memiliki struktur yang telah kita tentukan. Dengan demikian variable data, dapat diakses pada class (_Form1PageState) dengaan cara memanggil widget.data,

Adapun contoh pemanggilan halaman dengan passing data seperti di atas adalah sebagai berikut:
widget.data.nama = "anu";
Navigator.push(
  context,
  MaterialPageRoute(
      builder: (context) => Form1Page(
        data: widget.data,
      )
  ),
);

Sehingga pada form akhir, kita mendapatkan data final dari struktur class DataUser, dan bisa kita tampilkan atau kirim data-data dari inputan form-form sebelum nya ke server.

Untuk lebih memperjelas cara passing data antar halaman atau antar form pada Flutter, berikut adalah source code lengkap nya:

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

Tuesday, February 11, 2020

Membuat Aplikasi Realtime Dengan Flutter + Websocket

Aplikasi Realtime dengan Flutter + Websocket
Membuat Aplikasi Mobile Realtime Data Dengan Flutter dan Websocket -  Sebagai seorang programmer atau developer aplikasi, terutama aplikasi mobile menguasai berbagai macam teknik, metode, dan teknologi API adalah salah satu hal yang wajib dilakukan. Terutama di era aplikasi modern saat ini, dimana pertukaran data sangatlah cepat sehingga pembuat aplikasi harus besaing dalam membuat aplikasi yang efektif, efisien, dan cepat.
Hasil Aplikasi
Dalam pembuatan aplikasi sendiri, baik aplikasi desktop, web, maupun mobile metode atau teknologi yang kita  terapkan hharus menyesuaikan dengan kebutuhan. Artinya, kita tidak bisa memukul sama rata teknologi dan memutuskan penggunaan teknologi secara sepihak tanpa mempertimbangkan aspek-aspek lainya.

Misal nya dalam konteks pembuatan aplikasi CRUD sederhana, yang mana kebutuhuan update perubahan data yang tidak terlalu tinggi kita cukup menggunakan methode REST API baik mealui HTTP POST atau HTTP GET sesuai selera kita masing-masing. Namun, berbeda hal nya dengan pembuatan aplikasi yang membutuhkan pergerakan atau perubahan data secara cepat (atau bisa dikatakan realtime) seperti aplikasi Trading (Forex, Saham, ataupun Cryptocurrency) tentu nya REST API tidak bisa diterapkan mengingat REST API bersifat single-directional sehingga tidak efektif untuk jenis aplikasi realtime.

Untuk itu, dalam pembuatan aplikasi yang membutuhkan perubahan data secara realtime kita perlu mengimplmentasikan teknologi lainya (API) yang bersifat bidirectional communication salah satunya yaitu Webssocket.

Apa itu Websocket?


Websocket adalah protokol komunikasi komputer, yang menyediakan saluran komunikasi dupleks penuh melalui koneksi TCP tunggal. Protokol WebSocket distandarisasi oleh IETF sebagai RFC 6455 pada 2011, dan API Websocket di Web IDL sedang distandarisasi oleh W3C.

Websocket sendiri sudha menjadi protokol standar internasional untuk pertukaran data realtime, sehingga banyak penyedia API menggunakan protokol Websocket yang siap kita gunakan. Hanya saja pada pembuatan aplikasi realtime yang sesungguhnya, kita perlu mengembangkan atau membuat server Websocket kita sendiri.

Pada artikel kali ini saya akan menunjukan konsep dan contoh source code lengkap serta penjelasan bagian penting dari source code pembuatan aplikasi realtime dengan Flutter dan Websocket. Pada contoh kasus pembuatan aplikasi realtime kali ini saya memanfaatkan API public (data cryptocurrency) dengan protokol Websocket yang disediakan oleh BitMex dan bisa kita konsumsi secara gratis.

Pada Flutter sendiri terdapat beberapa package bantuan untuk menggunakan protokol Websocket dan terhubung ke websocket server, dimana saya memakai package web_socket_channel, dengan package ini kita bisa mengakses API bitmex dengan kode utama sebagai berikut:

var channel = IOWebSocketChannel.connect('wss://www.bitmex.com/realtime');
channel.sink.add('{"op": "subscribe", "args": ["trade:XBTUSD"]}');
channel.stream.listen((message) {
  var jResponse = json.decode(message);
  print(jResponse);
  //. lanjut parsing data dan gambar ke widget});

Penjelasan kode di atas adalah, kita melakukan koneksi Secure Websocket (wss) ke url API realtime bitmex. Setelah berhasil, lalu kita kirimkan subscribe data untuk mendapatkan data trade dengan kode cryptocurrency XBT (Bitcoin) dan dalam harga USD (Dollar AS).

Lalu setiap data yang dikirimkan oleh server akan diterima kedaam callback listen, dan data dalam bentuk String kita taruh dalam variabel message. Dengan demikian langkah selanjutnya adalah parsing message sesuai format data API dan menggambarnya ke dalam widget kita.

Jika sobat eduprog masih pemula atau bahkan, pertama kali ini mengimplementasikan teknologi Webscoket mungkin awalnya sobat agak bingung karena konsep dari Websocket ini adalah asinkron, sehingga sobat harus memperdalam pemahaman/kemampuan terhadap metode pemrograman yang asinkron (permintaan data dan hasil dari permintaan data terpisah).
Agar sobat bsia memahami lebih jauh implementasi, saya sudah membuatkan aplikasi sederhana dengan soource code lengkap untuk menampilkan data trade cryptocurrency dari BitMex.

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

Monday, February 10, 2020

Membuat Splash Screen Beranimasi dengan Flutter

Membuat Flash Screen Beranimasi Flutter
Cara Membuat Splash Screen Beranimasi dengan Flutter - Dalam membuat aplikasi berbasis aplikasi smartphone (mobile app), splash screen adalah hal yang rasanya tidak boleh ketinggalan. Karena fungsi splash screen ini sendiri sebenarnya bermacam-macam, walaupun terkesan hal sepele splash screen yang muncul pertama aplikasi dimulai nampaknya sangat penting.

Secara umum, splash screen sangat penting sekali untuk memberi kesan animatif terhadap pengguna aplikasi agar tidak terksan kaku saat aplikasi yang kita buat sedang memuat atau mempersiapkan data. Karena secara umum, aplikasi mobile yang kita buat biasanya harus memuat data-data awal terlebih dahulu sebelum aplikasi benar-benar menampilkan halaman utama atau halaman login.

Dengan demikian, memahami cara pembuatan flash screen pada aplikasi yang kita buat dengan Flutter adalah hal yang sangat penting. Untuk itu, mari kita pelajari bagaimana cara membuat splash screen yang menarik dengan tambahan animasi serta waktu muncul splash screen yang bisa kita atur sendiri. Pada pembuatan kode splash screen kali ini, kita membuat dengan kode dart pada framework Flutter langsung tanpa melibatkan kode spsifik masing-masing OS, sehingga kode splash screen yang kita buat kali ini berlaku untuk multiplatform.

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