I have a Flutter application that I build a webpage from. In this application, I have some widgets in the top of the app, then an InAppWebView, and then some more flutter widgets in the bottom. All of this is wrapped in a SingleChildScrollView.
Scrolling the webpage using the scrollwheel on the mouse works fine until the mouse cursor hovers over the webview. After that, I can't scroll any further. I need to move the mouse to one of the flutter-widgets in order to keep scrolling. This is not a very good user experience.
I assume this is because the webview takes over the scrolling events, but since I have no scrollable content inside the webview, there is no point for it to do that.
How can I solve this?
If I set pointer-events: none; on the iframe that Flutter renders, it works as I want it to, but then I also can't click on the content inside the webview, so that isn't a solution for me.
The issue can easily be reproduced with the following steps:
- Start a new Flutter-project
- Run
flutter pub add flutter_inappwebview - Replace the content in main.dart with the code below
- Run the app in a web browser.
- Scroll down using the scrollwheel, you will have a hard time reaching the bottom of the app.
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final html = '''
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color:green;
}
</style>
</head>
<body>
This is a web view!
</body>
</html>
''';
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 800,
color: Colors.red,
child: Center(child: Text('Top of the app')),
),
SizedBox(
height: 800,
child: InAppWebView(
onWebViewCreated: (controller) async {
await controller.loadData(data: html);
},
),
),
Container(
height: 800,
color: Colors.blue,
child: Center(child: Text('Bottom of the app')),
),
],
),
),
),
);
}
}
