How to Implement Webview in flutter? – Load website in flutter webview plugin

Hi Guys Welcome to Proto Coders Point, This project is a Beginner starting point for a Flutter application, Here we will see how can we implement webview in flutter web app development using webview plugin.

Demo on Flutter Webview

Video Tutorial – Convert Website to app

Introduction on Flutter WebView 

Presenting a web view is pretty common in mobile apps. In Flutter, this is done by using the webview_flutter package.

Use this package Webview_Flutter as a library

If you want to use flutter webview widget you need to add some dependencies

Add this to your package’s pubspec.yaml file:

dependencies:
  webview_flutter: ^0.3.15+1

Then make sure with this indentation, sight empty space in pubspec.yaml file might give you error.

Import flutter webview widget package

Now in your Dart code (main.dart), you need to import  widget packages, so that you can use flutter webview in you class file.

import 'package:webview_flutter/webview_flutter.dart';

Let’s start implementing webview in your flutter application.

Create a new Flutter project  in android studio.

Give a name to your flutter application. in my case i have name it as flutter_webview. you can name it anything it left to you.

So our flutter project is build and ready to implement our flutter code.

But then are flutter default code added into our flutter dart code. you can delete all the code from main.dart class and copy paste the code i provide you below.

Add below code in your project

Webview widget snippet

WebView(
          key: Key("webview"),
          initialUrl: flutterUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController)
          {
            _controller = webViewController;
          },

First, the key parameter allows the Flutter widget tree to refer to this widget easily using a unique key created via Flutter’s UniqueKey() method you’ll soon see in the full example below.

javascriptMode simply allows us to control what kind of Javascript can be run in our web view.

Finally, initialUrl is the URL we want to display.

The important gotcha here is that we’ll need to use a StatefulWidget because it appears that if we use a StatelessWidget, the WebView will not load properly.

We pass in a url parameter to this widget, which is used in the state of our StatefulWidget.

Full flutter webview source Code

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Webview Demo';
    return new MaterialApp(
      title: title,
      home: new MyAppHomePage(),
    );
  }
}

class MyAppHomePage extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

const String flutterUrl = "https://flutter.dev/";
const String wikiUrl = "https://es.wikipedia.org";

class _MyAppState extends State<MyAppHomePage> {
  WebViewController _controller;

  _back() async {
    if (await _controller.canGoBack()) {
      await _controller.goBack();
    }
  }

  _forward() async {
    if (await _controller.canGoForward()) {
      await _controller.goForward();
    }
  }

  _loadPage() async {
    var url = await _controller.currentUrl();
    _controller.loadUrl(
      url == "https://flutter.dev/"
          ? 'https://es.wikipedia.org'
          : "https://flutter.dev/",
    );

    print(url);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
        actions: <Widget>[
          IconButton(
            onPressed: _back,
            icon: Icon(Icons.arrow_back_ios),
          ),
          IconButton(
            onPressed: _forward,
            icon: Icon(Icons.arrow_forward_ios),
          ),
          SizedBox(width: 10),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadPage,
        child: Icon(Icons.refresh),
      ),
      body: SafeArea(
        child: WebView(
          key: Key("webview"),
          initialUrl: flutterUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller = webViewController;
          },
        ),
      ),
    );
  }
}

In the app bar I have used 2 icons that will function as a back and forword button when we navigate to some other url in out webview onWebView controller will take care of this process.

Here there is also a reload button i.e floatingActionButton that will reload the initial url of the application.

Hope this article was useful for you project.

keep visiting proto coders point

Recommended Post

check out how to add bottomNavigationbar

profile page UI Design 

Android – How to Convert Website into Android App ?