PlatformViews are drawn outside of parent widget (beta channel) #125620
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
When using the Flutter beta channel, placing multiple PlatformView in a ListView causes PlatformView to be drawn outside the ListView.
My example uses WebView from the webview_flutter package (4.2.0) to demonstrate the behavior.
flutter --version
Flutter 3.10.0-1.4.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision a14a4eac61 (29 hours ago) • 2023-04-26 12:54:31 +0700
Engine • revision f7ac42e8a2
Tools • Dart 3.0.0 (build 3.0.0-417.3.beta) • DevTools 2.23.1
Expected results
PlatformViews should be clipped by the parent Widget
Actual results
PlatformViews are drawn outside the parent widget.
Code sample
Code sample
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ColoredBox(
color: Colors.green[100]!,
child: SafeArea(
child: Column(
children: [
ColoredBox(
color: Colors.blue[100]!,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 50),
child: Center(child: Text('Top')),
),
),
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) => WebViewItem(
index: index,
key: ValueKey('webviewitem-$index'),
),
),
),
ColoredBox(
color: Colors.red[100]!,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 50),
child: Center(child: Text('Bottom')),
),
),
],
),
),
),
);
}
}
class WebViewItem extends StatefulWidget {
const WebViewItem({required this.index, super.key});
final int index;
@override
State<WebViewItem> createState() => _WebViewItemState();
}
class _WebViewItemState extends State<WebViewItem> {
final controller = WebViewController();
String get htmlBody => '''
<!DOCTYPE html>
<html>
<style type="text/css">
p { text-align: center; font-size: 50px;}
</style>
<body>
<p>Element ${widget.index}</p>
</body>
</html>
''';
@override
void initState() {
super.initState();
controller.loadHtmlString(htmlBody);
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 300,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: WebViewWidget(
controller: controller,
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
WebView should not cover the 'Top' label
Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-04-27.at.12.46.35.mp4
Logs
Logs
No logs
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 3.10.0-1.4.pre, on macOS 13.3 22E252 darwin-arm64, locale en-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.77.3)
[✓] Connected device (3 available)
[✓] Network resources
• No issues found!Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listEmbedding Android/iOS views in Flutter appsIt was better in the past than it is nowflutter/engine related. See also e: labels.Found to occur in 3.10The issue has been confirmed reproducible and is ready to work oniOS applications specificallyIssue is closed as already fixed in a newer version