how to view html files on the android and web platform in flutter?

Question

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

I used a plugin webview_flutter to view html on android platform but this plugin doesn't support 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

I actually ended up using html_view instead of the HtmlElementView as this platformViewRegistry still creates conflict when I run the whole code on android.

Here's my code:

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,
        ),
      ),
    );
  }
}

But still thankful for your suggestions. Thank you!

Answer 2

webview_flutter package is specifically designed for mobile platforms.

If you want to use a web platform, i suggest using easy_web_view package which automatically uses the webview_flutter library to work on mobile platforms and websites.

You may also use HtmlElementView. Follow this reference to see how to use HtmlElementView and when you get the error: Undefined name 'platformViewRegistry' 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]