flutter webview plugin tutorial （flutter_webview_plugin）

The Flutter webview plugin is used to load web pages inside the app. It differs from the Flutter url_launcher plugin in that the former simply opens the web page inside the app, and the url_launcher calls the default function of the phone to do things, such as calling the default browsing. Open the web page (bounced out of the app), call the default dialing function to call, call the mail function to send mail to a mailbox, etc., the latter function more.

Flutter webview plugin's full name is flutter_webview_plugin (click to view official website documentation), which is a web page plugin developed by Flutter's official website. So how do we use the flutter webview plugin?

1：Install Flutter WebView Plugin

First add the dependencies of the flutter webview plugin under the "dependencies" element in the pubspec.yaml file. If there is a new version, please check the official website, the code is as follows:

dependencies:
  flutter_webview_plugin: ^0.3.0+2

Import the "flutter_webview_plugin" package at the top of the Dart file. The code is as follows:

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

2：Flutter WebView simple instructions

Route implementation:

Flutter needs to first understand what is Route, route is to jump from one page to another, give the page a url with a "name", and then use navigator to open the route name, the code is as follows:

routes: {
"/webview": (_) => WebviewScaffold(
   url: url,
   appBar: AppBar(
  title: Text("打开的网页"), //english means:opened web page
   ),
   withJavascript: true,
   withLocalStorage: true,
   withZoom: true,
 )
},

Navigator loads the page:
After the Route is implemented, we can use the Navigator object to load the page. The code is as follows:

Navigator.of(context).pushNamed("/webview");

3：Flutter WebView complete code and effect display

Use the flutter web view plugin to open the URL inside the "TextField" input box control. Clicking the button will perform the operation of opening the webpage. The complete code is as follows:

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

String url = 'http://www.baidu.com';

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

class MyApp extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Weview',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Webview'),
      routes: {
        "/webview": (_) => WebviewScaffold(
              url: url,
              appBar: AppBar(
                title: Text("打开的网页"),
              ),
              withJavascript: true,
              withLocalStorage: true,
              withZoom: true,
            )
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class NewWeb extends State<MyHomePage> {
  final webviewPlugin = FlutterWebviewPlugin();

  TextEditingController controller = TextEditingController(text: url);

  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("首页Webview"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10.0),
              child: TextField(
                controller: controller,
              ),
            ),
            RaisedButton( //按钮点击事件
              child: Text("Open Webview"),
              onPressed: () {
                Navigator.of(context).pushNamed("/webview");
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
// TODO: implement initState
    super.initState();
    webviewPlugin.close();
    controller.addListener(() {
      url = controller.text;
    });
  }

  @override
  void dispose() {
// TODO: implement dispose
    webviewPlugin.dispose();
    controller.dispose();
    super.dispose();
  }
}

display effect:

Description:
There is a FlutterWebviewPlugin.launch() method in the official website, which has the same effect as the flutter url_launcher plugin to open a web page. It is to call the default browser to open the web page, instead of opening the web page inside the APP. This should be noted!