Count page transitions in Flutter using iframes [flutter web] - flutter

Question

I would like to include another website in my own website.
For that I would like to register a callback to track site-tranitions (i.e. the user clicks on a link on the embedded site and is redirected to a different url / sub-url (?).) I currently use IFrameElement to embed a site, this would in theory allow to register event listeners, but I cannot find any documentation about that.
My main goal is to count the number of page transitions. This is my current code:
import 'package:flutter/material.dart';
import 'package:wikipoker/widgets/my_iframe.dart';
import 'package:wikipoker/widgets/player_tab.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Wikipedia Poker',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Game of Wikipedia Poker'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
buildIFrame(constraints.maxHeight, constraints.maxWidth),
],
);
},
),
);
}
String _youtube = 'https://www.youtube.com/embed/RQzhAQlg2JQ';
String _wiki = 'https://de.wikipedia.org/wiki/Hunde';
Widget buildIFrame(double height, double width) {
return Column(
children: [
IFrameWidget(
_wiki,
height,
width * (4 / 5),
),
],
);
}
}
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';
class IFrameWidget extends StatefulWidget {
final String _url;
double _height = 500;
double _width = 500;
IFrameWidget(this._url, this._height, this._width);
#override
State<StatefulWidget> createState() => _IFrameWidgetState();
}
class _IFrameWidgetState extends State<IFrameWidget> {
Widget _iframeWidget;
#override
void initState() {
super.initState();
final IFrameElement _iframeElement = IFrameElement();
// _iframeElement.height = '500';
// _iframeElement.width = '500';
// FIXME This does not load.
// _iframeElement.addEventListener('onLoad', (event) {
// setState(() {
// _iframeWidget = Text("Lol");
// });
// });
_iframeElement.src = widget._url;
_iframeElement.style.border = 'none';
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
'iframeElement',
(int viewId) => _iframeElement,
);
_iframeWidget = HtmlElementView(
key: UniqueKey(),
viewType: 'iframeElement',
);
}
#override
Widget build(BuildContext context) {
return SizedBox(
height: widget._height,
width: widget._width,
child: _iframeWidget,
);
}
}
The IFrameElement has some fields and methods, which look like they could be useful.
addEventListener expects a type of event, but there is no overview about what that might be.
The documentation is very incomplete for this and I have no idea which event I would like to register.
My hope is, that I can use events from the native html iframe for that.
Documentation for IFrames: https://api.flutter.dev/flutter/dart-html/IFrameElement-class.html

Answer 1

Old question, but I hope the answer will help someone looking for a solution:
here is described very well
Note: need to restart the IDE (at least mine refused to work without restart)