Question

I m creating a flutter project that can run on android & web platform. I m having problem with viewing html on web platform.

我在海底平台上使用了“金字眼”的原始网站概览,但这一原始图象并不支持网络平台。

import  package:webview_flutter/webview_flutter.dart ;

class HelpScreen extends StatefulWidget {
  const HelpScreen({super.key});

  @override
  HelpScreenState createState() {
    return HelpScreenState();
  }
}

class HelpScreenState extends State<HelpScreen> {
  WebViewController? _controller;

  @override
  Widget build(BuildContext? context) {
    // https://pub.dev/packages/webview_flutter
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadFlutterAsset("assets/Help.html");
    return Scaffold(
        appBar: AppBar(
          title: Text(
             help .tr,
            style: AppStyle.buildToolbarCommandTextStyle(),
          ),
          backgroundColor: AppStyle.logoGreen,
        ),
        body: WebViewWidget(controller: _controller!));
  }
}

Answer 1

<代码>webview_flutter>/code> 包装是专门为移动平台设计的。

如果你想使用一个网络平台,即建议使用easy_web_view 自动使用<代码>webview_flutter的图书馆在移动平台和网站上工作。

也可使用<代码>HtmlElementView。参看关于如何使用<代码> HtmlElementView,如果出现错误: ViewRegistry follow steps here

Alternatively, you can also do a platform check and change the library conditionally:

import  package:flutter/foundation.dart  show kIsWeb;

if (kIsWeb) {
  // running on the web!
} else {
  // NOT running on the web! You can check for additional platforms here.
}

References:

1. WebView in Flutter Web

2. How do you detect the host platform from Dart code?

3. use WebView in flutter web without using iframe

4. How to prevent error of platformViewRegistry [flutter-web]

Answer 2

我最后使用。而不是<代码>HtmlElement 见,作为platformViewRegistry,在我管理整个代码和roid时仍然造成冲突。

我的守则如下:

import  package:html_view/html_view.dart ;

class WebHelpScreen extends StatefulWidget {
  const WebHelpScreen({super.key});

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

class _WebHelpScreen extends State<WebHelpScreen> {
  final HtmlView htmlView = HtmlView();
  String viewID = "help";
  late final StreamSubscription subscription;

  @override
  void initState() {
    super.initState();
    initListener();
  }

  initListener() {
    subscription = htmlView.listen((event) async {
      print(event);
    });
  }

  @override
  void dispose() {
    subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Get screen size
    Size screenSize = MediaQuery.of(context).size;
    String styleWidth =  ${screenSize.width}px ;
    String styleHeight =  ${screenSize.height}px ;

    // Initialize HtmlView with dynamic size
    htmlView.initView(
      viewID,
      styleWidth: styleWidth,
      styleHeight: styleHeight,
      width: styleWidth,
      height: styleHeight,
      src:  assets/Help.html ,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(
           help .tr,
          style: AppStyle.buildToolbarCommandTextStyle(),
        ),
      ),
      body: SizedBox(
        width: screenSize.width,
        height: screenSize.height,
        child: HtmlElementView(
          viewType: viewID,
        ),
      ),
    );
  }
}

但仍然感谢您的建议。

References:

1. WebView in Flutter Web

2. How do you detect the host platform from Dart code?

3. use WebView in flutter web without using iframe

4. How to prevent error of platformViewRegistry [flutter-web]

友情链接