Instalasi dan Setup Flutter SDK

Langkah pertama yang harus dilakukan agar framework Flutter dapat digunakan untuk mengembangkan sebuah software adalah melakukan instalasi terhadap Flutter SDK. Berikut merupakan langkah-langkah dalam proses instalasi Flutter SDK:

  1. Bukalah link berikut untuk mendownload Flutter SDK: https://docs.flutter.dev/install/archive

  2. Carilah section “Install the Flutter SDK” dengan cara melakukan scroll kebawah.

  3. Pilihlah menu download and install yang ada pada section tersebut.

  4. Pilihlah flutter_windows_3.35.4-stable.zip untuk menginstall flutter SDK yang direkomendasikan (Note: Versi dapat berubah-ubah).

    Gambar B.2 - Halaman Website untuk Mendownload Flutter SDK

    Gambar B.2 Halaman Website untuk Mendownload Flutter SDK

  5. Tunggulah sampai proses download Flutter SDK selesai.

    Gambar B.3 - File Flutter SDK yang telah didownload

    Gambar B.3 File Flutter SDK yang telah didownload

  6. Setelah file Flutter SDK telah selesai didownload, lakukanlah proses extract pada file tersebut dengan cara menekan tombol kanan pada mouse dan pilihlah opsi extract all.

  7. Centanglah opsi “Show extracted files when complete”

  8. Pilihlah destinasi penyimpanan untuk menyimpan hasil extract dari file tersebut dengan menekan menu browse yang disediakan (Note: Destination Storage untuk menyimpan file hasil ekstraksi dapat disimpan dimana saja).

  9. Tekanlah tombol extract untuk melanjutkan proses ekstraksi file dan tunggulah hingga proses ekstraksi file selesai dilakukan.

    Gambar B.4 - Proses Extract File Flutter SDK

    Gambar B.4 Proses Extract File Flutter SDK

  10. Carilah folder bernama Flutter pada direktori tersebut. Kemudian carilah folder bernama bin di dalam folder tersebut ([Direktori_asal]:\flutter\bin)

  11. Salinlah path tersebut dan bukalah environment variables dengan cara masuk ke dalam search windows atau dengan menekan logo windows pada keyboard. Setelah muncul kolom search, ketiklah “env” pada bagian search dan pilihlah menu “Edit the system environment variabels”.

    Gambar B.5 - Menu Search Pada Windows

    Gambar B.5 Menu Search Pada Windows

  12. Masuklah ke dalam menu environment variables kemudian pilihlah menu path pada bagian atas dan klik menu “Edit…”

    Gambar B.6 - Menu System Properties

    Gambar B.6 Menu System Properties

    Gambar B.7 - Menu Environment Variables

    Gambar B.7 Menu Environment Variables

  13. Pilihlah menu new pada menu edit environment variable dan lakukanlah paste terhadap path yang telah disalin.

  14. Setelah path flutter SDK berhasil terpasang, tekanlah tombol OK untuk menyimpan konfigurasi path.

    Gambar B.8 - Menu Edit Environment Variables

    Gambar B.8 Menu Edit Environment Variables

  15. Bukalah command prompt pada perangkat dan ketik perintah flutter –version. Proses instalasi flutter SDK dinyatakan selesai, jika output pada command prompt terlihat, seperti pada gambar berikut (Note: Versi dapat berbeda-beda).

    Gambar B.9 - Output pada command prompt

    Gambar B.9 Output pada Command Prompt

Instalasi dan Setup Android Studio

Setelah proses instalasi Flutter SDK berhasil dilakukan, langkah berikutnya yang harus dilakukan adalah menginstall software android studio yang nantinya akan digunakan selama proses praktikum. Berikut merupakan langkah-langkah dalam menginstall software android studio:

  1. Bukalah link berikut untuk mendownload software android studio: https://developer.android.com/studio

  2. Tekanlah tombol Download Android Studio Narwhal 3 Feature Drop (Note: Versi Android Studio dapat berubah-ubah).

    Gambar B.10 - Halaman Website untuk Mendownload Android Studio

    Gambar B.10 Halaman Website untuk Mendownload Android Studio

  3. Setelah menekan tombol tersebut, maka website akan menampilkan menu “Terms and Conditions.” Lakukanlah scroll hingga mencapai batas bawah dari menu tersebut dan centanglah bagian “Saya telah membaca dan menyetujui persyaratan dan ketentuan di atas.” Kemudian tekan kembali tombol download yang telah disediakan.

    Gambar B.11 - Tampilan Menu Terms and Conditions

    Gambar B.11 Tampilan Menu Terms and Conditions

  4. Tunggulah sampai proses download android studio selesai.

  5. Bukalah file android studio yang telah selesai didownload.

    Gambar B.12 - File Android Studio yang telah didownload

    Gambar B.12 File Android Studio yang telah didownload

  6. Setelah masuk ke dalam menu setup untuk android studio, pilihlah tombol next untuk melanjutkan ke langkah berikutnya.

    Gambar B.13 - Menu Setup Android Studio

    Gambar B.13 Menu Setup Android Studio

  7. Centanglah opsi Android Virtual Device agar android studio menyediakan opsi virtual device pada saat proses running project. Kemudian tekanlah tombol next untuk melanjutkan ketahap berikutnya.

    Gambar B.14 - Menu Install Components Android Studio

    Gambar B.14 Menu Install Components Android Studio

  8. Pilihlah lokasi direktori untuk menyimpan software android studio pada perangkat dan tekanlah tombol next untuk melanjutkan ketahap berikutnya.

    Gambar B.15 - Menu Configuration Location Android Studio

    Gambar B.15 Menu Configuration Location Android Studio

  9. Pada menu choose start menu folder, pastikan untuk memilih android studio kemudian tekanlah tombol install untuk melakukan proses instalasi terhadap android studio.

