Tutorial Flutter — Membuat Projek Pertama

Tutorial flutter membuat projek pertama serta menyambungkannya dengan android milik pribadi.

Published in

Komunitas Android CCIT-FTUI

7 min readAug 8, 2019

Halo semua, pada kali ini gue akan membagikan insight mengenai cara untuk membuat projek pertama di Flutter dan cara menyambungkannya ke Android.

Gimana udah ngga sabar kan untuk ngoding flutter?

Eitts… sabar dulu dong sabar, masih ada beberapa step lagi yang harus dijalankan.

Menyalakan mode pengembang

Sebelum membuat project, persiapkan dulu smartphone kamu ke mode pengembang.

Pertama, buka pengaturan pada smartphone anda dan pilih About phone (tentang telepon). Lalu tekan Build number sampai 7 kali sampai ada pemberitahuan anda sudah masuk mode pengembang (Karena hp saya xiaomi maka tulisannya ”Versi MIUI”).

Buka developer option (opsi pengembang), biasanya ada di setelan tambahan dan pastikan “Opsi pengembang” aktif.

Pasang hp anda dengan kabel data. Lalu nyalakan Debugging USB dan nyalakan juga install via USB (Biasanya akan ada notif untuk pertama kali. Tapi jika tidak muncul, kembali ke Opsi pengembang dan aktifkan).

Eits, tunggu dulu mamen. Untuk memastikan apakah sudah tersambung maka kalian dapat mengetesnya dengan menuliskan “adb devices” pada command prompt kalian.

Apabila sudah muncul, maka dapat dipastikan komputer telah mendeteksi perangkat kalian dan siap digunakan untuk menjalankan flutter. Apabila belum muncul, maka periksa kembali kebutuhan yang ada untuk menghubungkan perangkat dengan komputer, umumnya masalah ini terjadi karena driver handphone belum terinstall di laptop.

Coba dicopot colok USB nya 1–2x dan tunggu kisaran 2–3 menit saat baru tercolok, mungkin si laptop kamu lagi nginstall drivernya.

Kalo ada terjadi error coba deh klik Batalkan Otorisasi USB Debugging atau inggrisnya Revoke USB Debugging Authorizations. Ngga ada yang pake arab kan disini? Soalnya saya ngga tau menunya apa yang harus di klik xixixixi.

Nah apabila sudah terinstall, biasanya akan muncul notif seperti ini di smartphone kalian.

Nah kalo udah muncul ini di centrang aja always allow from this computer, biar ngga ribet lagi kedepannya hehehe.

Sekarang cek lagi deh device kalian udah nyambung atau belum? Harusnya sih udah, tapi coba sekarang ceknya beda. Pake command dibawah ini:

Tampilan perangkat dengan perintah flutter.

Nah kalo pake command “flutter devices” kita bisa liat Merk, ID, Processor, hingga versi SDK Android berapa loh.

Masalah yang Kadang Muncul

Sekarang periksa kembali semuanya apakah sudah oke semuanya, jalankan:

flutter doctor

flutter doctor untuk perangkat tidak terdeteksi

adb devices command

Kadang ada kasus seperti ini, ketika kita ketik “flutter devices” maka tidak ada yang muncul sedangkan untuk “adb devices” dia muncul, hal ini dikarenakan bin flutter belum mendeteksi perangkat kamu.

Revoke USB Debugging di Smartphone kalian lalu jalankan command

flutter devices

Nanti dia akan muncul authorization untuk allow debugging, klik allow lagi.

Jika Flutter, Android Toolchain, dan Connected Device telah terceklis maka kamu udah siap. Android Toolchain kamu silang? Scroll kebawah ya!

Kalau masih ngga bisa juga? Ada beberapa kemungkinan kalau perangkat kamu masih ngga muncul juga.

