flutter:用webview显示网页

一，安装

官方库地址:

https://pub.dev/packages/webview_flutter

编辑pubspec.yaml,
在dependencies下增加一行:webview_flutter,如下:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.10.0

然后点击Pub get下载

二，打开网络权限

编辑  android/app/src/main/AndroidManifest.xml

在android 的 AndroidManifest.xml中添加网络权限，添加一行:

<uses-permission android:name="android.permission.INTERNET" />

如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:label="demo2"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

三，代码:

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

class WebviewPage extends StatefulWidget {
  const WebviewPage({super.key});
  @override
  WebviewPageState createState() => WebviewPageState();
}

class WebviewPageState extends State<WebviewPage> with AutomaticKeepAliveClientMixin {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    print("初始化状态：initState");
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onHttpError: (HttpResponseError error) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://www.baidu.com/'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.arrow_back_rounded),
            onPressed: () {
              _controller.goBack();
            },
          ),
          IconButton(
            icon: const Icon(Icons.arrow_forward_rounded),
            onPressed: () {
              _controller.goForward();
            },
          ),
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              _controller.reload();
            },
          ),
        ],
        title: const Text('Webview'),
      ),
      body: WebViewWidget(controller: _controller),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

四，查看效果