PEMBUATAN APLIKASI FLUTTER DASAR

Disini saya akan mencoba membuat aplikasi contoh Hello Word. Berikut langkah – langkahnya.

1. Pertama Bukalah software/aplikasi Visual Studio Code

2. Klik View lalu bukalah “Command Palette”

3. Pilihlah “New Application Project”

4. Selanjutnya akan muncul tab baru seperti gambar berikut. Lalu klik Select a folder.

5. Berilah nama sesuai dengan yang anda inginkan. Contohmya disini saya memberi nama
flutter_project, lalu klik enter.
6. Setelah itu akan muncul tampilan seperti ini.

Karena disini kita akan membuat tampilan sederhana text hello word maka hapuslah
sebagian hingga menyisakan seperti gambar berikut :

Fungsi main merupakan fungsi yang akan dijalankan pertama kali Ketika sebuah aplikasi
atau program yang akan dijalankan.
Maksud dari => adalah untuk menjalankan method runApp, lalu runApp akan menjalankan
class dari MyApp. Mengapa gambar diatas masih ada garis bawah merah ? karena disini
belum ada Class MyApp nya
7. Selanjutanya membuat class MyApp
 Ketik stl lalu tekan enter lalu akan muncul seperti gambar diatas, maksud dari stl adalah
sebuah shortcut untuk membuat StatelessWidget. Widget terbagi menjadi 2 yaitu :
a. Stateless Widget
Stateless widget adalah widget yang hanya bertugas untuk menampilkan sesuatu secara
statis. Tanpa melakukan tracking perubahan data dari waktu ke waktu. Intinya, tampilan
dari stateless widget akan seperti itu-itu saja dan tidak ada mekanisme untuk memantau
state perubahan aplikasi.
b. Stateful Widget
Stateful Widget adalah widget yang dinamis atau dapat berubah. Berbanding terbalik
dengan stateless, stateful widget dapat mengupdate tampilan, merubah warna,
menambah jumlah baris dll. Jadi dapat disimpulkan bahwa apapun widget yang dapat
berubah maka itulah stateful widget.
Stateless Widget memiliki method yang bernama build, method build untuk
mengembalikan widget yang merupakan tampilan Stateless Widget
8. Selanjutnya kita ganti Container dengan MaterialApp

MaterialApp merupakan sebuah widget yang berisi data-data yang diperlukan aplikasi yang
menggunakan MaterialDesign.

9. Membuat properti home

 Properti home adalah tampilan awal dari aplikasi yang akan ditampilkan oleh Widget
MaterialApp
10. Karena widget Widget MaterialApp belum mempunyai tampilan pasang widget yang
bernama Scaffold.

Widget Scaffold ini adalah tampilan dasar dari sebuah aplikasi android.
11. Tambahkan property dari Widget Scaffold yang akan kita gunakan adalah appBar dan
Body.
appBar untuk bagian atas/judul, karena kita membuat aplikas sederhana hello world kita
hanya menggunakan properti tittle, untuk menampilkan sebuah text dilayar kita perlu
menggunakan Widget Text dengan isi Aplikasi Hello World dan Body untuk bagian
bawah, kita hanya menggunakan Widget Text dengan isi Hello Word.
12. Compile atau coba jalankan dengan menekan tombal F5

Setelah itu akan muncul tampilan seperti gambar dibawah ini.

13. Jika anda menginginkan text Hello World berada ditengah maka blok bagian text lalu klik
kanan maka akan muncul seperti gambar dibawah ini.
Lalu pilihlah Refactor dan pilihlah Wrap With Center.

Lalu save file tersebut dan reload maka otomatis text Hello Word berada ditengah tanpa
harus mengcompile ulang, mengapa demikian karena VSC ini menjalankan hot reload.
Dan inilah hasilnya.