Gambar B.16 - Menu untuk Membuat Shortcut Aplikasi Android Studio 
<p style="text-align: center;"><b>Gambar B.16</b> Menu untuk Membuat Shortcut Aplikasi Android Studio</p>

  1. Tunggulah sampai proses instalasi android studio selesai.

    Gambar B.17 - Proses Instalasi Android Studio

    Gambar B.17 Proses Instalasi Android Studio

  2. Setelah proses instalasi android studio selesai, bukalah aplikasi android studio yang telah terinstall.

  3. Jika belum pernah membuat project dengan menggunakan software android studio, maka tampilan awalnya akan terlihat, seperti pada Gambar B.18 Bukalah menu “More Actions yang telah disediakan oleh aplikasi dan pilihlah option SDK Manager.

    Gambar B.18 - Tampilan Aplikasi Android Studio

    Gambar B.18 Tampilan Aplikasi Android Studio

  4. Pada menu SDK Manager, centanglah option Hide Obsolete Packages yang terletak di bagian bawah.

  5. Selanjutnya, masuklah ke dalam menu SDK Tools kemudian pilihlah “Android SDK Command-line Tools (latest)”.

  6. Tekanlah tombol apply yang berada pada bagian bawah.

    Gambar B.19 - Menu SDK Tools pada Android Studio

    Gambar B.19 Menu SDK Tools pada Android Studio

  7. Aplikasi android studio akan menampilkan jendela baru yang berisikan pesan konfirmasi, seperti pada Gambar B.20. Pada bagian ini tekanlah tombol OK untuk menlanjutkan ketahap berikutnya.

    Gambar B.20 - Jendela Pesan Konfirmasi

    Gambar B.20 Jendela Pesan Konfirmasi

  8. Tunggulah sampai proses download Android SDK CLT selesai.

  9. Setelah selesai, bukalah command prompt pada perangkat dan ketik perintah flutter doctor. Jika output dihasilkan pada saat menjalankan perintah tersebut terlihat, seperti pada Gambar B.21, maka ketiklah perintah flutter doctor –android-licenses ketika proses analisa telah selesai. Namun, jika output yang ditampilkan terlihat seperti pada Gambar B.22 maka proses setup android studio telah selesai.

    Gambar B.21 - Output ketika Android Licenses Belum diambil

    Gambar B.21 Output Ketika Android Licenses Belum diambil

    Gambar B.22 - Output ketika Android Licenses Telah diambil

    Gambar B.22 Output Ketika Android Licenses Telah diambil

Instalasi dan Setup Visual Studio Code

Setelah proses instalasi Flutter SDK dan software android studio berhasil dilakukan, langkah berikutnya yang harus dilakukan adalah menginstall software visual studio code yang nantinya akan digunakan pada proses praktikum. Berikut merupakan langkah-langkah dalam menginstall software android studio:

  1. Bukalah link berikut untuk mendownload software visual studio code: https://code.visualstudio.com/download

  2. Tekanlah menu download yang telah disediakan (Note: Harap menekan salah satu menu download yang disesuaikan dengan sistem operasi perangkat).

    Gambar B.23 - Halaman Website untuk Mendownload Visual Studio Code

    Gambar B.23 Halaman Website untuk Mendownload Visual Studio Code

  3. Tunggulah sampai proses download visual studio code selesai.

  4. Bukalah file visual studio code yang setelah selesai didownload

    Gambar B.24 - FIle Visual Studio Code yang telah didownload

    Gambar B.24 File Visual Studio Code yang telah didownload

  5. Tekanlah opsi “I accept the agreement” dan tombol next untuk melanjutkan proses ke tahap berikutnya.

    Gambar B.25 - Menu Setup Visual Studio Code

    Gambar B.25 Menu Setup Visual Studio Code

  6. Pilihlah lokasi direktori untuk menyimpan software visual studio code pada perangkat dan tekanlah tombol next untuk melanjutkan ketahap berikutnya.

    Gambar B.26 - Menu Configuration Location Visual Studio Code

    Gambar B.26 Menu Configuration Location Visual Studio Code

  7. Pada menu “Select Start Menu Folder” pastikan nama pada field adalah “Visual Studio Code” kemudian tekanlah tombol next.

    Gambar B.27 - Menu untuk Membuat Shortcut Aplikasi Visual Studio Code

    Gambar B.27 Menu untuk Membuat Shortcut Aplikasi Visual Studio Code

  8. Centanglah seluruh opsi yang ada pada menu “Select Additional Tasks” dan tekanlah tombol next.

    Gambar B.28 - Menu Select Additional Task

    Gambar B.28 Menu Select Additional Task

  9. Tunggulah sampai proses instalasi visual studio code selesai.

    Gambar B.29 - Proses Instalasi Visual Studio Code

    Gambar B.29 Proses Instalasi Visual Studio Code

Setelah proses instalasi selesai, centanglah opsi “Launch Visual Studio Code” dan tekanlah tombol finish untuk langsung membuka aplikasi visual studio code.