Cara Menampilkan Website di Flutter dengan Webview

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menamapilkan atau memasukan website ke dalam flutter. Ayo ikuti tutorial selengkapnya di bawah ini.

Flutter memiliki banyak sekali plugin tambahan yang memudahkan kita dalam mengembangkan aplikasi mobile dengan fitur yang dinamis. Flutter Webview adalah salah satu plugin yang disediakan oleh flutter untuk memuat tampilan web di dalam aplikasi flutter. Cara penggunaanya juga cukup mudah, bahkan tidak kalah mudah dengan webview java android studio.

Cara Menggunakan Webview pada Flutter

1. Pertama, buat project flutter baru dengan nama bebas. Kita menggunakan flutter versi null safety, dan minsdkVersion 19.

2. Buka file pubspec.yaml. Lalu tambahkan package webview_flutter: ^3.0.0 seperti contoh di bawah ini untuk mendownload package flutter webview. Setelah ditambahkan CTRL + S untuk mendownload package.

Menambahkan Package

3. Selanjutnya buka file main.dart lalu ubah dengan script di bawah ini. https://porkaone.com adalah contoh website yang akan kita tampilkan

// ignore_for_file: unused_import, import_of_legacy_library_into_null_safe, prefer_const_constructors, unnecessary_new

  import 'package:flutter/material.dart';
  import 'package:webview_flutter/webview_flutter.dart';
  
  void main() => runApp(App());
  
  class App extends StatelessWidget {
    const App({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: Text("Flutter Webview"),
            ),
            body: new WebView(
              initialUrl: "https://porkaone.com",
              javascriptMode: JavascriptMode.unrestricted,
            )),
      );
    }
  }

Semua tahapan sudah kita kerjakan, selanjutnya lakukan uji coba dengan menjalankan emulator. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Hasil Akhir

Kalian bisa melakukan improvisasi dengan menambahkan swiperefresh, indicator loading, list website dengan menggunakan listview, dan lain sebagainya.

Sekian tutorial singkat kali ini, tentang cara menampilkan website di flutter dengan webview. Semoga bermanfaat dan dapat diaplikasikan. Jika ada pertanyaan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima kasih.