Hello World: Belajar Widget

Bismillah.

Pada kesempatan kali ini, kita insyaallah akan mencoba untuk membuat project pertama dengan flutter (yang sekarang bukan lagi test-drive hehe 🤭).

Project ini akan kita bagi menjadi sekitar 4 part. Kode program dari masing-masing part telah diunggah ke github pada repository ini. Hasil akhir program ada di branch master, sedangkan untuk tiap step pembuatan project, bisa kalian periksa pada branch repository.

Hasil Akhir Project

Agar punya gambaran utuh, sebelum memulai projek pertama kita dengan flutter, berikut ini hasil dari aplikasi yang akan kita buat:

Buat Project Baru

Langsung aja, kita buat project flutter baru. Kalian bisa menggunakan vscode mau pun android studio.

Untuk saya pribadi, pada kesempatan kali ini saya akan menggunakan VSCode karena relatif lebih ringan.

Halo Dunia

Pertama-tama kita akan membuat halo dunia dengan kode program yang paling minimal. Langkah-langkahnya:

1. Hapus semua kode pada file main.dart
2. Tulis kode program di bawah (usahakan untuk menulis manual tanpa copas):

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(
       Center(
         child: Text(
           'Halo dunia!',
           textDirection: TextDirection.ltr,
         ),
       )
     );
   }
   

3. Jalankan aplikasi.

Output dari kode program di atas adalah:

Penjelasan Widget

Pada Flutter, (hampir) semua komponen UI adalah widget. Baik komponen yang terlihat seperti teks, tombol, app bar, input teks, dan lain-lain. Pun juga komponen yang tak kasat mata seperti Center, Column, Row, dan lain-lain.

Dalam membuat UI Flutter, kita sebenarnya adalah menyusun kumpulan widget-widget sedemikian rupa sampai berwujud seperti yang kita inginkan. Bahkan kita juga bisa membuat widget kita sendiri yang juga tersusun dari berbagai widget yang lainnya.

Pada kode program di atas, fungsi runApp menerima satu widget yaitu Center. Sehingga widget Center di sini menjadi root atau akar dari semua widget yang lain.

Widget Center dalam kode di atas memiliki satu buah child yaitu Text untuk menampilkan tulisan “Halo Dunia!”.

Menggunakan Widget dari Material Design

Karena kita ngoding Flutter untuk android, maka tampilan yang paling cocok adalah Material design.

Ketika membuat project baru Flutter (dalam kasus saya dengan VSCode), maka material design sudah secara default include dalam project.

Kita bisa langsung memakainya saja.

AppBar

Ok, coba ganti kode program di atas menjadi seperti ini:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Halo Dunia',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Halo Dunia'),
        ),
      )
    )
  );
}

Sekarang setelah kita menggunakan widget MaterialApp sebagai root, dan juga kita definisikan parameter title dan home.appBar.title, penampakan setelah kode di-save adalah sebagai berikut:

Kok kosong?

Iya, soalnya yang baru kita isi hanya parameter home.appBar saja 😁

Body

Untuk mengisi body, kita tambahkan parameter home.body (di bawah komponen home.appBar) dengan teks Apa kabar dunia? seperti di bawah ini:

home: Scaffold(
  ...
  body: Center(
    child: Text(
      'Apa kabar dunia?',
      textDirection: TextDirection.ltr,
    ),
  ),
)

Nah, setelah disave, sekarang hasilnya sudah terasa lebih “android”.

Floating Button

Selain parameter appBar dan body, widget Scaffold juga memiliki parameter floatingButton.

Parameter tersebut gunanya untuk menampilkan tombol floating yang ada di pojok kanan bawah frame aplikasi.

Langsung saja..

Tambahkan atribut atau argumen floatingButton dengan widget dari class FloatingActionButton seperti berikut:

...
home: Scaffold(
  ...
  floatingActionButton: FloatingActionButton(
    tooltip: 'Refresh',
    child: Icon(Icons.refresh),
    onPressed: null,
  ),
)

Save lalu jalankan lagi programnya.

Jika tidak ada error, harusnya aplikasi yang kita kerjakan sekarang memiliki tampilan seperti berikut:

Kode Program Lengkap

Kode program lengkap bisa kalian akses di link berikut:

https://github.com/jagongoding-com/flutter-dasar/blob/01-hello-world/lib/main.dart

Pertemuan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang 2 jenis widget: yaitu widget stateless dan widget stateful. Tentu saja masih dengan melanjutkan project ini.

Jadi, tetep stay tune ya!

Terima kasih banyak.