Dalam 

programming Fluter, kita bisa langsung memprogram dari Android

Studio atau menggunakan Microsoft Visual Studio Code. Virtual device bisa
langsung menggunakan AVD (Android Virtual Device) dan untuk aplikasi IOS, kita bisa
menggunakan XCode. Nah, disini terlihat perbedaannya, bahwa Flutter sudah
bisa multi platform.

Flutter adalah Framework untuk pengembangan aplikasi mobile yang bersifat Open

Source. Flutter di kembangkan oleh Google dan mulai di perkenalkan pada Mei
tahun 2017. Karena Flutter bersifat Open Source, pengembangannya menjadi lebih
cepat. Flutter bisa membuat aplikasi mobile multi platform yang akan
mempermudah pengembang untuk mempublikasikan aplikasinya.

Versi pertama Flutter diberi nama sky yang hanya bisa berjalan di Sistem

Operasi Android. Sebagai Framework, Flutter sendiri ditulis menggunakan
bahasa Dart yang sudah menyediakan fungsi-fungsi atau class dasar untuk
membangun aplikasi mobile.

Dart sendiri adalah bahasa yang sudah mendukung Object Oriented (OOP) dengan

syntax C-Style (Mirip bahasa C) yang dapat di ubah secara opsional
menjadi JavaScript.

1. Widget
Sistem pendesaian pada Flutter menggunakan widget, yang memadukan widget-
widget sederhana menjadi bagian yang lebih kompleks. Flutter memiliki sistem
widget sendiri, yang menjadikan lebih unik dibanding pembangun aplikasi lainnya.
Dengan Flutter, anda bisa membuat desain aplikasi yang berbeda dan stabil di
jalankan pada Android maupun IOS. Hal ini karena Flutter memiliki sistem render
engine sendiri.

Widget pada Flutter memiliki struktur hierarki yang akan mempermudah

pendesaianan aplikasi. Sistem hierarki class ini memperbesar kemungkinan
kombinasi desain secara maksimal. Gambaran hierarki class Flutter adalah seperti
pada gambar di bawah ini.
Stateful Widget
Stateful Widget merupakan widget dinamis dan membutuhkan session.
Pada Flutter, secara umum Stateful Widget menandakan bahwa komponen yang di
tunjuk memiliki property state.

Stateless Widget
Stateless Widget bersifat statik dan tidak perlu menggunakan session. Stateless
Widget bisa berarti bahwa komponen tidak memiliki property state.

2. Hot Reload
Jika anda pernah Membuat Aplikasi dengan Android Studio, saat ada perubahan
biasanya kita akan melakukan build ulang agar tampilan bisa berubah. Berbeda
dengan Flutter, pada proyek Flutter di Android Studio, tersedia tombol hot
reload yang akan merefresh tampilan seketika tanpa harus membuild ulang. Ini
menjadi kelebihan tersendiri bagi pengembang, karena akan mempercepat proses
pembuatan aplikasi.

3. Flutter Studio
Flutter meluncurkan Flutter Studio dalam bentuk web based. Flutter Studio sangat
berguna bagi anda yang ingin belajar Flutter tanpa harus menginstall aplikasi. Anda
hanya tinggal membuka halaman web, dan langsung bisa memodifikasi layout
aplikasi, serta memodifikasi source code. Silahkan mencoba langsung di
halamannya url https://flutterstudio.app/.

Install Flutter Plugin

Sebelum proses instalasi Flutter di lakukan, kita harus menginstall plugin pada
Android Studio dan Microsoft Visual Studio Code. Silahkan ikuti langkah-langkah di
bawah ini untuk melakukan penginstallan plugin.

Android Studio
Buka apikasi Android Studio anda. Pada saat start screen, klik Configure, lalu
pilih Plugin.
Configure Android Studio

Pada kolom Search, ketikan keyword “flutter” lalu tekan enter. Setelah muncul
plugin Flutter, klik Install. Tunggu hingga selesai. Setelah selesai, restart Android Studio
Anda.
Install Plugin Flutter Android Studio

Membuat Aplikasi Pertama dengan

Flutter

Flutter dengan Android Studio

Buka aplikasi Android Studio anda. Karena sebelumnya kita sudah menginstall
plugin Flutter, pada Start Screen Android Studio akan muncul pilihan baru
yaitu Start a New Flutter Project. Pilih pada tombol tersebut untuk memulai
proyek Flutter baru.
Pilih Tipe Project
Selanjutnya akan tampil jendela baru berupa pilihan aplikasi. Pilih pada Flutter
Aplication lalu klik tombl Next.

Konfigurasi Aplikasi
Jendela yang akan tampil selanjutnya adalah jendela konfigurasi Aplikasi. Isi aplikasi
sesuai yang anda inginkan. Contohnya, seperti pada gambar di bawah ini.
Konfigurasi Aplikasi Flutter

Untuk Flutter SDK Path, isi sesuai pada saat kita mendownload Flutter. Pada
Tutorial Flutter saat instalasi diatas, isi path sesuai Sistem Operasi yang anda
gunakan. Detailnya sebagai berikut.

 Windows : C:\src\flutter\flutter
 Mac OS : ~/development/flutter
 Linux : ~/development/flutter

Khusus untuk Mac OS dan Linux, jika terdapat error direktori SDK tidak ditemukan,
gunakan full path. Caranya bisa menggunakan perintah berikut.
which flutter

Contoh jika hasilnya seperti di bawah ini.

/Users/away/development/flutter/bin/flutter

Maka, isi Flutter SDK Path dengan /Users/away/development/flutter. Biasanya

pada MacOS tidak bisa menggunakan path home dengan tanda ~.

Untuk sdk flutter bisa didownload di sini:

https://flutter.dev/docs/get-started/install/windows

Setting Package Name

Setelah selesai pengisian konfigurasi project, tekan tombol Next. Jendela
selanjutnya yang akan muncul adalah jendela package name. Coba isi misalnya
dengan coba.com seperti pada gambar di bawah ini. Setelah selesai, klik pada
tombol Finish.
Menjalankan Program
Setelah selesai, akan tampil jendela utama. File yang pertama kali di buka adalah
file main.dart. Kita akan coba menjalankan program dengan AVD. Atau anda bisa
mengkoneksikan mobile phone anda dengan perangkat USB. Untuk menggunakan
AVD, aktifkan AVD dengan menekan tombol AVD Manager. Lalu, jalankan salah
satu simulator pilihan anda.

Pada simulator, coba tekan tombol + (plus) di kanan bawah, dan lihat yang terjadi
pada angka. Ini terjadi karena kode class pada loop saat menekan tombol.
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
Kalau kita lihat kode diatas, terlihat sangat mudah di baca. Ini karena Flutter
menggunakan bahasa Dart yang C-Style.

Memodifikasi Kode Aplikasi

Selanjutnya, kita akan coba memodifikasi kode. Kita lakukan hal yang paling dasar
yaitu merubah text Title dan merubah warna tema Aplikasi. Coba lakukan
perubahan pada baris 21 dan 23.

primarySwatch: Colors.blue,
menjadi
primarySwatch: Colors.green,
dan
home: MyHomePage(title: 'Flutter Demo Home Page')
menjadi
home: MyHomePage(title: 'Aplikasi Pertamaku')

Coba simpan proyek dengan menekan tombol CTRL+S. Perhatikan pada emulator atau
device Android anda. Setelah anda menyimpan perubahan, pada layar simulator akan
langsung berubah menjadi update terbaru. Tanpa melakukan build ulang sama sekali.
Inilah hebatnya Flutter dengan fitur hot reload.