How to Display a Website in Flutter with Webview

Hello everyone, back again at sahretech. On this occasion, we will learn how to display or enter a website into Flutter. Let's follow the full tutorial below.

Flutter has lots of additional plugins that make it easier for us to develop mobile applications with dynamic features. Flutter Webview is one of the plugins provided by Flutter to load webviews in the Flutter application. How to use it is also quite easy, even easier than the Java Android Studio webview.

How to Use Webviews in Flutter

1. First, create a new flutter project with a free name. We are using null safety version of flutter, and minsdkVersion 19.

2. Open the pubspec.yaml file. Then add the webview_flutter: ^ 3.0.0 like the example below to download the flutter webview package. After adding CTRL + S to download the package.

Menambahkan Package

3. Then open the main.dart file then change it with the script below. https://porkaone.com is an example of the website that we will display. You can change it with another website address

// 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,
            )),
      );
    }
  }

We have done all the steps, then do a trial by running the emulator. If successful, it will look like the image below.

Hasil Akhir

You can improvise by adding swiperefresh, loading indicators, listing websites using listview, and so on.

That's all for this short tutorial, about how to display a website in flutter with webview. Hopefully useful and can be applied. If you have questions, please ask directly in the comments column below. That is all and thank you.