Flutter — Halo Dunia

Pada kesempatan kali ini kita akan belajar bagaimana membuat project Flutter dengan Android Studio dan menampilkan pesan Halo Dunia ke layar.

Membuat Project

Pastikan kita sudah membuka Android Studio. Pada jendela Welcome to Android Studio, klik Start a New Flutter Project:

Welcome to Android Studio

Pada jendela selanjutnya, pilih Flutter Application dan klik tombol Next:

Flutter Application

Pada jendela berikut, Project name kita isi dengan aplikasi_halo_dunia, Flutter SDK path kita isi sesuai path dimana kita menyimpan SDK Flutter (dalam hal ini saya isi dengan C:\src\flutter), Project location kita isi sesuai lokasi yang kita inginkan (dalam hal ini saya isi dengan D:\labs) dan Description kita isi apa saja, bebas dan setelah itu klik tombol Next:

Project Initialization

Pada jendela berikut, biarkan saja nilai-nilai di dalamnya default. Klik Finish untuk menyelesaikan pembuatan project:

Package Name

Project aplikasi akan muncul di Android Studio seperti yang ditunjukan pada gambar berikut ini:

Tampilan Flutter Pertama Kali

Sekarang kita bisa menghapus semua isi di dalam file main.dart dan menggantinya dengan kode berikut:

import 'package:flutter/material.dart';
main() => runApp(AplikasiHaloDunia());
class AplikasiHaloDunia extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: Text('Halo Dunia!'),
      )
    );
  }
}

Jika terjadi error, buka file test/test_widget.dart dan cari bagian:

await tester.pumpWidget(MyApp());

Ubah MyApp() menjadi nama class yang sudah kita buat AplikasiHaloDunia():

await tester.pumpWidget(AplikasiHaloDunia());

Kalau kita lihat pada kode di atas, kodingannya seperti bonek matryoshka Rusia. Di dalam boneka ada boneka lagi, di dalam MaterialApp ada Material, di dalam Material ada Text.

Boneka Matryoshka dan Flutter

Dalam konteks bahasa Dart, MaterialApp, Material dan Text merupakan panggilan constructor (constructor call).

Perhatikan pada baris:

Text('Halo Dunia!')

Kode di atas adalah constructor call. Ketika Flutter menjalankan kode tersebut, itu akan membuat objek Text tersebut berisi kalimat Halo Dunia!.

Perhatikan pada baris:

Material(
 child: Text('Halo Dunia!'),
)

Kode di atas juga constructor call. Ketika Flutter menjalankan kode tersebut, itu akan membuat objek Material yang isinya adalah objek Text. Objek Material sebenarnya merupakan bentuk atau shape. Objek tersebut bisa diatur ketinggiannya dari permukaan layar atau bisa dikatakan sebagai Elevation.

Perhatikan pada baris:

MaterialApp(
  home: Material(
    child: Text('Halo Dunia!'),
  )
);

Sama seperti kode sebelumnya yang juga merupakan constructor call. Ketika Flutter menjalankan kode tersebut, itu akan membuat objek MaterialApp dimana screen atau layar awalnya adalah objek Material.

MaterialApp memiliki objek Material dan Material memiliki objek Text.

Menjalankan Aplikasi

Pastikan emulator sudah dijalankan, atau kita bisa menggunakan device dengan bantuan adb. Di sini saya pribadi menggunakan emulator sehingga akan muncul seperti pada gambar berikut:

Android Emulator

Untuk menjalankan aplikasi, cukup tekan tombol segitiga hijau di pojok kanan atas:

Run Flutter

Sehingga muncul tampilan seperti berikut:

Halo Dunia

Tidak perlu kahwatir karena tulisan Halo Dunia ada di pojok kiri atas dan sedikit tertutup. Nanti akan kita perbaiki.