3. Project Flutter Pertama "Hello World!"

 Kali ini kita akan membuat sebuah aplikasi menggunakan flutter, yang harus dipersiapkan yaitu :

1. Instalasi Flutter lengkap dengan Android SDK (silahkan baca tutorial sebelumnya pada artikel Instalasi Flutter Pada Windows)

2. Text Editor (dalam tutorial ini saya akan menggunakan Visual Studio Code), jika belum ada silahkan download pada halaman websitenya https://code.visualstudio.com

 

Ditutorial kali ini kita hanya akan membuat aplikasi Hello World, fokus pada tutorial ini teman" dapat mempelajari pembuatan aplikasi flutter dari awal dan memahami struktur dasar dari aplikasi flutter tersebut.

Buka Visual Studio Code yang sudah terinstall

Pastikan membuka VSCode pada path yang sesuai, tempat lokasi aplikasi flutter akan ditempatkan.

Sebelumnya pastikan extension flutter dan dart telah terinstall pada VS Code, caranya klik extension pada menu VS Code Sebelah kiri bawah dan ketik flutter

Jika belum, silahkan install terbelebih dahulu, kemudian ketikkan “dart”

Dan lakukan instalasi jika belum diinstall

Baiklah, jika sudah yakin flutter dan dart telah terinstall, kita bias mulai untuk membuat aplikasi Hello World pertama kita :D

1.      Ketik View -> Command Palette



klik Flutter New Project



Tulis nama project, misalkan “hello_world”, harus dengan huruf kecil dan dibatasi dengan underscore “_” jangan pakai spasi yah 😊

2.      Pilih Lokasi Project dan klik “Select a folder to create the project in”

Jika proses pembuatan project baru berhasil, maka akan terbentuk struktur folder seperti berikut :

3.      Pada tahap ini aplikasi flutter dengan nama “hello_world” telah terbentuk, dan flutter secara default telah membuatkan juga template untuk aplikasi yang bernama “main.dart”, lokasi filenya terdapat pada folder “lib”

4.      Untuk membuat aplikasi baru, saya akan contohkan menghapus semua coding yang tidak diperlukan dan kita buat dari awal 😊

5.      Hapus semua coding kecuali baris awal sampai dengan void main()

6.      Ketik stl pada bagian paling bawah coding dan langsung enter saja untuk memilih Flutter Stateless Widget, seperti gambar dibawah ini, dan jangan lupa menambahkan nama classnya sebagai contoh saya akan menuliskan App sebagai nama class

Jangan lupa untuk mengganti run MyApp() dengan App() pada class void main

7.      Ganti Widget Container pada “return Container()” menjadi “return MaterialApp()” dan tambahkan property home dengan widget Scaffold didalamnya, seperti gambar dibawah ini :

 8.   Lengkapi codingan diatas hingga seperti gambar dibawah ini

9.      Ketik tombol F5 dan jalankan flutter android emulator atau buat baru pilih sesuai kebutuhan

10.  Jika berhasil akan muncul emulator dengan tampilan seperti berikut :

              

Oke, sampai disini aplikasi kita telah berjalan dengan sempurna, jika tidak ada error maka aplikasi akan tampil seperti gambar diatas

Dicoba berulang” yah membuat project flutternya, supaya terbiasa dah faham cara pembuatannya

Sampai disini dulu tutorial project flutter pertama kita, kedepannya kita akan bahas lebih rinci baik struktur maupun penggunaan widget dengan aplikasi yang lebih kompleks

Selamat mencoba dan tetap berkarya…