1. Home
  2. Docs
  3. Kurikulum Flutter Mobile Apps
  4. Tugas Week 2
  5. Tugas-10-SanberAppFlutter

Tugas-10-SanberAppFlutter

Persiapan Install Flutter

Terdapat beberapa tahapan yang harus dilakukan sebelum dapat menggunakan Flutter untuk proses development. Berikut beberapa hal yang perlu kamu persiapkan:

System requirements

Operation System: Jika kamu menggunakan Windows, minimal versi 7 SP1 atau yang terbaru dan pastikan 64-bit. Sedangkan Linux dan Mac hanya wajib menggunakan 64-bit.

Disk Space: Jika kamu menggunakan Windows, sediakan ruang sekitar 400 MB (tidak termasuk tools/IDE). Linux membutuhkan 600 MB dengan ketentuan yang sama, sedangkan Mac membutuhkan 700 MB.

Tools: Pastikan kamu telah menginstall git dan dapat digunakan melalui command line.

Install Android Studio

Mungkin sebagian teman-teman bertanya-tanya, kenapa sih harus meng-install Android studio? Kan penggunaan RAM-nya besar? Tenang saja, yang dibutuhkan dari Android studio adalah dependecies yang menyertainya, sehingga kedepannya kita tidak perlu menjalankannya dan dapat menggunakan Editor lain untuk menuliskan code kamu. Berikut beberapa hal yang dibutuhkan Flutter dari Android Studio untuk proses development Android:

  1. Android SDK
  2. Android SDK Platform-Tools
  3. Android SDK Build-Tools

Tahapannya, silahkan download dan install Android Studio sesuai dengan sistem operasi yang kamu punya. Pada kotak dialog “Android Studio Setup Wizard“, pastikan kamu meng-install ketiga bagian yang telah disebutkan diatas. Atau kamu dapat ke menu Tools > SDK Manager

Kemudian pilih tab SDK Tools dan centang ketiga komponen diatas

Install Flutter SDK

Selain SDK yang telah didapatkan dari Android Studio, Flutter juga mewajibkan kita untuk meng-install SDK yang telah disediakannya. Berikut adalah beberapa tahapan instalasi Flutter SDK.

  1. Buka halaman Flutter Install, kemudian pilih sistem operasi yang kamu gunakan.
panduan install flutter

2. Pada bagian Flutter SDKdownload SDK dari link yang telah disediakan.

install sdk flutter

3. Extract file Flutter SDK yang telah kamu download, dan tempatkan dimanapun kamu inginkan (Warning: Jika menggunakan Windows, jangan diletakkan ke dalam folder yang membutuhkan permission, seperti: C:/Program Files). Karena saya menggunakan Linux, saya meletakkannya di dalam folder /home/usersaya/flutter atau ~/flutter .

4. Kemudian tambahkan PATH dari Flutter SDK yang telah kita extract

Note: Jika kamu menggunakan Windows, pastikan fileflutter_console.bat berada di dalam folder flutter, kemudian double click file tersebut.

5. Terakhir, running commandflutter doctor untuk mengecek apakah masih ada dependecies yang belum ter-install.


Konfigurasi Editor

Editor memiliki peran penting dalam proses development, tak peduli kamu menggunakan bahasa pemrograman apapun. Flutter sendiri memberikan opsi lain yang dapat digunakan selain Android Studio, yakni VS Code. Berikut beberapa tahapan yang dapat kamu lakukan untuk konfigurasi VS Code:

  1. Pastikan kamu telah meng-install VS Code versi terbaru
  2. Tekan Ctrl + Shift + P atau View > Command Palette
  3. Pada kotak yang tersedia, ketikkan Extensions: Install Extension, kemudian tekan enter
  4. Pada kontak pencarian yang tersedia, ketikkan: flutter. Kemudian pilih Flutter, lalu tekan install.flutter install vscodeNote: Jangan lupa untuk meng-install Dart plugin juga, pada gambar lokasinya terletak paling bawah.
  5. Reload VS Code kamu agar dapat menggunakan extension yang baru saja di-install.
  6. Untuk memastikan, buka kembali View > Command palette, kemudian ketikkan Flutter: Run Flutter Doctor. Pastikan output yang kamu terima sama dengan ketika menjalankan command flutter doctor pada terminal.

