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!