Membuat Aplikasi dengan Flutter

Dalam artikel sebelumnya, telah dijelaskan cara melakukan setup Flutter dan Android Development pada perangkat Anda. Artikel ini akan membahas langkah-langkah membuat aplikasi menggunakan Flutter.

1. Buka tautan berikut: Flutter Codelab.
2. Klik "Start Codelab".
   
3. Ikuti panduan yang tersedia.
   
4. Buka aplikasi Visual Studio Code.
5. Klik "View", pilih "Command Palette", ketik "Flutter", lalu pilih "Flutter: New Project".
   
6. Pilih template "Flutter Application".
   
7. Anda akan diarahkan ke file explorer untuk menambahkan folder baru sebagai lokasi penyimpanan proyek.
   
   
8. Setelah menambahkan folder, berikan nama untuk proyek Anda di Visual Studio Code.
   
9. Jika muncul pesan seperti gambar di bawah ini, klik "Yes, I trust the authors".
   
10. Klik "No Device" di bagian kanan bawah aplikasi.
    
11. Pilih emulator yang tersedia.
    
12. Setelah memilih emulator, tampilan berikut akan muncul.
    
13. Untuk melakukan debugging, klik tombol "Run" di bagian kanan atas.
    
    
14. Jika tampilan sudah seperti di bawah ini, Anda dapat melakukan perubahan pada kode agar tampilan pada emulator juga berubah.
    
15. Sebelum melanjutkan ke tahap perubahan kode, Anda harus mengetahui sekilas informasi terkait file yang ada.
16. Untuk melihat semua file, klik tombol explorer pada bagian kiri.
    
17. Folder Android berisi kode yang mendukung aplikasi saat berjalan di Android.
    
18. Folder Build berisi kode untuk menghasilkan file yang diperlukan Flutter saat menjalankan aplikasi.
    
19. Folder ios berisi kode yang mendukung aplikasi saat berjalan di iOS.
    
20. Folder lib berisi file main.dart yang merupakan file utama untuk menjalankan aplikasi.
    
21. Folder linux berisi kode yang mendukung aplikasi saat berjalan di Linux.
    
22. Folder macOS berisi kode yang mendukung aplikasi saat berjalan di macOS.
    
23. Folder test digunakan untuk melakukan pengujian pada file-file lain. File pengujian akan ditambahkan ke folder ini jika diperlukan.
    
24. Folder web berisi kode yang mendukung aplikasi saat berjalan di web.
    
25. Folder windows berisi kode yang mendukung aplikasi saat berjalan di Windows.
    
26. File .gitignore berguna untuk menentukan file atau folder yang tidak perlu dibawa ke dalam git.
    
27. File metadata berguna untuk melihat riwayat versi aplikasi.
    
28. File analysis_options.yaml berguna untuk menyesuaikan bahasa pemrograman dan memberikan informasi terkait kesalahan pada kode.
    
29. File pubspec.lock berguna untuk mengunci versi package.
    
30. File pubspec.yaml berguna untuk mengontrol semua aspek dependencies dan aset yang dibutuhkan oleh aplikasi Flutter Anda, termasuk saat Anda akan mengubah versi aplikasi.
    
31. Setelah mengetahui informasi singkat terkait file yang ada pada pembuatan aplikasi, langkah selanjutnya adalah melakukan perubahan pada beberapa kode untuk mengubah tampilan pada emulator.
32. Buka baris 109 pada file main.dart.
    
33. Ubah kalimat "You have pushed the button this many times" menjadi "Hello SBD" dan simpan perubahan. Tampilan pada emulator akan otomatis berubah seperti di bawah ini.
    
34. Jika Anda berhasil mengubah tampilan emulator dengan mengubah kode pada Visual Studio Code, Anda telah berhasil menyelesaikan tahap awal pembuatan aplikasi menggunakan Flutter.