Flutter Tutorial : Membuat Hello World

Flutter merupakan sebuah framework untuk membuat aplikasi Native baik Android ataupun iOS menggunakan bahasa pemrograman Dart dari Google. Di tutorial ini, akan ditunjukkan bagaimana cara membuat aplikasi Hello World. Langkah-langkah untuk menginstall IDE seperti Android Studio atau VS Code, menginstall package flutter, menginstall AVD dan mendownload Flutter SDK tidak dijelaskan di tutorial ini. Tutorial ini mengasumsikan semua environment sudah diinstall di komputer. Disini, saya menggunakan Android Studio untuk Mac OS.

Membuat Text Hello World

Ketika kita membuat proyek flutter baru di Android Studio, file main.dart sudah terisi kode yang jika dijalankan akan menampilkan aplikasi Flutter Demo Home Page yang akan menghitung berapa kali kita menekan tombol.

Kita akan menghapus aplikasi ini supaya mengerti proses dari awal. Hapus saja seluruh tulisan pada main.dart, dan gantikan dengan kode berikut, yang akan menampilkan tulisan Hello World di layar bagian kiri atas menggunakan widget Text : 

Flutter Hello World 1

Membuat Tulisan Hello World Berada di Tengah Layar

Tulisan yang berada di kiri atas tidak terlihat, karena itu kita akan membuatnya berada di tengah layar, menggunakan widget Center, dan letakkan Text widget di bagian child dari Center widget :

Sekarang tulisan sudah berada di tengah layar.

Flutter Hello World 2

MaterialApp dan Material Widget

Hampir semua di Flutter adalah widget. Setelah kita menggunakan Text dan Center Widget, sekarang kita akan menggunakan MaterialApp dan Material widget untuk memberi warna pada background aplikasi kita. MaterialApp mempunyai title dan home. Pada home, terdapat Material widget yang berisi widget Center yang kita buat sebelumnya :

Aplikasi Flutter Hello World

Widget TextStyle

Kita akan menggunakan TextStyle widget untuk mengubah ukuran tulisan serta warnanya.

Flutter Application Hello World 2

Scaffold Widget

Widget Scaffold sangat penting, widget ini memungkinkan kita untuk memberikan AppBar pada Aplikasi yang kita buat. Scaffold widget mempunyai beberapa property, diantaranya appBar dan juga body. 

Aplikasi Flutter Hello World 3

Organizing Files pada Aplikasi Flutter

Kita akan mengorganisir file dari yang sebelumnya kita bikin supaya kode tersusun dengan rapi. Kita akan membuat Class yang terpisah yang meng-extends StatelessWidget. StatelessWidget digunakan apabila Class tidak akan berubah – ubah di masa depan.

Buat Class baru bernama AplikasiFlutter (atau apa saja) yang meng-extends StatelessWidget. Pindahkan parameter Material widget pada runApp kepada class yang baru kita buat ini :

debugShowCheckedModeBanner: false adalah kode untuk menghilangkan tulisan debug mode pada kanan atas layar.

Memisahkan File Dart ke Dalam Beberapa Screen

Supaya kode lebih efisien, kita akan membagi screen ke dalam beberapa dart file. Pertama tama, buat package baru di dalam lib folder, namakan folder tersebut app_screens. Di dalam folder yang baru kita buat ini, buat Dart file baru bernama first_screen.dart. Ubah main.dart dan pindahkan Material widget ke dalam first_screen.dart ini. Panggil class FirstScreen ke dalam main.dart. Jangan lupa untuk mengimport class tersebut di baris bagian atas.

main.dart

first_screen.dart

Jika dijalankan, hasilnya akan sama seperti yang sebelumnya.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.