Panduan Instalasi Flutter

 Flutter

Tutorial Instalasi Flutter

Sebelum memulai tutorial ini, pastikan Anda sudah menginstal Visual Studio Code (VS Code). Jika belum silahkan download dari situs berikut https://code.visualstudio.com/


  1. Buka Visual Studio anda, kemudian klik bagian extensions. Di searchbar cari “flutter”

  1. Pilih yang paling atas dan klik install

  1. Buka Command Palette dengan cara klik View>Command Palette atau bisa dengan shortcut Ctrl+Shift+P. Di command Palette ketik “flutter” lalu pilih “Flutter: New Project”. 

  1. Setelah itu akan muncul pop up di pojok kanan bawah, lalu pilih “Download SDK”

  1. Silahkan pilih dimana anda akan meletakkan file downloadnya, kemudian klik “Clone Flutter”, tunggu hingga proses download selesai.

  1. Setelah proses download selesai, akan muncul kembali pop up di pojok kanan bawah, silahkan klik “Add SDK to PATH”

  1. Kemudian akan muncul notif pop up seperti gambar dibawah, klik “Run pub get”

  1. Flutter sudah berhasil terinstall di komputer anda.


Tutorial Membuat Proyek Flutter

  1. Buka Visual Studio anda, buka Command Palette (Ctrl+Shift+P), ketikan “Flutter: New Project”

  1. Pilih jenis template yang ingin anda gunakan, disini saya memilih “Application”

  1. Pilih lokasi folder proyek akan ditempatkan, disini saya membuat folder baru bernama “HelloWorldFlutter”

  1. Masukkan nama proyek anda, disini saya menamai proyek dengan “flutter_application_helloworld”, perlu diingat bahwa nama proyek hanya boleh menggunakan huruf kecil dan underscore( _ ), setelah itu klik enter. Tunggu hingga proses selesai.

  1. Jika muncul pop up seperti gambar dibawah, klik “Allow”

  1. Buka file lib/main.dart , kemudian ganti line 33 dari ‘Flutter Demo Home Page’ menjadi ‘Hello World!!’, kemudian simpan perubahan (Ctrl+S)

  1. Jalankan Proyek anda dengan buka terminal jalankan perintah “flutter run” dan tunggu beberapa saat.

  1. Pilih device mana yang ingin anda tampilkan, disini saya memilih Chrome [2].

  1. Tab Chrome akan terbuka di layar anda dan menampilkan halaman dengan tulisan “Hello World!!”


Tutorial Instalasi Lainnya :

Home    |    Android Studio    |    XCode    |    React Native    |    Flutter    |    KMM

Komentar

Posting Komentar

Postingan populer dari blog ini

Panduan Lengkap Instalasi 5 Lingkungan Pengembangan Mobile: Android Studio, Xcode, React Native, Flutter, dan KMM

About Tutorial ini dibuat untuk mendokumentasikan proses set-up dan konfigurasi lima (5) lingkungan pengembangan aplikasi perangkat bergerak (mobile) yang paling populer dan relevan di industri saat ini. Dalam dunia pengembangan mobile yang terus berkembang, menguasai berbagai stack teknologi adalah keharusan. Oleh karena itu, kita akan menyelami proses instalasi dan verifikasi untuk lima platform utama: Android Studio (Pengembangan Native Android dengan Kotlin) XCode (Pengembangan Native iOS dengan Swift) React Native (Pengembangan Cross-Platform ) Flutter (Pengembangan Cross-Platform ) Kotlin Multiplatform Mobile (KMM) (Pengembangan Multiplatform ) Tujuan utama dari panduan ini adalah memberikan langkah-langkah yang terperinci dan mudah diikuti, mulai dari mengunduh installer hingga berhasil menjalankan proyek pertama bernama "HelloWorld" di setiap lingkungan. Mari kita mulai instalasi! Android Studio     |     XCode     |     React Native ...
Baca selengkapnya

Panduan Instalasi Android Studio

Gambar
Android Studio Android Studio adalah Integrated Development Environment (IDE) resmi yang direkomendasikan oleh Google untuk pengembangan aplikasi Android Native. IDE ini dibangun di atas IntelliJ IDEA dan menyediakan semua alat yang diperlukan, termasuk editor kode, debugger , emulator, hingga tool pengujian performa.
Baca selengkapnya