To show Webview inside a Mobile app is important. So in the Flutter app, we can implement WebView with help of Webview_flutter package. BTW webview_flutter package maintained by the official Flutter Team. you can Show Any Webpage inside Webview Widgets, and importing WebView flutter plugins into Flutter app is Super Easy.

What is Webview?

The WebView is a browser inside of a mobile application that use to display Web Content on Native apps. specifically, you can show Web pages Or Website inside your Mobile Application by using Webview.

Lets Start

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

💻 Installation

First, you will need to add package name webview_flutter

In the dependencies: section of your pubspec.yaml, add the following lines as :

webview_flutter: ^0.3.18+1

Now run Flutter package get in your terminal which we’ll install flutter_offline package.

⚡️ Import

import ‘package:webview_flutter/webview_flutter.dart’;

We need to Create Simple main.dart file to contain our MyHomePage widget

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.deepPurple
        ),
      home: MyHomePage(),
    );
  }
}

The MyHomePage the widget will contain Simple Raised Button with an Onpressed property

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true
        title: Text("WebView Example"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.deepPurple,
          child: Text("Visit the Webpage",
          style: Textstyle(color: Colors.white),
          ),
          onPressed: () {},
        ),
      ),
    );
  }
}

After creating MyhomePage Widget, let’s Create on StatefulWidget and give a name as WebViewFlutter which will help us to Show Webview in Flutter app

final Completer<WebViewController> _controller =
      Completer<WebViewController>();

Above Code Snippet code used to controller WeViewController in a flutter

import 'dart:async';

import 'package:flutter/material.dart';
//Webview in flutter
import 'package:webview_flutter/webview_flutter.dart';

class WebViewFlutter extends StatefulWidget {
  final String websiteName;
  final String websiteUrl;

  const WebViewFlutter({Key key, this.websiteName,this.websiteUrl})
      : super(key: key);

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

class _WebViewFlutterState extends State<WebViewFlutter> {
  final Completer<WebViewController> _controller =
               Completer<WebViewController>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.websiteName),
      ),
      body: WebView(
        initialUrl: widget.websiteUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),
    );
  }
}

Now We want to Navigate on the button Tap will open new webView Widget. So let’s Update our RaisedButton from the MyHomePage Widget

body: Center(
        child: RaisedButton(
          child: Text("Visit the Webpage"),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
                builder: (BuildContext context) => WebViewFlutter(
                      websiteName: "AllTechSavvy.com",
                      websiteUrl: "https://alltechsavvy.com",
                    )));
          },
        ),
      ),

Our 📷 Final App will look like this:

webview in flutter

You can see the full source code of the project here.

🤝 Show Some Support

If you liked the app, show some love Here  ⭐️

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything in the video, leave me a comment and I’ll do my best to answer it.

Best tutorial to learn Flutter