ahmadajah03 Sun Dec 2020 1 year ago

Membangun aplikasi web dengan Flutter

Halaman ini mencakup langkah-langkah berikut untuk memulai dengan dukungan web:

  • Konfigurasikan flutteralat untuk dukungan web.
  • Buat proyek baru dengan dukungan web.
  • Jalankan proyek baru dengan dukungan web.
  • Buat aplikasi dengan dukungan web.
  • Tambahkan dukungan web ke proyek yang ada.

Persyaratan

Untuk membuat aplikasi Flutter dengan dukungan web, Anda memerlukan perangkat lunak berikut:

Untuk informasi lebih lanjut, lihat FAQ web .

Buat proyek baru dengan dukungan web

Anda dapat menggunakan langkah-langkah berikut untuk membuat proyek baru dengan dukungan web.

Set up

Jalankan perintah berikut untuk menggunakan versi terbaru Flutter SDK dari saluran beta dan mengaktifkan dukungan web:

 flutter channel beta
 flutter upgrade
 flutter config --enable-web

Setelah web diaktifkan, flutter devices perintah tersebut mengeluarkan Chrome perangkat yang membuka browser Chrome dengan aplikasi Anda berjalan, dan Web Serveryang menyediakan URL yang melayani aplikasi.

flutter devices
2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome     • chrome     • web-javascript • Google Chrome 81.0.4044.129

Setelah mengaktifkan dukungan web, mulai ulang IDE Anda. Anda sekarang harus melihat Chrome (web) dan Web Server (web) di tarik-turun perangkat.

Create and run

Membuat proyek baru dengan dukungan web tidak berbeda dengan membuat proyek Flutter baru untuk platform lain.

Setelah Anda mengonfigurasi lingkungan Anda untuk dukungan web, Anda dapat membuat dan menjalankan aplikasi web baik di IDE atau dari baris perintah.

IDE

Setelah Anda mengonfigurasi lingkungan untuk mendukung web, pastikan Anda memulai ulang IDE jika sudah berjalan.

Buat aplikasi baru di IDE Anda dan secara otomatis membuat versi iOS, Android, dan web dari aplikasi Anda. (Dan macOS, juga, jika Anda telah mengaktifkan dukungan desktop .) Dari tarik-turun perangkat, pilih Chrome (web) dan jalankan aplikasi Anda untuk melihatnya diluncurkan di Chrome.

Command line

Untuk membuat aplikasi baru yang menyertakan dukungan web (selain dukungan seluler), jalankan perintah berikut, menggantikan myappdengan nama proyek Anda:

 flutter create myapp
 cd myapp

Untuk menyajikan aplikasi Anda dari localhost dalam Chrome, masukkan yang berikut dari bagian atas paket:

flutter run -d chrome

The flutter runperintah meluncurkan aplikasi menggunakan compiler builder di browser Chrome.

Build

Jalankan perintah berikut untuk menghasilkan build rilis:

flutter build web

Sebuah rilis build menggunakan dart2js (bukan kompiler pengembangan ) untuk menghasilkan satu file JavaScript main.dart.js. Anda bisa membuat build rilis menggunakan mode rilis ( flutter run --release) atau dengan menggunakan flutter build web. Ini mengisi build/webdirektori dengan file yang dibangun, termasuk assetsdirektori, yang perlu disajikan bersama.

Untuk informasi lebih lanjut, lihat Membuat dan merilis aplikasi web .

Tambahkan dukungan web ke aplikasi yang sudah ada

Untuk menambahkan dukungan web ke proyek yang ada, jalankan perintah berikut di terminal dari root direktori proyek :

flutter create .

buil web app with flutter flutter