skip to Main Content

I am displaying a iframe/url into my flutter web app. In this iframe I want to enable only hover and disable escape key and click event. Is this possible to do?

Following is complete code to display iframe

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

class IframeExp extends StatefulWidget {
  final String url;

  const IframeExp({super.key, required this.url});
  @override
  State<IframeExp> createState() => _IframeExpState();
}

class _IframeExpState extends State<IframeExp> {
  final IFrameElement _iFrameElement = IFrameElement();

  @override
  void initState() {
    _iFrameElement.style.height = '100%';
    _iFrameElement.style.width = '100%';
    _iFrameElement.src = widget.url;
    _iFrameElement.style.border = 'none';

// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'iframeElement',
      (int viewId) => _iFrameElement,
    );

    _iFrameElement.onKeyPress.listen((event) {
      print("[Escape]${event.charCode} ${String.fromCharCode(event.charCode)}");
    });
    _iFrameElement.onClick.listen((event) {
      print("[Escape] ${event}");
    });

    window.onKeyPress.listen((KeyboardEvent e) {
      print("[Escape] ${e.charCode} ${String.fromCharCode(e.charCode)}");
    });

    super.initState();
  }

  final Widget _iframeWidget = HtmlElementView(
    viewType: 'iframeElement',
    key: UniqueKey(),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height / 2,
            width: MediaQuery.of(context).size.width,
            child: _iframeWidget,
          )
        ],
      ),
    );
  }

  void disableEscapeKey() {}

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

In this iframe, I want to achieve the following behaviors:

Enable only hover events.
Disable the escape key.
Disable click events.

I have tried using onKeyPress and onClick events on the IFrameElement, but it doesn’t seem to prevent the escape key or click events. Additionally, I have attached a general window.onKeyPress event listener, but it doesn’t capture events within the iframe.

Is there a way to achieve these specific event handling requirements within an iframe in Flutter web?

2

Answers


  1. yes
    it possible
    you can change whenever and whatever

    Login or Signup to reply.
  2. Yes it is possible.
    You can use "RawKeyboardListerner" widget to capture keyboard events and adjust the iframe’s properties accordingly

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search