Cek kabel USB kamu, mungkin ada masalah sehingga perangkat kamu ngga kedeteksi, di beberapa kasus ini berpengaruh loh, jangan beli kabel yang 10ribuan warna-warni ya xixixi. Kalau masih ngga percaya coba deh konek pake kabel USB temen kamu yang udah bisa, kalau bisa, bisa dipastikan USB kamu murahan alias ayo beli yang baru hehehe.
Ada masalah sama port USB kamu, coba dipindahin ke Port lainnya.
Ada error saat instalasi, coba diulang lagi dari atas hehehe. 😆 Etapi ini serius loh, coba dicek lagi.
Masih ngga bisa juga? Coba colok smartphonemu ke laptop temenmu yang sudah berhasil dengan kabel USB kamu yang pertama, kalau terdeteksi hmm bisa memungkinan smartphonemu abal, eh ngga deng, laptop kamu bermasalah, coba diulang lagi dari awal.

MEMBUAT PROJEK FLUTTER DENGAN VISUAL STUDIO CODE

Setelah semua beres, 2 hal penting dari flutter telah tercentang maka kita siap nih untuk buat perojek flutter. Ada 3 versi yang bisa dilakukan untuk membuat project flutter.

Membuat foldernya terlebih dahulu

Pertama kalian bisa membuat folder terlebih dahulu, untuk menaruh project flutter.

Pada VSCode tekan explore dan drag folder tadi yang sudah kalian untuk menyimpan project flutter.

Pergi ke terminal, lalu tekan new terminal. Ketik flutter create (nama project). Kali ini nama projectnya simpleproject. Nama project ini sebetulnya bisa terserah dan se-kreasi kalian, sesuai aplikasi yang kalian buat. Jadi jangan terpaku dengan “simpleproject”.

flutter create simpleproject

Tunggu sampai selesai.

Jika sudah selesai akan muncul folder bernama “simpleproject”, dan sudah berisi project flutter di folder yang sebelumnya kalian buat.

2. Membuat foldernya, di “Open Folder VScode”

Di cara ini, kalian bisa langsung buka VScode kalian, setelah itu tekan “Open Folder”

Kemudian kalian bisa membuat folder baru(Klik kanan -> new -> folder). Seperti cara pertama, kalian bisa membuat folder ini dimana saja.

Setelah kalian membuat folder tersebut. Pilih “Select Folder”. Kemudian buka lagi terminal kalian, Ketik flutter create (nama project kalian). Dan tunggu hingga project kalian jadi.

3. Membuatnya otomatis dari VScode

Sebetul itu, walaupun ini cara tersingkat di untuk membuat project flutter, tapi kalian akan cukup lama untuk menunggu project flutter kalian jadi. Dan saya tidak terlalu suka menggunakan cara ini. Tapi itu kembali ke diri kalian masing — masing. Mau menggunaka cara ini, atau tidak.

Buka VScode kalian, setelah itu tekan Ctril + Shift + P. Nanti akan ada “search bar” yang muncul.

Setelah itu, kalian bisa menebak kan apa langkah selanjutnya? yap! Kalian pilih “Flutter: New Project”. Jika tidak ada, kalian bisa ketik manual. Nanti, kalian akan diminta untuk memasukkan nama project kalian.

Lalu tekan Enter. Setelah itu kalian akan diminta untuk meletakkan dimana kalian ingin menaruh project kalian. Dan sekali lagi, itu terserah kalian.

Jika sudah pilih “Select a folder to create the project in”. Dan tunggu kembali. Akan ada VScode baru yang terbuka sambil membuat project flutter.

Jika project sudah jadi, tinggal di jalankan di device masing masing. Untuk menjalankannya, silahkan Lakukan langka ini di terminal:

1.ketik cd(spasi) nama project yang kalian buat. Karena di tutorial ini menggunakan nama “simpleproject”, maka disini akan saya ketik:

cd simpleproject

2. Setelah itu ketik:

flutter run

Kita akan masuk terlebih dahulu ke folder simpleproject dan akan menjalankan flutter.

Tunggu sampai flutter selesai mengompile programmu dari bahasa Dart ke Java serta asset-assetnya.

Kecepatan flutter selesai mengompilenya beragam tergantung perangkat, kalo laptop kamu i7 terbaru sih mungkin bisa 10 detik (ngga deng). Untuk pertama kali mengompile flutter, dapat memakan waktu berkisar kurang lebih 5 menit, jadi mendingan ditinggal cari jodoh aja, belom ada kan? xixixixi.