0

I have a javascript class and Html file for Flutter web-app. Both these files are in web folder. I'm loading these using flutter class with below code :

class WebClass implements CommonAbstractClass {
  @override
  Widget build(BuildContext context) {

    ui.platformViewRegistry.registerViewFactory(
        'hello-html',
        (int viewId) => IFrameElement()
          ..width = '640'
          ..height = '360'
          ..src = 'myHtmlFile.html'
          ..style.border = 'none');
        
    return Scaffold(
      appBar: AppBar(title: const Text('Web App')),
      body: Stack(
        children: const [
          SizedBox(
              height: 500,
              child: HtmlElementView(
                viewType: 'hello-html',
              )),
        ],
      ),
    );
  }
}

Above code loads html and works well. The javascript prints the result. What I'm looking for is to get that same result (result that I'm getting in javascript) in flutter file. Is there any way to get result from html/javascript to flutter while using HtmlElementView ?

Ruchir
  • 1,086
  • 4
  • 24
  • 48
  • 3
    Your question is a bit confusing, what do you mean by "same result in flutter file"? Could you elaborate on the desired output? – Phil Nov 30 '22 at 09:57
  • @Phil same result means data what I'm getting in html, I want that result in flutter file. – Ruchir Dec 02 '22 at 12:33

1 Answers1

0

Please try this sample code:

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

void main() {
  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      'hello-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/xg4S67ZvsRs'
        ..style.border = 'none');

  runApp( Padding(
        padding: EdgeInsets.all(25),
        child: SizedBox(
          width: 640,
          height: 360,
          child: HtmlElementView(viewType: 'hello-html'),
      ),
    ),
  );
}

also, you can check this link or this link.

Mohammad Hosseini
  • 575
  • 2
  • 7
  • What I'm looking for is to get data from javascript to flutter in Flutter web. What you shared is to load html file/url in flutter. – Ruchir Dec 12 '22 at 07:03
  • 1
    I think you can find your question in this link: https://fireship.io/snippets/using-js-with-flutter-web/ and this link https://gpalma.pt/blog/flutter-web-using-javascript/ – Mohammad Hosseini Dec 12 '22 at 12:38