Lompat ke konten Lompat ke sidebar Lompat ke footer

Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia

kucingtekno - Tutorial Flutter Indonesia dengan Membuat webview merupakan langkah awal dalam mencoba belajar membuat aplikasi android. Pada tutorial sebelumnya saya pernah menulis tentang bagaimana membuat webview di Android Studio, namun kali sedikit berbeda yaitu menggunakan Flutter. Tutorial membuat webview di Flutter bisa dibilang sangat mudah karena dibanding dengan Android Studio , coding di Flutter lebih sederhana.



Tutorial membuat WebView di Flutter akan saya mulai dengan menganggap kalian sudah paham cara instal sampai running apilikasi menggunakan Flutter. Jadi jika ada masalah dasar tentang penggunaan Flutter akan saya bahas di tutorial selanjutnya.

Cara Membuat WebView di Flutter dengan mudah ini saya praktekkan menggunakan Visual Studio Editor dan Emulator smartphone Android , berikut langkah membuat webview di flutter :

1. Buat Projek baru dengan nama terserah kalian, kemudian buka pluggin WebView di PUBSPEC.YAML


Tambahkan kode berikut di bawah cupertino_icons
flutter_webview_plugin: 0.3.0+2 
webview_flutter: 0.2.0 

2. Buat File Dart baru dengan nama tampilku.dart


setelah file tampilku.dart sudah dibuat , kemudian edit dan sesuaikan halaman web yang diinginkan dengan fornat http://namaweb lalu perhatikan juga URL dan Text yang ingin di tampilkan

url: 'https://kucingtekno.com',
      hidden: true,
      appBar: AppBar(title: Text("Kucing Tekno Com ")),



3. Edit file main.dart dan import file tampilku.dart lalu sesuaikan dengan codingnya 


Perhatikan import 'tampilku.dart'; harus sesuai dengan nama file bagian tutorial no.2 diatas


4. Coba Running dan lihat hasilnya



CODING LENGKAP TUTORIAL WEBVIEW FLUTTER :





Berikut adalah tutorial membuat webview di Flutter dengan mudah dan cepat. Semoga membantu teman-teman. Disini saya masih belajar dan jika ada kekurangan atau kesalahan silakan komentar nanti akan saya perbaiki lagi.



4 komentar untuk "Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia"

  1. return WebviewScaffold itu darimana ya?

    BalasHapus
  2. Mas, cara buat template tanpa header seperti digambar itu bagaimana?
    Biar terlihat enak saat di buat webview.
    Terimakasih atas sharing ya

    BalasHapus