Flutter实现webview展示网页

如图所示，我们要实现一个在flutter项目里面打开网页的功能， 具体实现逻辑如下:

1.导入第三方库：

webview_flutter: ^2.0.8

这里第三方库的版本要自己判断一下，不同版本的api有一些变化，这里以2.0.8的版本为例。

2.新建一个widget用作webview页面

import 'package:flutter/material.dart';

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


class WebviewPageShow extends StatelessWidget {

  const WebviewPageShow( {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text("title"),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: WebView(
          initialUrl: "https://www.baidu.com",
          javascriptMode: JavascriptMode.unrestricted,
          onPageStarted: (String url) {
            print("onPageStarted $url");
          },
          onPageFinished: (String url) {
            print("onPageFinished $url");
          },
          onWebResourceError: (error) {
            print("${error.description}");
          },
        ),
      )


    );
  }
}

项目开发中可以把页面标题和url通过路由框架从外面传过来，这个页面就可以作为通用的webview使用，这里为了好理解使用了固定的标题和url。