Mempersiapkan Smartphone / Emulator

untuk emultor temen-temen dapat menggunakan device asli/ handphone android teman teman atau dapat juga menggunakan emulator bawaan android studio

ini adalah vysor penampakan awal dengan menyambungkan dengan kabel usb

untuk vysor dapat di download disini : https://www.vysor.io/

dan jangan lupa setelah masuk vysor hp temen temen di mode debug agar vysor dapat mendetect device temen-temen

Cara Install Flutter

Persiapannya saja sudah sebanyak itu? Jangan jangan instalasinya bakalan lebih banyak lagi? Tenang saja, untuk tahap ini sudah sangat singkat. Jadi sepanjang sub topik sebelumnya, kita menyediakan dependencies yang dibutuhkan oleh Flutter agar dapat berjalan sebagaimana mestinya. Berikut beberapa cara meng-install Flutter, baik menggunakan command line (Terminal / Command prompt) maupun Editor (Vs Code / Android Studio).

dan jangan lupa pada hp nya di mode debug

jika pada hp xiomi ada pada MIUI version di pencet selama 7 kali sampai keluar developer

lalu setelah itu masuk ke dalam developer option yang ada pada additional setting->developer options

Via Terminal / Command Line

Perlu kita ketahui, jika anda seorang web dev, maka sudah menjadi kebiasaan dan keharusan meletakkan project yang sedang kita develop di dalam direktori web server. Berbeda halnya dengan mobile dev, kita bebas meletakkan dimana saja selama kamu dapat mengaksesnya dan sebaiknya jangan diletakkan di restrict area (note: yang membutuhkan permission). So, saya berasumsi teman-teman meletakkan project di dalam direktori development.

Pada command line, arahkan ke dalam direktori BootcampFlutter:

Kemudian untuk meng-install Flutter gunakan command:

$ flutter create sanberappflutter

Notesanberappflutter adalah nama folder dari project yang akan dibuat. Jadi silahkan disesuaikan dengan nama yang teman-teman inginkan.

ada screenshoot diatas saya belum menyambungkan perangkat smartphone ke komputer sehingga device tidak terdetect. Apabila proses instalasi telah selesai, masuk kedalam direktori yang baru dibuat, dalam hal ini daengweb dengan command:

$cd sanberappflutter

kemudian running command berikut

$ flutter run

akan ada proses seperti diatas

lalu apabila sudah selesai akan tampak hasil seperti ini

cara kedua untuk install via editor (VSCode)

Opsi lainnya meng-install Flutter selain menggunakan command line adalah menggunakan Editor meskipun sebenarnya dibalik proses ini tetap menggunakan command line akan tetapi kita dimudahkan dengan disediakannya GUI, sehingga hanya perlu diklik. Buka View > Command Paletter, kemudian ketikkan:

Flutter: New Project

install flutter via vscode

Kemudian pada kotak yang tersedia, masukkan nama project yang teman-teman inginkan, misal: sanberappflutter,

Install flutter via vscode

Kemudian tekan enter. Lalu pilih direktori dimana project tersebut akan disimpan.

Secara otomatis, VS Code akan membuka jendela baru dan menjalankan proses instalasi, tunggu proses tersebut hingga selesai.

building flutter from vscode

Apabila proses tersebut telah selesai, pastikan emulator kamu berjalan atau device kamu terhubung ke komputer, kemudian running Flutter pada menu Debug > Start Debugging atau dengan menekan tombol F5.

Cara menjalankan selain menggunakan flutter run yaitu dengan menggunakan debugger

yang pertama, masuk ke dalam mode Run and debug yang ada di side bar kiri

lalu tekan Run and Debug

jika aplikasi sudah seperti ini selamat aplikasi anda sudah bisa berjalan

Selanjutnya setelah selesai silahkan commit kedalam repository masing masing, saat push jangan lupa di directory Bootcampflutter.