ahmadajah03 Mon Dec 2020 1 year ago

Cara Install Flutter di Windows dengan Editor VS Code

Flutter adalah perangkat UI lintas platform yang dirancang untuk memungkinkan kode digunakan kembali di seluruh sistem operasi seperti iOS dan Android, sekaligus memungkinkan aplikasi untuk berinteraksi langsung dengan layanan platform yang mendasarinya. Sasarannya adalah untuk memungkinkan pengembang menghadirkan aplikasi berperforma tinggi yang terasa alami di berbagai platform, merangkul perbedaan di tempat mereka ada sambil berbagi kode sebanyak mungkin.

Selama pengembangan, aplikasi Flutter berjalan di VM yang menawarkan hot reload perubahan tanpa memerlukan kompilasi ulang penuh. Untuk rilis, aplikasi Flutter dikompilasi langsung ke kode mesin, baik instruksi Intel x64 atau ARM, atau ke JavaScript jika menargetkan web. Kerangka kerja ini bersifat open source, dengan lisensi BSD yang permisif, dan memiliki ekosistem paket pihak ketiga yang berkembang pesat yang melengkapi fungsionalitas pustaka inti.

Tinjauan ini dibagi menjadi beberapa bagian:

  1. Model lapisan : Potongan dari mana Flutter dibuat.
  2. Antarmuka pengguna reaktif : Konsep inti untuk pengembangan antarmuka pengguna Flutter.
  3. Pengantar widget : Blok penyusun dasar antarmuka pengguna Flutter.
  4. Proses rendering : Bagaimana Flutter mengubah kode UI menjadi piksel.
  5. Ringkasan penyematan platform : Kode yang memungkinkan OS seluler dan desktop menjalankan aplikasi Flutter.
  6. Mengintegrasikan Flutter dengan kode lain : Informasi tentang berbagai teknik yang tersedia untuk aplikasi Flutter.
  7. Dukungan untuk web : Komentar penutup tentang karakteristik Flutter di lingkungan browser.

Persyaratan Sistem

Untuk memasang dan menjalankan Flutter, untuk pengembangan Anda harus memenuhi persyaratan minimum berikut:

  • Sistem Operasi : Windows 7 SP1 atau yang lebih baru (64-bit), berbasis x86-64
  • Ruang Disk : 1,32 GB (tidak termasuk ruang disk untuk IDE / alat).
  • Alat : Flutter bergantung pada ketersediaan alat ini di lingkungan Anda.
    • Windows PowerShell 5.0 atau yang lebih baru (ini sudah diinstal sebelumnya dengan Windows 10)
    • Git untuk Windows 2.x, dengan opsi Gunakan Git dari Prompt Perintah Windows .

      Jika Git untuk Windows sudah diinstal, pastikan Anda dapat menjalankan git perintah dari command prompt atau PowerShell.

Dapatkan Flutter SDK

  1. Unduh paket penginstalan berikut untuk mendapatkan rilis stabil terbaru dari Flutter SDK:

    flutter_windows_1.22.4-stable.zip

    Untuk channels rilis lain, dan versi lama, lihat halaman rilis SDK .

  2. Ekstrak file zip dan tempatkan yang ada flutter di lokasi instalasi yang diinginkan untuk Flutter SDK (misalnya, C:\src\flutter).

Jika tidak ingin menginstal versi tetap dari paket penginstalan, Anda dapat melewati langkah 1 dan 2. Sebagai gantinya, dapatkan kode sumber dari repo Flutter di GitHub, dan ubah cabang atau tag sesuai kebutuhan. Sebagai contoh:

C:\src>git clone https://github.com/flutter/flutter.git -b stable

Anda sekarang siap menjalankan perintah Flutter di Flutter Console.

Perbarui path Anda

Jika Anda ingin menjalankan perintah Flutter di konsol Windows biasa, lakukan langkah-langkah berikut untuk menambahkan Flutter ke PATHvariabel lingkungan:

  • Dari bilah pencarian Mulai, masukkan 'env' dan pilih Edit variabel lingkungan untuk akun Anda .
  • Di bawah Variabel pengguna, periksa apakah ada entri yang disebut Path :
    • Jika entri ada, tambahkan jalur lengkap untuk flutter\bin digunakan ;sebagai pemisah dari nilai yang sudah ada.
    • Jika entri tidak ada, buat variabel pengguna baru Path dengan nama path lengkap flutter\bin sebagai nilainya.

