I want to add a Fine Calculator in my Flutter app. This calculator is already provided by a third party: https://www.bussgeldrechner.org/webmaster.html. The only thing you have to do is change the style and some other options and use the proportioned code to embed the calculator in your web.
I’m trying to use WebView in my app to get this working, but all I achieve is a blank screen and this in the debug console:
I/chromium(18615): [INFO:CONSOLE(9)] "[iFrameSizer][Host page: iFrameResizer0] IFrame has not responded within 5 seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.", source: https://widget.bussgeldrechner.org/3 (9)
This is the code of my Screen class:
class FineCalculatorScreen extends StatefulWidget {
final String htmlContent = '''
<html>
<head>
<title>Custom Content</title>
</head>
<body>
<bussgeld-rechner class="bussgeldrechner" data-type="abbiegen" data-background-color="#ffffff" data-font-color="#313c45" data-button-background-color="#3889cf" data-button-font-color="#ffffff" data-border-color="#e0e0e0" data-show-dropdown="1"></bussgeld-rechner>
<script src="//widget.bussgeldrechner.org/3" async></script>
</body>
</html>
''';
const FineCalculatorScreen({super.key});
@override
State<FineCalculatorScreen> createState() => _FineCalculatorScreenState();
}
class _FineCalculatorScreenState extends State<FineCalculatorScreen> {
late final WebViewController controller;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted);
}
@override
Widget build(BuildContext context) {
const String htmlContent = """
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<bussgeld-rechner class="bussgeldrechner"
data-type="abstand"
data-background-color="#ffffff"
data-font-color="#313c45"
data-button-background-color="#3889cf"
data-button-font-color="#ffffff"
data-border-color="#e0e0e0"
data-show-dropdown="1"
data-publisher-id="6699237538d54"></bussgeld-rechner>
<script src="https://widget.bussgeldrechner.org/3" async></script>
</body>
</html>
""";
return Scaffold(
appBar: AppBar(
title: const Text('Fine Calculator'),
),
body: WebViewWidget(
controller: WebViewController()
..loadHtmlString(htmlContent)
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel(
'FlutterChannel',
onMessageReceived: (JavaScriptMessage message) {
print(
" Mensaje: ${message.message}");
},
),
),
);
}
}
user26433796 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.