Mengenal Framework Flutter

September 16, 2020

Mengenal Framework Flutter

Flutter telah booming sejak pertengahan 2019. Top apps di Play Store, dari Google Ads hingga Alibaba, telah menerapkannya. Nah apa itu Flutter ? Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS. Flutter menggunakan bahasa Dart, sebuah bahasa pemrograman yang dikembangkan oleh Google.

Awalnya, Flutter dikenal dengan nama Sky. Flutter pertama kali diperkenalkan pada acara Dart Developer Summit 2015. Pada tanggal 4 Desember 2018, Google merilis Flutter 1.0 di acara Flutter Live Event. Hal ini juga menandai rilisnya versi stabil pertama dari Flutter. Selanjutnya Flutter 1.12 dirilis di acara Flutter Interact yang diadakan pada tanggal 11 Desember 2019. Pada versi ini, versi beta Flutter untuk web juga diperkenalkan ke publik.

Banyak perusahaan besar dunia yang telah mengadopsi Flutter untuk mengembangkan aplikasi mereka. Sebut saja Google, Alibaba Group, dan Grab.

Sumber: dicoding.com

Kelebihan Flutter

1. Cross Platform

Flutter mendukung cross platform alias dapat dijalankan di beberapa platform yang berbeda. Dengan menggunakan Flutter, kita dapat membuat aplikasi Android dan iOS sekaligus. Selain mobile, kita juga dapat membuat aplikasi web dan desktop. Tentunya hal ini akan menghemat waktu. Kita tidak perlu mempelajari bahasa native yang digunakan di masing-masing platform.

2. Fast Development (Hot Reload)

Flutter memiliki sebuah fitur bernama hot reload. Dengan fitur ini, proses pengembangan aplikasi dapat berjalan lebih cepat dan mudah.. Setelah melakukan perubahan pada kode program, cukup tekan hot reload. Aplikasi akan diperbarui dalam kurun waktu kurang dari 1 detik. Sangat cepat bukan?

Hot reload bekerja dengan cara menginjeksi kode program yang mengalami perubahan ke dalam Dart Virtual Machine. Setelah virtual machine memperbarui tiap kelas dengan kode program versi terbaru, maka framework Flutter secara otomatis membangun kembali susunan komponen widget sehingga kita dapat dengan cepat melihat perubahan yang terjadi.

3. Memiliki UI yang Cantik

Flutter dirancang untuk mempermudah developer dalam membangun tampilan user interface. Keseluruhan UI pada Flutter dibangun menggunakan widget. Sebagai contoh, jika kita menambahkan sebuah text field, text field tersebut adalah widget. Button dan Image juga merupakan widget. Bahkan untuk mengatur posisi komponen menjadi rata tengah, kita menggunakan center widget. Kita dapat melakukan kustomisasi pada tiap widget.

Widget akan menggambarkan seperti apa tampilan yang akan dibuat berdasarkan konfigurasi dan state yang ada. Terdapat 2 set widget, Material Design (Android) dan Cupertino (iOS).Teman-teman dapat melihat daftar lengkap widget yang tersedia di tautan ini. Selain itu, di tiap pekan, tim Flutter juga membahas Widget of the Week yang dapat teman-teman saksikan lewat channel Youtube Flutter.

Material Design dan Widget

Dari benefit-benefit yang disebutkan di atas kita menemukan beberapa istilah yang mungkin asing bagi sebagian orang. Istilah tersebut yaitu :

- Material Design

Sebuah bahasa visual yang menggabungkan prinsip-prinsip desain yang baik dengan teknologi dan sains modern. Material design sendiri sebetulnya terinspirasi dari dunia nyata, dalam desain tersebut biasanya ada tekstur, shadow, cahaya, dan lain sebagainya.

- Widget

Di dalam dunia nyata widget bisa kita analogikan sebagai benda. Supaya kita bisa memehamai widget lebih jelas coba perhatikan contoh di bawah ini :

Reno memiliki secangkir kopi, nah secangkir kopi di sini bisa dikatakan benda. Dari secangkir kopi sebetulnya ada 3 benda yang bisa kita temukan yaitu :

ü Cangkir

ü Kopi

ü Air

Ketika benda-benda tersebut di atas kita gabungkan maka akan jadi secangkir kopi.

Kalau kita analogikan dengan widget, pada sebuah aplikasi yang dibangun dengan flutter memiliki beberapa widget.

Perhatikan aplikasi hello world di atas. Ada 2 widget yang digunakan pada aplikasi tersebut yaitu :

· Welcome to flutter yang merupakan app bar (widget)

· Hello World yang merupakan text (widget)

Step untuk Memulai Projek Flutter

Ada beberapa peralatan yang harus kita install untuk memulai belajar dan membuat aplikasi dengan Flutter:

1. Java Development Kit (JDK);

2. Android Studio;

3. Android SDK;

4. Flutter SDK;

5. Teks Editor (atau bisa juga pakai Android Studio).

Lah, kenapa kok harus install JDK dan Android Studio?

Peralatan esensial yang paling dibutuhkan sebenarnya Flutter SDK, Android SDK, dan Teks Editor saja. Namun, karena kita butuh Android Studio untuk menginstal Android SDK, maka kita juga harus install Java JDK donk!

Struktur pada Projek Flutter

Ini adalah struktur direktori project Flutter:

Penjelasan:

· android berisi source code untuk aplikasi android;

· ios berisi source code untuk aplikasi iOS;

· lib berisi source code Dart, di sini kita akan menulis kode aplikasi;

· test berisi source code Dart untuk testing aplikasi;

· .gitignore adalah file Git;

· .metadata merupakan file yang berisi metadata project yang di-generate otomatis;

· .packages merupakan file yang berisi alamat path package yang dibuat oleh pub;

· flutter_app.iml merupakan file XML yang berisi keterangan project;

· pubspec.lock merupakan file yang berisi versi-versi library atau package. File ini dibuat oleh pub. Fungsinya untuk mengunci versi package.

· pubspec.yaml merupakan file yang berisi informasi tentang project dan libraray yang dibutuhkan;

· README.md merupakan file markdown yang berisi penjelasan tentang source code.

Struktur Dasar Kode Aplikasi

Saat kamu membuat project baru, kode program awal yang akan kita dapatkan pada main.dart akan seperti ini:

import 'package:flutter/material.dart';

void main() {

runApp(HomePage());

}

class HomePage extends StatelessWidget {

build(context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

backgroundColor: Colors.teal,

leading: Icon(Icons.home),

title: Text('Aplikasi Flutter Petanikode')

)

);

}

Struktur kode di atas sebenarnya terdiri dari tiga bagian:

1. Bagian Import

Bagian import adalah tempat kita mendeklarasikan atau mengimpor library yang dibutuhkan pada aplikasi.

2. Bagian Main

Bagian main adalah fungsi utama dari aplikasi yang akan menjadi entri point. Fungsi ini akan dieksekusi pertama kali saat aplikasi dibuka.

3. Bagian Widget

Bagian widget adalah tempat kita membuat widget. Aplikasi Flutter sebenarnya terdiri dari susunan widget. Widget bisa kita bilang elemen-elemen seperti Tombol, Teks, Layaout, Image, dan sebagainya.