Cara Menginstall Flutter dan Menjalankan Aplikasi Pertama Kali
Berjumpa lagi dengan Saya Nanda Adisaputra, S.Kom. Pada kesempatan kali ini Saya akan sharing bagaimana cara menginstall Flutter dan menjalankan aplikasi pertama kali untuk pemula.
Flutter merupakan teknologi milik Google untuk membuat aplikasi dengan menggunakan bahasa dart dan mempunyai user interface yang baik, serta dapat di compile secara native ke dalam aplikasi mobile, web, dan desktop hanya dari satu basis kode.
Sebagian dari temen-teman yang baru belajar flutter pasti beberapa ada yang kebingungan, bagaimana sih kak caranya menginstall dan menjalankan aplikasi pertama kali menggunakan Flutter ? Nah kebetulan sekali pada tutorial kali ini, Saya akan membahas langkah -langkah menginstall hingga menjalankan aplikasi Flutter pertama kali. Yuk kita bahas sama”.
- Buka website https://www.oracle.com/java/technologies/downloads/#jdk19-windows kemudian download x64 Installer https://download.oracle.com/java/19/latest/jdk-19_windows-x64_bin.exe ( sha256) atau bisa download menggunakan link berikut ini :
2. Install JDK-19 yang telah berhasil di download sebelumnya. Caranya cukup mudah dengan klik next , next , dan next sampai JDK telah berhasil terinstall.
3. Kemudian Search di window dengan kata kunci env. Kemudian pilih edit the system environment variables
4. Selanjutnya pilih tab Advanced -> Klik Environment Variables -> Klik New untuk membuat path baru -> Masukkan nama variable dengan nama JAVA_HOME dan isikan value variable dengan alamat dimana tempat jdk tersebut kalian install -> Klik Ok ->Klik Ok -> Klik Ok
Catatan : Tanpa ; untuk variable value di JAVA_HOME. Jika ada ; maka akan error.
5. Langkah selanjutnya Kita tambahkan %JAVA_HOME%\bin dibagian Path dengan cara double click bagian variables Path. Kemudian klik Ok -> Klik Ok dan Klik Ok sekali lagi.
6. Langka selanjutnya tambahkan alamat dimana javapath berada di variable Path , caranya hampir sama dengan langkah nomor 5 diatas.
Selanjutnya silahkan Restart Laptop kalian
Kemudian setelah berhasil merestart laptop kalian , Buka Command Prompt ( CMD ) dan ketikan java — version . Nah sekarang untuk JDK sudah berhasil terinstall dan di daftarkan ke system environment variables.
Setelah Kita sudah berhasil menginstall , mengkonfigurasi JDK maka langkah berikutnya Kita download Flutter SDK dan menambahkan juga ke system environment variables seperti pada langkah langkah dibawah ini.
7. Buka website https://flutter.dev/ kemudian klik Get started dan pilih install untuk Operating System Windows, MacOS, Linux, atau Chrome OS. Disini Saya akan menggunakan Operating System Window.
atau dapat download melalui link berikut ini
8. Kemudian lihat System requirements nya pastikan laptop / komputer kalian memenuhi minimum system requirements yang diperlukan.
9. Langkah selanjutnya Kalian download Flutter SDK dengan klik flutter_windows_2.0.3-stable.zip. Kemudian Klik simpan, dan tunggu hingga proses download nya selesai.
10. Langkah selanjutnya pindahkan file zip yang telah didownload ke data D, kemudian extract file flutter.zip nya.
11. Langkah selanjutnya Klik Control Panel -> User Accounts -> User Accounts -> Change my environment variables ->Cari variable path -> Double klik pada variable path -> Tambahkan path baru ->Paste kan path flutter yang telah di copy dan klik ok -> klik ok
Variable : Path
Value : D:\flutter\bin
Langkah berikutnya Restart Laptop kalian terlebih dahulu
Setelah proses restart selesai, selanjutnya ketik flutter doctor — android-licenses di Commad Prompt ( CMD ). Jika masih ERROR : JAVA_HOME is not set and no ‘java’ command could be found in your PATH.
Maka kalian perlu kembali ke langkah pertama mengenai konfigurasi JDK, karena mungkin ada langkah dituturial ini yang terlewat.
Kemudian ketik flutter doctor lagi.
Pada kondisi saat ini , masih ada beberapa yang warning .Mari Kita solve problem tersebut.
Silahkan download dan install Google Chrome sebagai berikut
Kemudian ketik flutter doctor lagi. Maka untuk warning chrome sudah solve.
Text Editor yang dapat kalian gunakan untuk membuat project Flutter diantaranya:
a. Visual Studio
Silahkan download dan install di Laptop / Komputer Kalian
b. Android Studio
Silahkan download dan install di Laptop / Komputer Kalian
https://developer.android.com/studio
6. Setelah Kalian berhasil mendownload dan menginstall Visual Studio dan Android Studio. Langkah selanjutnya Buka android studio. Setelah android studio terbuka, klik Configure -> Settings -> Path Variables -> Klik icon tambah -> Input name dan value -> Klik Ok ->Klik Ok.
7. Kemudian pastikan SDK Android Studio , Plugin Flutter dan Dart telah terinstall di Android Studio.
Pastikan juga Plugin Flutter dan Dart telah terinstall di Visual Studio.
8. Langkah selanjutnya buka CMD kemudian ketik flutter doctor
Masih ada warning ya teman-teman, Tenang saja teman-teman. Kita akan solve warning tersebut dengan cara
ketik flutter doctor — android-licenses, kemudian enter
Jika terdapat pilihan
Accept ? ( y / N ) :
Ketik y kemudian enter , lakukan seperti ini terus hingga muncul
All SDK package licenses accepted
Seperti pada gambar di bawah ini.
Sekarang coba lakukan hal yang sama di terminal android studio seperti gambar di bawah ini.
Selain di terminal android studio , Kalian juga bisa melakukan pengecekan di Visual Studio seperti pada gambar di bawah ini.
Bagaimana kalau android studio tidak terdeteksi , [!] Android Studio ( not installed ) ?
Kita perlu konfigurasi terlebih dahalu dengan memberi tahu letak alamat android studio nya sebagai berikut.
Gunakan perintah flutter config — android-studio-dir=”C:\Program Files\Android\Android Studio” pada Command Prompt seperti pada gambar dibawah ini.
Apabila masih seperti dibawah ini.
Maka copy All Content of “jbr” Folder into the “jre” folder.
Kemudian paste kan ke dalam folder jre
Nah, Kita sudah menyiapkan alat tempurnya , sekarang Kita akan membuat project Flutter dan menjalankan nya aplikasi Flutter untuk pertama kali.
Berikut tampilan keseluruhan yang ada di System Environment Variables yang telah Kita tambahkan sebelumnya.
9. Langkah pertama untuk menjaankan aplikasi Flutter pertama kali tentunya membuka android studio, kemudian klik Create New Flutter Project.
10. Pilih Flutter Application, Kemudian Klik Next.
11. Pilih Flutter SDK path arahkan ke D:\Flutter\flutter . Kemudian Klik Next.
12. Nah sampai disini Kalian dapat mengubah package name dari awalnya secara default example dengan nama kalian. Kemudian Klik Finish.
13. Project Flutter berhasil dibuat. Sampai disini kalian dapat mengubah, menambahkan source code sesuai kebutuhan sistem yang diminta client.
14. Kita dapat melakukan running menggunakan Chrome seperti pada gambar dibawah ini.
15. Selain Kita dapat menjalankan aplikasi menggunakan Chrome , Kita juga dapat menjalankan aplikasi nya menggunakan emulator android seperti pada gambar dibawah ini.
Lalu bagaimana Jika Saya ingin menggunakan text editor Visual Studio kak ? Tenang saja, Disini Kita juga akan belajar bagaimana menjalankan Project Flutter pertama Kali di Visual Studio. Yuk Kita bahas sama-sama.
16. Buka aplikasi Visual Studio yang telah kalian install, kemudian klik Terminal -> didalam terminal ketikan flutter create basic_flutter ->kemudian enter.
17. Langkah selanjutnya klik File -> Open Folder -> Pilih file folder yang telah Kita buat di terminal->klik select folder.
18. Project Flutter berhasil dibuka di Visual Studio
19. Kita akan running projectnya seperti pada gambar dibawah ini.
Sekian tutorial singkat dari Saya. Jika ada pertanyaan silahkan tinggal kan kalimat di kolom komentar, semoga bermanfaat…
