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.
Table of Contents
Persyaratan
Untuk membuat aplikasi Flutter dengan dukungan web, Anda memerlukan perangkat lunak berikut:
- Flutter SDK. Lihat petunjuk penginstalan Flutter SDK .
- Chrome ; debugging aplikasi web membutuhkan browser Chrome.
- Opsional: IDE yang mendukung Flutter. Anda dapat menginstal Android Studio , IntelliJ IDEA , atau Visual Studio Code dan menginstal plugin Flutter dan Dart untuk mengaktifkan dukungan bahasa dan alat untuk pemfaktoran ulang, menjalankan, debugging, dan memuat ulang aplikasi web Anda dalam editor. Lihat menyiapkan editor untuk lebih jelasnya.
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