Belajar Flutter Bagian 1: Persiapan dan Pengenalan Pemrograman Mobile dengan Flutter

Menurut situs resminya, Flutter merupakan framework open-source yang dikembangkan oleh Google untuk membangun antarmuka ( UI/User Interface ) yang dapat mengintegrasikan pengembangan aplikasi Android dan iOS sekaligus dalam satu frame yang sama dengan menggunakan bahasa pemrograman Dart, Saya kutip mentah-mentah dari situs resminya:

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Ada fitur Hot Reload, build mobile apps untuk debug lebih cepat

Dengan menggunakan sistem interpreter dalam proses penerjemahannya lebih cepat untuk melakukan reload dibandingkan menggunakan bahasa pemrograman java dengan android studio karena menggunakan sistem compiler, sehingga saat aplikasi dijalankan harus melakukan compile terlebih dahulu sebelum dapat ditampilkan.

Instalasi Flutter SDK

Flutter SDK tersedia untuk tiga platform: Windows, Linux, dan MacOs. Masuk ke halaman Flutter install

Kemudian pilih sistem operasi yang di gunakan, diartikel ini menggunakan Linux.

• Download paket SDK terbaru dari flutter melalui alamat web ini.
• Ekstrak berkas zip dan tempatkan flutter pada lokasi instalasi yang diinginkan untuk Flutter SDK.

$ cd ~/development
$ tar xf ~/Downloads/flutter_linux_v1.2.1-stable.tar.xz

• Tambahkan Flutter Tools pada PATH anda :

$ export PATH="$PATH:`pwd`/flutter/bin"

Perintah ini menetapkan PATH variabel anda, hanya untuk jendela terminal saat ini. Untuk menambahkan flutter secara permanen ke path anda, Update path.

Flutter Doctor pada Linux

Jalankan perintah berikut untuk melihat apakah ada dependensi yang perlu Anda instal untuk menyelesaikan pengaturan (untuk output verbose, tambahkan -vflag):

$ flutter doctor

Perintah ini akan memeriksa environment Anda dan menampilkan laporan status instalasi Flutter. Periksa output dengan cermat untuk perangkat lunak lain yang mungkin perlu Anda instalasi atau melakukan sesuatu lebih lanjut (ditunjukkan dalam teks tebal).

Sebagai contoh:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/kodetr/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

Bagian berikut menjelaskan cara melakukan instalasi dan menyelesaikan proses pengaturan instalasi Flutter SDK. Setelah memasang dependensi yang hilang, jalankan perintah flutter doctor lagi untuk memverifikasi bahwa Anda telah mengatur semuanya dengan benar.

Instalasi Visual Studio Code

Editor ringan untuk mengkombinasikan baris perintah khususnya aplikasi Flutter dan dilengkapi dukungan debugging. visual code terbaru

Berikut cara install Flutter dan plugin Dart di VSCode :

• Buka VSCode
• Aktifkan Command Line dengan cara pilih View > Command Pallete….
• Ketik Install lalu pilih Extensions: Install Extensions.
• Ketik Flutter pada bidang pencarian Extensions, dan pilih Flutter dalam daftar ekstensi yang tersedia, dan klik tombol Install. (Cara ini juga berlaku ketika kita akan menginstall plugin Dart).
• Klik Reload to Activate untuk memuat ulang VSCode.

Setelah selesai, lakukan validasi plugin Flutter di VSCode dengan cara berikut :

• Aktifkan Command Line dengan cara pilih View > Command Pallete….
• Ketik doctor, lalu pilih Flutter: Run Flutter Doctor.
• Tinjau panel OUTPUT untuk melihat masalah apapun.

Membuat Aplikasi Hello World

• Buka Visual Studio Code
• Aktifkan Command Line dengan cara klik View > Command Pallete….
• Kemudian ketik Flutter lalu pilih Flutter: New Project.
• Masukan nama project (contoh : hello_world) kemudian tekan Enter.
• Buat atau pilih direktori induk untuk folder proyek baru.
• Tunggu beberapa saat sampai VSCode selesai menginstal SDK, dan main.dart. Sudah tampil.

Kode untuk aplikasi hello_world berada di lib/main.dart

Menjalankan Aplikasi dengan Visual Studio Code

Untuk menjalankan Aplikasi aktifkan Command Line dengan cara pilih Debug > Start Debugging atau dapat dilakukan dengan cara menekan F5.

Tunggu hingga aplikasi diluncurkan dan lihat progress dalam tampilan Debug Console, setelah build aplikasi selesai, Tampilan pertama akan seperti gambar di bawah

Membuat Aplikasi Hello Rectangle

Buat project baru dengan nama hello_rectangle kemudian dibagian lib/main.dart masukan source code berikut

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hello Rectangle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Rectangle'),
        ),
        body: HelloRectangle(),
      ),
    ),
  );
}

class HelloRectangle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.greenAccent,
        height: 400.0,
        width: 300.0,
        child: Center(
          child: Text(
            'Hello!',
            style: TextStyle(fontSize: 40.0),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Referensi Belajar

• Dokumentasi Flutter

Kesimpulan

Akhir Kata yang dapat saya sampaikan, dengan membuat aplikasi dengan flutter framework kita bisa mengintegrasikan pengembangan aplikasi Android dan iOS dari satu codebase dengan performa tinggi. Artinya kita hanya perlu mempelajari Flutter untuk membangun aplikasi dengan 2 platform sekaligus dalam satu frame.