Anda harus menutup dan membuka kembali jendela konsol yang ada agar perubahan ini diterapkan.

Run flutter doctor

Dari jendela konsol yang memiliki direktori Flutter di jalurnya (lihat di atas), jalankan perintah berikut untuk melihat apakah ada dependensi platform yang Anda perlukan untuk menyelesaikan penyiapan:

C:\src\flutter>flutter doctor

Perintah ini memeriksa environment Anda dan menampilkan laporan status penginstalan Flutter Anda. Periksa output dengan hati-hati untuk perangkat lunak lain yang mungkin perlu Anda instal atau tugas lebih lanjut yang harus dilakukan (ditampilkan dalam teks tebal ).

Sebagai contoh:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

Bagian berikut menjelaskan cara melakukan tugas ini dan menyelesaikan proses penyiapan. Setelah Anda menginstal dependensi yang hilang, Anda dapat menjalankan flutter doctor perintah lagi untuk memverifikasi bahwa Anda telah mengatur semuanya dengan benar.

Penyiapan Android

Instal Android Studio

  1. Unduh dan instal Android Studio .
  2. Mulai Android Studio, dan masuk ke 'Android Studio Setup Wizard'. Ini menginstal Android SDK terbaru, Android SDK Command-line Tools, dan Android SDK Build-Tools, yang dibutuhkan oleh Flutter saat mengembangkan untuk Android.

Siapkan emulator Android

Untuk bersiap menjalankan dan menguji aplikasi Flutter Anda di emulator Android, ikuti langkah-langkah berikut:

  1. Aktifkan akselerasi VM di komputer Anda.
  2. Luncurkan Android Studio , klik ikon AVD Manager , dan pilih Buat Perangkat Virtual…
    • Di Android Studio versi lama, Anda harus meluncurkan Android Studio> Tools> Android> AVD Manager dan memilih Create Virtual Device… . ( Submenu Android hanya ada saat berada di dalam proyek Android.)
    • Jika Anda tidak membuka proyek, Anda dapat memilih Configure> AVD Manager dan pilih Create Virtual Device…
  3. Pilih definisi perangkat dan pilih Berikutnya .
  4. Pilih satu atau beberapa gambar sistem untuk versi Android yang ingin Anda tiru, dan pilih Berikutnya . Gambar x86 atau x86_64 disarankan.
  5. Di bawah Emulated Performance, pilih Hardware - GLES 2.0 untuk mengaktifkan akselerasi hardware .
  6. Pastikan konfigurasi AVD sudah benar, dan pilih Selesai .

    Untuk detail tentang langkah-langkah di atas, lihat Mengelola AVD .

  7. Di Pengelola Perangkat Virtual Android, klik Jalankan di bilah alat. Emulator memulai dan menampilkan kanvas default untuk versi OS dan perangkat yang Anda pilih.

Siapkan editor

Instal VS Code

VS Code adalah editor ringan dengan eksekusi aplikasi Flutter dan dukungan debug.

Instal plugin Flutter dan Dart

  1. Mulai VS Code.
  2. Panggil View>Command Palette… .
  3. Ketik "install", dan pilih Extensions: Install Extensions.
  4. Ketik "flutter" di bidang pencarian ekstensi, pilih Flutter di daftar, dan klik Install . Ini juga menginstal plugin Dart yang diperlukan.

Validasi penyiapan Anda dengan Flutter Doctor

  1. Panggil View>Command Palette… .
  2. Ketik "doctor", dan pilih Flutter: Run Flutter Doctor .
  3. Tinjau output di panel OUTPUT untuk masalah apa pun. Pastikan untuk memilih Flutter dari dropdown di Output Options yang berbeda.

Buat app

  1. Panggil View>Command Palette .
  2. Ketik "flutter", dan pilih Flutter:New Project .
  3. Masukkan nama proyek, seperti myapp, dan tekan Enter .
  4. Buat atau pilih direktori induk untuk folder proyek baru.
  5. Tunggu hingga pembuatan proyek selesai dan main.dart file muncul.

Perintah di atas membuat direktori project Flutter myappyang berisi aplikasi demo sederhana yang menggunakan Komponen Material.

Jalankan aplikasinya

Untuk menjalankanya di VS Code silahkan buka emulatornya terlebih dahulu di android studion dan masuk ke Project VS Code dan tekan F5. jika berhasil makan akan seperti gambar dibawah ini.

Terimakasih sudah membaca.

install flutter windows with vs code