Hallo World di Flutter





Assalamu'alaikum wr.wb.
hai teman-teman apa kabar ?
semoga kalian sehat dan berbahagia selalu yaaa!!!! kali ini aku membuat tutorial tentang bagaimana cara membuat sebuah program Hello Wolrd di aplikasi Visual Studio Code dan menggunakan flutter, penasaran kan? ayoooo langsung saja!!!

Flutter adalah teknologi open source dari Google yang bisa digunakan untuk membuat aplikasi Android dan iOS.
Flutter sendiri merupakan Software Development Kit (SDK) yang bisa membantu developer dalam membuat aplikasi mobile cross platform.
Flutter adalah perangkat UI untuk membuat aplikasi yang indah untuk mobile, web, dan desktop dari satu basis kode saja.
Jika ingin mengembangkan aplikasi menggunakan Flutter, maka kamu harus terlebih dahulu memahami bahasa pemrograman Dart.

1. pastikan kamu sudah menginstall aplikasi flutter dan visual Studio Code di laptop atau pc kamu, jika belum kamu bisa melihat panduanya di Video Installasi Flutter

2. Hubungkan Android kalian dengan PC atau laptop kalian menggunakan kabel  USB.

3. Hidupkan Opsi Pengembang dan USB debugging Android kalian sudah dinyalakan. setiap Android berbeda nama opsi pengembangnya jadi silahkan kalian cari sendiri bagaimana cara menyalakan opsi pengembang dan USB debugging nya.

4. pastikaan Laptop atau komputer kalian mendapatkan jaringan internet yang bagus ya!

5. lalu buka aplikasi Visual Studio Code nya.

tampilan untuk awal di visual studio code

6. lalu di menu pilih view lalu pilih command palette atau (Ctrl+Shift+P)


7. lalu akan muncul tampilan seperti dibawah ini, pilih flutter:New Application Project jika tidak muncul maka kamu tinggal ketikkan flutter. namun jika kamu belum menginstall flutter di aplikasi visual studio code maka download lah extensionnya terlebih dahulu.


8. lalu akan muncul kotak dialog seperti pada tampilan di bawah. gunanya adalah untuk meletakkan file flutter atau menyimpan filenya di mana. kamu pilih tempatnya,jika sudah sesuai maka langsung saja pilih Select a folder to create the project in.

9. lalu setelah itu berikan nama untuk projek flutter yang akan kita buat seperti gambar di bawah ini yaitu Flutter_application_1, lalu langsung enter.

10. tungggu sampai project selesai di buat seperti gambar di bawah ini.

11.hasilnya adalah seperti berikut.

12. gambar diatas menunjukkan kita sudah berada di main.dart, lalu langsung saja kita ketikkan source code seperti gambar di bawah ini, namun kamu harus menghaus seluruh isi di main.dart terlebih dahulu dengan cara Ctrl + A lalu delete.


jangan lupa untuk menyimpan script baru yang telah kita buat di main.dart.

13. lalu kamu harus Komentari semua script pada folder test widget_test.dart. scriptnya terletak di bagian Explorer (Ctrl+Shift+E). seperti di bawah ini.
untuk mengomentari seluruh script kamu bisa menggunakan shortcut Ctrl+A lalu Ctrl+(tombol /?). lalu save

14. setelah langkah diatas selesai kamu kembali lagi ke script main.dart lalu kamu bisa langsung run dan debugging dengan cara di pojok kanan atas klik tanda panah bawah lalu pilih start Debugging. namun sebelum itu kamu harus memastikan bahwa jika androidmu sudah terkoneksi di visual studio code dengan melihat dibagian kanan bawah. nama android ku adalah V2029(android-arm64), jika kamu  masih membuka hasilnya di browser maka ubah saja dengan menekan bagian di V2029 itu menjadi nama androidmu. seperti gambar di bawah ini. V2029(android-arm64) adalah keterangan bahwa kamu akan mendebug hasil outpunya ke android,jika bacaannya bukan nama androidmu maka ubah saja ke androidmu.


untuk mendebugg script ini dibutuhkan koneksi jaringan yang memadai, jadi jika kamu tidak memiliki koneksi jaringan yang jelek maka debug tidak akan bisa berhasil.

hasil output yang akan muncul di android yang sudah terhubung adalah sebagai berikut :

hasilnya adalah Hai Mulya Safitri.


oh iya, supaya kalian bisa mirorring handphone kalian ke laptop atau komputer kalian bisa menggunakan aplikasi Vysor...

Terimakasih!















Komentar