Membuat Aplikasi Hello World Menggunakan Flutter di Visual Studio Code

Di artikel kali ini, kita akan menginstall dan menyiapkan Visual Studio Code (VSCode) untuk koding Flutter, kemudian kita akan membuat aplikasi Hello World menggunakan Flutter. Untuk bisa mengikuti artikel ini, Anda harus menginstall SDK Flutter lebih dulu di laptop. Di artikel2 sebelumnya, saya sudah menulis bagaimana kita bisa menginstall SDK Flutter dengan Android Studio maupun tanpa Android Studio. Oh ya, dalam artikel kali ini kita akan menggunakan OS Windows 10.

Download Visual Studio Code

Baiklah, mari kita mulai. Download VSCode di https://code.visualstudio.com/download . Untuk yang memakai OS (Operating System) Windows, bisa download yang versi Windows. Install seperti Anda menginstall aplikasi2 lain. Tinggal klik Next2 aja 😀

Install Ekstensi Flutter di Visual Studio Code

Setelah VSCode terinstall, kita perlu menginstall ekstensi Flutter supaya kita bisa koding Flutter di VSCode. Buka VSCode, kemudian klik ikon Extensions di kiri tengah. Lalu ketik: flutter . Lebih jelasnya, lihat gambar berikut ini:

Klik di baris Flutter, lalu klik tombol Install warna hijau:

Membuat Project Flutter

Dengan ekstensi Flutter yang barusan kita install saja, kita sudah bisa koding Flutter di VSCode. Mari kita coba. Buka Terminal di VSCode. Caranya, klik View -> Terminal. Seperti gambar berikut ini.

Terminal / Command Line akan terbuka. Kemudian ketik beberapa perintah berikut ini:

mkdir C:\flutterApps

Ini untuk membuat folder flutterApps di drive C: . Folder flutterApps akan menjadi folder untuk semua project Flutter kita ke depannya.

cd C:\flutterApps

Perintah ini untuk masuk ke folder flutterApps melalui command line.

flutter create hello_world_project

Nah.. akhirnya dengan perintah ini, kita membuat project Flutter. Nama project contoh ini adalah hello_world_project. Anda bisa menamakannya sesuka Anda, hanya saja ada aturan penamaannya, yaitu harus menggunakan huruf kecil dan garis bawah (underscore) seperti di contoh.

Setelah perintah flutter create, akan ada banyak baris di command line. Kalau project nya sukses dibikin, maka di command line baris2 terakhirnya seperti berikut ini:

Kalau ada tulisan “All done!” seperti di panah kuning, maka sudah pasti project berhasil dibikin. Dan seperti dijelaskan di panah merah, kode aplikasi kita ada di dalam folder C:\flutterApps\hello_world_project\lib\main.dart.

Membuat Aplikasi Hello World Menggunakan Flutter

Sekarang kita bisa membuka folder hello_world_project tersebut di VSCode. Klik File -> Open Folder… -> lalu buka folder hello_world_project

Setelah folder project dibuka, klik folder lib lalu klik file main.dart.

Kemudian hapus seluruh isi file tersebut, karena kita akan menulis koding dari nol. Supaya kita mengerti bagaimana caranya membuat aplikasi dari nol.

Baris pertama yang kita ketik adalah,

import 'package:flutter/material.dart';

Kemudian kita membuat fungsi utama dart yang menjalankan sebuah aplikasi Flutter. Tambahkan baris berikut ini:

void main() => runApp(AplikasiHelloWorld());

AplikasiHelloWorld adalah aplikasi Flutter, yang harus kita buatkan kodingannya. Buat class AplikasiHelloWorld seperti berikut ini:

class AplikasiHelloWorld extends StatelessWidget {
   //isi class
}

Di kodingan diatas, class AplikasiHelloWorld meng-extend StatelessWidget. Artinya, class AplikasiHelloWorld adalah turunan dari class StatelessWidget. Sehingga kita bisa menggunakan semua fitur yang disediakan oleh class StatelessWidget.

Sampai di sini, class AplikasiHelloWorld masih error, yang ditandakan ada garis bawah keriting warna merah seperti gambar berikut ini.

Kita bisa mendapatkan penjelasan kenapa error, dengan mengarahkan kursor mouse ke bagian yang berwarna merah tersebut.

Secara sederhana, artinya kita perlu membuat fungsi di dalam class AplikasiHelloWorld yang diperlukan supaya kodingan tersebut bisa jalan.

Di kodingan, ganti //isi class dengan kodingan sebagai berikut:

@override
Widget build(BuildContext context) {
   // TODO: implement build
   return null;
}

Ini artinya kita membuat fungsi build untuk membangun aplikasi kita menggunakan Flutter.

