WebView in Flutter



Add following plugins in pubspec.yaml file:

webview_flutter: ^2.0.4

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

void main() {
  runApp(MaterialApp(
    home: MyWebViewTutorial(),
    title: "WebView Tutorial",
  ));
}

class MyWebViewTutorial extends StatefulWidget {
  @override
  _MyFieldTutorialState createState() => _MyFieldTutorialState();
}

class _MyFieldTutorialState extends State<MyWebViewTutorial> {
  bool isLoaded = true;
  final _key = UniqueKey();

  WebViewController mycontroller;

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

  Future<bool> clickBackButton(BuildContext context) async {
    if (await mycontroller.canGoBack()) {
      mycontroller.goBack();
      return false;
    } else {
      return true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop:() =>  clickBackButton(context),
      child: Scaffold(
        appBar: AppBar(
          title: Text("WebView Tutorial"),
        ),
        body: Stack(
          children: [
            WebView(
              key: _key,
              //here is the url which you want to load
              initialUrl: "https://www.google.com/",
              //By default, JavaScript in your WebView is disabled,
              //So for enabling javascript we have to write below code
              javascriptMode: JavascriptMode.unrestricted,
              onPageFinished: (url) {
                setState(() {
                  isLoaded = false;
                });
              },
              onWebViewCreated: (WebViewController webViewController) {
                completer.future.then((value) => mycontroller = value);
                completer.complete(webViewController);
              },
            ),
            isLoaded ? Center( child: CircularProgressIndicator(),)
                : Stack(),
          ],
        ),
      ),
    );
  }
}

No comments: