How to Open a URL using WebView in Flutter

Sometimes, we may want to open a specific web page inside our mobile app so that users don’t feel they are opening a website. In such situations, a webview inside the app will be extremely useful. In this flutter tutorial, I will show you how to open a URL using WebView in flutter.

First of all, flutter doesn’t have a dedicated inbuilt webview widget. Fortunately, there’s a plugin named webview flutter which is developed by the official flutter development team.

As webview flutter is a plugin you need to add it’s dependency in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: 1.0.1

Now, you can easily create a webview in flutter as given below.

WebView(
      initialUrl: 'https://flutterforyou.com',
    );

In Android platform you have to set WebView.platform = SurfaceAndroidWebView(); . Also note that SurfaceAndroidWebView requires minimum of API level 19.

Go through the following flutter webview example to get the full idea.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';


void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Webview Example',
      home: WebviewExample(),
    );
  }
}

class WebviewExample extends StatefulWidget {
  WebviewExample({Key key}) : super(key: key);

  @override
  _WebviewExampleState createState() => _WebviewExampleState();
}

class _WebviewExampleState extends State<WebviewExample> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      javascriptMode: JavascriptMode.unrestricted,
      initialUrl: 'https://flutter.dev',
    );
  }
}

Following is the output of this flutter tutorial.

I hope this flutter tutorial will be helpful for you.