Selanjutnya kita akan menampilkan teks bertuliskan Hello World! di aplikasi kita. caranya, ganti // TODO: implement build return null; dengan kodingan berikut ini.

return MaterialApp(
   title: 'Aplikasi Hello World',
   theme: ThemeData(
      primarySwatch: Colors.green,
   ),
   home: Text('Hello World!'),
);

Ini artinya, aplikasi kita menampilkan sebuah Widget MaterialApp dengan parameter title (judul) ‘Aplikasi Hello World’, theme (tema) warna green (hijau), dan home (layar) dengan Widget Text bertuliskan ‘Hello World!’.

Menjalankan Aplikasi Flutter Di Emulator

Kita bisa mencoba menjalankan aplikasi kita. Simpan file main.dart dengan menekan tombol Ctrl+S di VSCode, lalu nyalakan emulator Genymotion atau Emulator bawaan Android Studio (Emulator AVD). Kemudian kembali ke VSCode, lalu tekan tombol Ctrl+F5. Setelah menunggu beberapa saat, maka emulator akan menampilkan aplikasi kita seperti ini:

Membuat Tampilan Menjadi Lebih Baik Dengan Widget Scaffold

Kalau kita perhatikan, maka dari beberapa parameter tadi yang kelihatan di emulator hanyalah teks Hello World! saja. Parameter lainnya seperti theme & title tidak berpengaruh. Supaya parameter theme bisa berpengaruh, kita perlu mengisi parameter home dengan Widget Scaffold. Jadi kita perlu mengganti

home: Text('Hello World!'),

dengan kodingan berikut ini:

      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),

Ini artinya, kita mengisi parameter home (layar) dengan Widget Scaffold, yang mempunyai appBar (bar aplikasi) yang bertuliskan ‘Hello World App’. Widget Scaffold juga mempunyai body (konten) yang di contoh ini kita isi dengan Widget Text bertuliskan ‘Hello World!’.

Kalau tadi Anda belum keluar dari aplikasi di emulator & belum menekan Ctrl+S, kita bisa memanfaatkan fitur hot reload supaya apa yang kita tulis barusan dapat langsung tampil di emulator, cukup dengan menekan Ctrl+S lagi. Hasilnya akan seperti ini:

Masih ingat dengan theme green (hijau) yang kita set di MaterialApp tadi? Theme tersebut membuat tulisan Hello World App yang di bagian atas menjadi berlatar belakang hijau seperti di gambar barusan.

Kodingan Lengkap Aplikasi Hello World Flutter

Berikut ini kodingan lengkap aplikasi Hello World Flutter yang sudah kita buat:

import 'package:flutter/material.dart';

void main() => runApp(AplikasiHelloWorld());

class AplikasiHelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Hello World',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Menginstall Ekstensi Prettier

Sampai di sini, kodingan kita sudah ada lebih dari 20 baris. Pastinya Anda sudah merasa cukup kesulitan mengatur indentasi, kurung buka kurung tutup dan format lainnya di kodingan, kan?

Nah, supaya kita lebih mudah memformat kodingan, kita perlu menginstall ekstensi Prettier di VSCode. Caranya, klik ikon Extensions di kiri tengah, lalu ketik: prettier . Klik “Prettier – Code Formatter”, lalu klik Install untuk menginstall ekstensi tersebut ke VSCode.

Mengaktifkan formatOnSave

Setelah kita install ekstensi tersebut, belum ada pengaruh apa2 yang terlihat di kodingan kita. Supaya terasa pengaruhnya, kita perlu mengaktifkan settingan formatOnSave di VSCode supaya kodingan kita otomatis diformat ketika kita menyimpan file di VSCode. Ya, ketika kita menekan Ctrl+S.

Untuk mengaktifkan formatOnSave, Klik File -> Preferences -> Settings -> ketik: formatOnsave -> lalu centang seperti pada gambar berikut.

Kita bisa mencoba membuat kodingan kita menjadi berantakan, contohnya seperti di gambar berikut ini:

Berantakan sekali.. saya sendiri bisa stress kalau harus memformat kodingan di atas, apalagi kalau sedang dikejar deadline he3.. . Tapi dengan ekstensi Prettier & settingan formatOnSave, maka kita cukup menekan Ctrl+S, maka kita menyimpan sekaligus memformat file tersebut. Bisa dicoba, jika sekarang kita menekan Ctrl+S, format kodingan kita akan menjadi bagus:

Terakhir, kita bisa menyimpulkan bagaimana kodingan kita ditampilkan di emulator seperti ini:

Panah merah: tampilan warna hijau dari theme yang kita set dengan green

Panah kuning: tampilan appBar, dengan teks sesuai yang kita koding di aplikasi

Panah biru: layar utama aplikasi, yaitu body Widget Scaffold, adalah teks dengan tulisan Hello World! .

Sampai di sini artikel kita kali ini, semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