如何在flutter_inappwebview中等待网站加载？

Question

我是初学者，我正在使用 flutter_inappwebview 的（版本 6.0.0）HeadlessInAppWebview 类来创建一个函数，该函数将：

1. 打开一个网站
2. 然后等待加载
3. 然后执行一些js代码并返回其值

我想我可以这样做

webviewController.loadUrl().then()

但没成功

我如何等待它加载或者我应该以不同的方式进行加载？

Answer 1

要使用 flutter_inappwebview 实现此功能，您需要添加 onLoadStart、onProgressChanged 和 onLoadStop 的回调

这是我在项目中使用的代码

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:snopixie/constants.dart';

class FlutterInWebViewPage extends StatefulWidget {
  const FlutterInWebViewPage({
    Key? key,
  }) : super(key: key);

  @override
  State<FlutterInWebViewPage> createState() => _FlutterInWebViewPageState();
}

class _FlutterInWebViewPageState extends State<FlutterInWebViewPage> {
  @override
  void initState() {
    super.initState();
    init();
  }

  init() async {
    await Permission.storage.request();
  }

  InAppWebViewController? webViewController;

  bool isLoading = true;
  int progress = 0;
  @override
  Widget build(BuildContext context) {
    // ignore: deprecated_member_use
    return WillPopScope(
      onWillPop: () async {
        // Check if webview can go back
        if (await webViewController!.canGoBack()) {
          // Go back
          webViewController!.goBack();
          // Return false so this webview won't be popped
          return false;
        } else {
          // Let system handle back button
          return true;
        }
      },
      child: Scaffold(
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              InAppWebView(
                initialUrlRequest: URLRequest(
                  url: Uri.parse("https://example.com/"),
                ),
                onWebViewCreated: (controller) {
                  webViewController = controller;
                },
                onLoadStart: (controller, url) {
                  setState(() {
                    isLoading = true;
                    progress = 0;
                  });
                },
                onProgressChanged: (controller, p) {
                  setState(() {
                    isLoading = p < 100;
                    progress = p;
                  });
                },
                onLoadStop: (controller, url) {
                  setState(() {
                    isLoading = false;
                    progress = 0;
                  });
                },
                onConsoleMessage: (controller, consoleMessage) {},
              ),
              if (isLoading)
                Positioned(
                  top: 0,
                  left: 0,
                  right: 0,
                  child: SizedBox(
                    height: 4,
                    child: LinearProgressIndicator(
                      valueColor: AlwaysStoppedAnimation<Color>(primary),
                      backgroundColor: Colors.white,
                      value: progress / 100,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}