Menjalankan di Web

 Selain platform mobile, Flutter juga bisa berjalan pada web browser. Dalam proses pengembangan, untuk keperluan debugging kita perlu menggunakan Google Chrome sebagai browser. Sejak Flutter versi 2.0 Flutter Web sudah memasuki versi stable sehingga bisa digunakan secara langsung. Jika menggunakan versi di bawahnya, Anda perlu mengaktifkan channel beta terlebih dahulu. Silakan ikuti langkahnya pada blog berikut.

Untuk menambahkan dukungan web pada project Anda, jalankan perintah berikut melalui terminal dari lokasi project:

  1. flutter config --enable-web
  2. flutter create .

Setelah konfigurasi dan proses re-create berhasil, folder web akan ditambahkan ke dalam folder project Anda. Di dalam folder ini akan berisi berkas html dan konfigurasi web lainnya. Anda bisa mencoba menjalankan aplikasi web Flutter ini dengan memilih target device chrome pada IDE yang Anda gunakan.

Android Studio:

202104252011429a4508096c53449e20e76a7a33b41440.jpeg

Visual Studio Code:

202104252012069a02a5b90f7d7dded25bad126016cee0.jpeg

Ketika target device Chrome sudah terpilih seperti di atas, Anda dapat menjalankan aplikasi dengan cara yang sama seperti ketika menjalankannya pada platform mobile. Jika Anda ingin menjalankan melalui terminal, maka perintahnya adalah seperti ini:

  1. flutter run -d chrome

Setelah proses build selesai, jendela browser akan muncul dan menampilkan aplikasi Anda:

dos:8873a16418e2fd896618efbc6923ac7720220328145140.png

Pada Flutter Web, perlu diperhatikan bahwa Flutter memiliki dua jenis renderer yang berbeda, keduanya antara lain:

  • HTML renderer
    Renderer ini menggunakan kombinasi elemen HTML, CSS, Canvas, dan SVG. Jenis renderer ini memiliki ukuran unduhan yang lebih kecil.

  • CanvasKit renderer
    Renderer ini bekerja dengan cara yang sama dengan platform mobile atau desktop. CanvasKit renderer memiliki performa yang lebih tinggi, tetapi akan menambahkan ukuran hingga sekitar 2 MB.

Anda dapat menentukan renderer yang digunakan dengan menambahkan parameter pada command line, contohnya seperti berikut:

  1. flutter run -d chrome --web-renderer html
  2. flutter run -d chrome --web-renderer canvaskit

Jika Anda tidak mendefinisikan parameter --web-renderer, maka renderer akan menggunakan mode auto (default). Opsi ini akan menggunakan HTML renderer ketika aplikasi berjalan di browser mobile dan menggunakan CanvasKit saat aplikasi berjalan di browser desktop.

Popular posts from this blog

Build APK

Image
  Project Flutter yang telah dibuat dapat kita build menjadi berkas .apk yang dapat berjalan di Android. Build APK adalah suatu proses membungkus aplikasi flutter menjadi format .apk yang nantinya untuk diinstal pada perangkat Android. Berikut tahapan ketika build aplikasi Flutter ke APK. AndroidManifest.xml Sebelum mem-build APK, kita akan mengatur berkas  android/app/src/main/AndroidManifest.xml .  AndroidManifest.xml  merupakan sebuah berkas yang berisikan informasi mengenai aplikasi Android yang akan di- build . Informasi-informasi tersebut berupa nama aplikasi, ikon,  permission ,  screen orientation , dan lain-lain. Isi dari  AndroidManifest.xml  seperti berikut: <manifest xmlns:android = "http://schemas.android.com/apk/res/android"      package = "id.eudeka.samples" >      <application          android:name = "io.flutter.app.FlutterApplication"        ...
Read more

Web Deployment

  Pada materi ini kita akan mempelajari bagaimana melakukan build aplikasi flutter untuk platform web. Sama seperti platform android dan ios, informasi untuk pengaturan aplikasi berada pada folder web. Setting Nama Aplikasi Untuk mengatur nama aplikasi, kita bisa membuka berkas  manifest.json . Konfigurasi untuk nama aplikasi dapat Anda temukan dan ubah pada key  name  dan  short_name . {     "name" : "wisata_bandung" ,     "short_name" : "wisata_bandung" } Setting Icon Aplikasi Platform web juga membutuhkan icon dalam berbagai ukuran. Icon untuk web dapat Anda taruh pada folder  /web/icons . Kemudian, Anda perlu mendaftarkannya pada berkas  manifest.json . {     ...     "icons" : [         {             "src" : "icons/Icon-192.png" ,             "sizes" : "192x192" ,             "type" : "image/png...
Read more

Generic

Image
Jika Anda perhatikan pada dokumentasi  collection  seperti  List , sebenarnya tipe dari  List  tersebut adalah  List<E> . Tanda  <...>  ini menunjukkan bahwa  List  adalah tipe  generic , tipe yang memiliki tipe parameter. Menurut  coding convention  dari Dart, tipe parameter dilambangkan dengan satu huruf kapital seperti  E ,  T ,  K , atau  V . Secara umum  generic  merupakan konsep yang digunakan untuk menentukan tipe data yang akan kita gunakan. Kita bisa mengganti tipe parameter  generic  pada Dart dengan tipe yang lebih spesifik dengan menentukan  instance  dari tipe tersebut. Sebagai contoh, perhatikan  List  yang menyimpan beberapa nilai berikut: List <int> numberList = [ 1 , 2 , 3 , 4 , 5 ]; Tipe parameter yang digunakan pada variabel list di atas adalah  int , maka nilai yang bisa kita masukkan adalah nilai dengan tipe  ...
Read more