Pendahuluan
Apa itu Flutter ? jadi Flutter adalah sebuah framework open-source UI software development kit (SDK) yang dikembangkan oleh Google untuk membangun aplikasi secara cepat dan efisien. Dengan menggunakan satu basis kode (single codebase) dan bahasa pemrograman Dart, Flutter memungkinkan developer menciptakan aplikasi native yang menarik untuk Android, iOS, web, dan desktop sekaligus.
Langkah Installasi Flutter Bisa melalui link berikut untuk referensinya:
Kita akan menginstall melalui VS Code. Jika belum ada install VS Code terlebih dahulu.
Pertama Buka VS Code dan tambahkan 2 extension berikut untuk bisa diinstal dan dijalankan di VS Code-nya :
Lalu setelahnya ke pilihan View > Command Palette.
Lalu ketikkan fluuter > New Project.
Secara otomatis VS Code akan meminta untuk menemukan Flutter SDK di komputer, jika tidak ada maka akan diminta untuk mengunduh terlebih dahulu. Lalu setelah itu klik 'Download SDK'
Setelah itu pilih folder atau buat folder untuk memilih tempat meletakkan unduhan flutternya, lalu klik 'Clone Flutter'.
Setelah itu akan muncul Pop Up seperti pada gambar di bawah ini dan akan langsung menginstall, ini butuh waktu beberapa saat saja.
Ketika sudah berhasil terinstall makan akan ada tulisan 'The Flutter SDK was added to your PATH' Klik tambahkan SDK ke PATH agar secara otomatis langsung terpasang. Jika sudah langkah selanjutnya restart jika perlu, dan buka Terminal atau command prompt untuk melihat dan memvalidasinya.
Ketikkan :
flutter doctor -vLalu akan muncul seperti gambar di bawah ini.
Setelahnya perlu melakukan dan melalukan pengecekan licenses lalu masukkan perintah berikut.
flutter doctor --android-licenses
Ketika muncul sebuah informasi berikut, itu adalah syarat dan ketentuan, ada opsi y/n ketik dan pilih y semua saja, sampai selesai.
Lalu akan muncul 'All SDK package licenses accepted'.
Kemudian jika perlu, kita bisa mengunduh SDK melalui Android Studio jika ada kendala seperti pada gambar di bawah ini jika installasi diatas belum bisa dilakukan.
Caranya adalah pada Android Stuidio pilih opsi 'More Actions' lalu pilih SDK Manager.
Lalu sesuai dengan gambar di bawah pada opsi 'SDK Tools' Pilih Android SDK Command-line Tools' untuk bisa diinstal, setelah diinstal, bisa klik OK atau Apply.
Lalu setelahnya Buka kembali pada VS Code. Buka pada Command Palette.
Klik New Project.
Lalu pilih template 'Application'.
Setelah itu dialihkan ke File Explorer yang nantinya kita akan membuat sebuah folder kosong untuk meletakkan proyek demo yang akan kita buat melalui VS Code.
Lalu pada gambar di bawah ini akan diinstruksikan untuk menamai lagi proyek yang akan dibuat. Isikan bebas sesuai dengan keinginan.
Maka setelahnya akan muncul sebuah template dari frameworknya secara otomatis. Seperti pada gambar di bawah ini.
Lalu pilih pada file 'main.dart' sesuai pada gambar di bawah ini.
Setelah itu bisa lalukan 'Start Debugging' pada pojok kanan dan ada tanda seperti pada gambar di bawah ini.
Atau bisa juga dari terminal, dengan mengetikkan 'flutter run'.
Setelah itu pilih web/browser di mana akan menampilkan sebuah demo, dan contohnya adalah seperti pada gambar di bawah ini.
Nb : Saat demo menggunakan perangkat mobile terdapat halangan, bahwasanya perangkat saya yaitu handphone tidak mendukung dalam proses demo, karena memori penuh. Maka dari itu saya memilih opsi lain dengan menggunakan device lainnya yang support. Berikut langkah-langkahnya.
Langkah 1: Persiapan Software (Download)
Kita dapat mendownload file .zip scrcpy (versi terbaru saat ini v3.3.4) bisadari GitHub resminya atau melalui link berikut :
Selanjutnya yaitu file tersebut diekstrak ke folder yang mudah diakses. Folder ini berisi file penting seperti scrcpy.exe dan adb.exe.
Langkah 2: Setting di Handphone (Setiap merek beda-beda)
Agar laptop bisa "mengendalikan" HP, kita perlu membuka akses pengembang:
Aktifkan Developer Options: Masuk ke Settings > About Phone, lalu ketuk Build Number sebanyak 7 kali sampai muncul tulisan "You are now a developer".
Aktifkan USB Debugging: Masuk ke Settings > Pengaturan Tambahan> Opsi Pengembang, lalu aktifkan saklar USB Debugging.
Kita juga bisa mengaktifkan Wireless Debugging (Ini opsional) di menu yang sama agar koneksi lebih stabil tanpa kabel di awal.
Langkah 3: Koneksi Awal di Terminal
Langkah ini dilakukan untuk memindahkan jalur data dari kabel ke Wi-Fi:
Buka PowerShell: Klik kanan di folder scrcpy tadi, pilih "Open in Terminal".
Pari atau coba koneksikan dengan kabel (USB-Type C) dan hubungkan HP ke laptop dengan kabel USB sekali saja.
Ketik perintah berikut untuk membuka jalur nirkabel:
.\adb tcpip 5555Cabut kabelnya setelah muncul restarting in TCP mode, kabel USB sudah boleh dilepas.
Langkah 4: Menghubungkan via Wi-Fi
Sekarang, laptop akan mencari Handphonr melalui jaringan Wi-Fi yang sama. Selanjutnya adalah Cek IP pada HP masing-masing lihat alamat IP di pengaturan Wi-Fi HP atau menu Wireless Debugging (Contohnya : 10.108.50.61).
Setelah itu koneksikan dengan ketik perintah koneksi di terminal: .\adb connect 10.108.50.61:5555 Jika muncul connected to..., berarti jalur nirkabel sudah siap digunakan.
Langkah 5: Memunculkan Layar (Mirroring)
Langkah terakhir untuk menampilkan layar HP di monitor laptop:
Ketik perintah utama untuk menjalankan Scrcpy: .\scrcpy.exe
Hasilnya adalah Jendela baru akan terbuka menampilkan layar HP masing-masin secara real-time.
Berikut contohnya seperti pada gambar di bawah ini.
Kesimpulan :
Kita berhasil melalukan praktik dan pembelajaran mengenai instalasi flutter dan demo program menggunakan flutter untuk pertama kalinya, disini kita belajar bersama-sama mendapatkan sebuah pengetahuan baru mengenai pemrograman aplikasi seluler. Kita bisa mengetahui banyak sekali pengetahuan yang perlu kita dalami, bisa berguna untuk mengasah skill dan mendapat peluang menjadi sukses di masa depan.
Terima Kasih sudah membaca, see you.