Webview_flutter issue inside another scroll views

[hamidrezabstn]

when using webview_flutter widget inside another scroll view it will throw exception:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4342): The following assertion was thrown during performResize():
I/flutter ( 4342): RenderAndroidView object was given an infinite size during layout.
I/flutter ( 4342): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter ( 4342): inside another render object that allows its children to pick their own size.
I/flutter ( 4342): The nearest ancestor providing an unbounded height constraint is:
I/flutter ( 4342):   RenderIndexedSemantics#28d7e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4342):   creator: IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ←
I/flutter ( 4342):   AutomaticKeepAlive ← SliverList ← Viewport ← IgnorePointer-[GlobalKey#583d5] ← Semantics ←
I/flutter ( 4342):   Listener ← _GestureSemantics ←
I/flutter ( 4342):   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#91bcc] ← Listener ← ⋯
I/flutter ( 4342):   parentData: index=0; layoutOffset=0.0 (can use size)
I/flutter ( 4342):   constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter ( 4342):   semantic boundary
I/flutter ( 4342):   size: MISSING
I/flutter ( 4342):   index: 0
I/flutter ( 4342): The constraints that applied to the RenderAndroidView were:
I/flutter ( 4342):   BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter ( 4342): The exact size it was given was:
I/flutter ( 4342):   Size(411.4, Infinity)

i have tried many solutions even customscrollview with slivers but it does not help

[hamidrezabstn]

BTW it is my code sample:

return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildListDelegate([
                Container(
                    height: 300,
                    color: Colors.greenAccent,
                    child: Text('box1')),
                Container(height: 200, color: Colors.red, child: Text('box2')),
              ]),
            ),
            SliverList(
              delegate: SliverChildListDelegate([
                WebView(
                  initialUrl: "http://www.wikipedia.com",
                  onPageFinished: (url) {},
                ),
              ]),
            )
          ],
        ));

[hamidrezabstn]

if i put webview inside a container with fix height more than 3000.0 then android webview will crash!

[peeto]

https://github.com/peeto/scrollable_flutter_web_view_example

[lorentz-wu]

https://github.com/peeto/scrollable_flutter_web_view_example

when heightPercent too large, it crashed

ResponsiveContainer(
                        widthPercent: 100,
                        heightPercent: 1500,
                        alignment: Alignment(0, 0),
                        margin: EdgeInsets.all(0),
                        padding: EdgeInsets.all(0),
                        child: WebView(
                          initialUrl: 'http://news.xjtu.edu.cn/info/1004/117731.htm',
                          javascriptMode: JavascriptMode.unrestricted,
                        )
                    ),

[TahaTesser]

Running on

Flutter 1.12.13+hotfix.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 0b8abb4724 (3 weeks ago) • 2020-02-11 11:44:36 -0800
Engine • revision e1e6ced81d
Tools • Dart 2.7.0

Code Sample

``` import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Material App', theme: ThemeData.dark(), home: Home(), ); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView'), ), body: CustomScrollView( slivers: [ SliverList( delegate: SliverChildListDelegate([ Container( height: 300, color: Colors.greenAccent, child: Text('box1')), Container(height: 200, color: Colors.red, child: Text('box2')), ]), ), SliverList( delegate: SliverChildListDelegate([ WebView( initialUrl: "http://www.wikipedia.com", onPageFinished: (url) {}, ), ]), ) ], )); } } ```

Logs

``` Restarted application in 1,432ms. I/flutter ( 8954): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 8954): The following assertion was thrown during performResize(): I/flutter ( 8954): RenderAndroidView object was given an infinite size during layout. I/flutter ( 8954): This probably means that it is a render object that tries to be as big as possible, but it was put I/flutter ( 8954): inside another render object that allows its children to pick their own size. I/flutter ( 8954): The nearest ancestor providing an unbounded height constraint is: RenderIndexedSemantics#fb41d relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: I/flutter ( 8954): creator: IndexedSemantics ← NotificationListener ← KeepAlive ← I/flutter ( 8954): AutomaticKeepAlive ← KeyedSubtree ← SliverList ← Viewport ← IgnorePointer-[GlobalKey#e18d2] ← I/flutter ( 8954): Semantics ← _PointerListener ← Listener ← _GestureSemantics ← ⋯ I/flutter ( 8954): parentData: index=0; layoutOffset=0.0 (can use size) I/flutter ( 8954): constraints: BoxConstraints(w=392.7, 0.0<=h<=Infinity) I/flutter ( 8954): semantic boundary I/flutter ( 8954): size: MISSING I/flutter ( 8954): index: 0 I/flutter ( 8954): The constraints that applied to the RenderAndroidView were: I/flutter ( 8954): BoxConstraints(w=392.7, 0.0<=h<=Infinity) I/flutter ( 8954): The exact size it was given was: I/flutter ( 8954): Size(392.7, Infinity) I/flutter ( 8954): See https://flutter.dev/docs/development/ui/layout/box-constraints for more information. I/flutter ( 8954): I/flutter ( 8954): The relevant error-causing widget was: I/flutter ( 8954): AndroidView I/flutter ( 8954): I/flutter ( 8954): I/flutter ( 8954): When the exception was thrown, this was the stack: I/flutter ( 8954): #0 RenderBox.debugAssertDoesMeetConstraints. I/flutter ( 8954): #1 RenderBox.debugAssertDoesMeetConstraints I/flutter ( 8954): #2 RenderBox.size=. I/flutter ( 8954): #3 RenderBox.size= I/flutter ( 8954): #4 RenderAndroidView.performResize I/flutter ( 8954): #5 RenderObject.layout I/flutter ( 8954): #6 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #7 RenderObject.layout I/flutter ( 8954): #8 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #9 RenderObject.layout I/flutter ( 8954): #10 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #11 RenderObject.layout I/flutter ( 8954): #12 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #13 RenderObject.layout I/flutter ( 8954): #14 RenderSliverList.performLayout I/flutter ( 8954): #15 RenderObject.layout I/flutter ( 8954): #16 RenderViewportBase.layoutChildSequence I/flutter ( 8954): #17 RenderViewport._attemptLayout I/flutter ( 8954): #18 RenderViewport.performLayout I/flutter ( 8954): #19 RenderObject.layout I/flutter ( 8954): #20 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #21 RenderObject.layout I/flutter ( 8954): #22 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #23 RenderObject.layout I/flutter ( 8954): #24 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #25 RenderObject.layout I/flutter ( 8954): #26 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #27 RenderObject.layout I/flutter ( 8954): #28 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #29 RenderObject.layout I/flutter ( 8954): #30 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #31 RenderObject.layout I/flutter ( 8954): #32 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #33 RenderObject.layout I/flutter ( 8954): #34 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #35 RenderObject.layout I/flutter ( 8954): #36 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #37 RenderObject.layout I/flutter ( 8954): #38 MultiChildLayoutDelegate.layoutChild I/flutter ( 8954): #39 _ScaffoldLayout.performLayout I/flutter ( 8954): #40 MultiChildLayoutDelegate._callPerformLayout I/flutter ( 8954): #41 RenderCustomMultiChildLayoutBox.performLayout I/flutter ( 8954): #42 RenderObject.layout I/flutter ( 8954): #43 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #44 RenderObject.layout I/flutter ( 8954): #45 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #46 _RenderCustomClip.performLayout I/flutter ( 8954): #47 RenderObject.layout I/flutter ( 8954): #48 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #49 RenderObject.layout I/flutter ( 8954): #50 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #51 RenderObject.layout I/flutter ( 8954): #52 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #53 RenderObject.layout I/flutter ( 8954): #54 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #55 RenderObject.layout I/flutter ( 8954): #56 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #57 RenderObject.layout I/flutter ( 8954): #58 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #59 RenderObject.layout I/flutter ( 8954): #60 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #61 RenderObject.layout I/flutter ( 8954): #62 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #63 RenderOffstage.performLayout I/flutter ( 8954): #64 RenderObject.layout I/flutter ( 8954): #65 RenderStack.performLayout I/flutter ( 8954): #66 RenderObject.layout I/flutter ( 8954): #67 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #68 RenderObject.layout I/flutter ( 8954): #69 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #70 RenderObject.layout I/flutter ( 8954): #71 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #72 RenderObject.layout I/flutter ( 8954): #73 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #74 RenderObject.layout I/flutter ( 8954): #75 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #76 RenderObject.layout I/flutter ( 8954): #77 RenderProxyBoxMixin.performLayout I/flutter ( 8954): #78 RenderObject.layout I/flutter ( 8954): #79 RenderView.performLayout I/flutter ( 8954): #80 RenderObject._layoutWithoutResize I/flutter ( 8954): #81 PipelineOwner.flushLayout I/flutter ( 8954): #82 RendererBinding.drawFrame I/flutter ( 8954): #83 WidgetsBinding.drawFrame I/flutter ( 8954): #84 RendererBinding._handlePersistentFrameCallback I/flutter ( 8954): #85 SchedulerBinding._invokeFrameCallback I/flutter ( 8954): #86 SchedulerBinding.handleDrawFrame I/flutter ( 8954): #87 SchedulerBinding.scheduleWarmUpFrame. I/flutter ( 8954): #96 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:384:19) I/flutter ( 8954): #97 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:418:5) I/flutter ( 8954): #98 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174:12) I/flutter ( 8954): (elided 8 frames from package dart:async and package dart:async-patch) I/flutter ( 8954): I/flutter ( 8954): The following RenderObject was being processed when the exception was fired: RenderAndroidView#3e2c6 NEEDS-LAYOUT NEEDS-PAINT: I/flutter ( 8954): needs compositing I/flutter ( 8954): creator: _AndroidPlatformView ← Semantics ← _FocusMarker ← Focus ← AndroidView ← _PointerListener ← I/flutter ( 8954): Listener ← RawGestureDetector ← GestureDetector ← WebView ← RepaintBoundary ← IndexedSemantics ← ⋯ I/flutter ( 8954): parentData: (can use size) I/flutter ( 8954): constraints: BoxConstraints(w=392.7, 0.0<=h<=Infinity) I/flutter ( 8954): semantic boundary I/flutter ( 8954): size: Size(392.7, Infinity) I/flutter ( 8954): This RenderObject has no descendants. I/flutter ( 8954): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter ( 8954): Another exception was thrown: RenderAndroidView object was given an infinite size during layout. I/flutter ( 8954): Another exception was thrown: RenderSemanticsAnnotations object was given an infinite size during layout. I/flutter ( 8954): Another exception was thrown: RenderPointerListener object was given an infinite size during layout. I/flutter ( 8954): Another exception was thrown: RenderRepaintBoundary object was given an infinite size during layout. I/flutter ( 8954): Another exception was thrown: RenderIndexedSemantics object was given an infinite size during layout. ```

[darshankawar]

Issue persists on latest dev channel (1.20.0-0.0.pre) with latest webview_flutter version.

flutter doctor -v

``` [✓] Flutter (Channel dev, 1.20.0-0.0.pre, on Mac OS X 10.15.2 19C57, locale en-US) • Flutter version 1.20.0-0.0.pre at /Users/deeptibelsare/Documents/Fluttersdk/flutter • Framework revision d9653445f4 (8 days ago), 2020-06-09 18:43:03 -0400 • Engine revision e8c13aa012 • Dart version 2.9.0 (build 2.9.0-14.0.dev 5c1376615e) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/deeptibelsare/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • ANDROID_HOME = /Users/deeptibelsare/Library/Android/sdk • ANDROID_SDK_ROOT = /Users/deeptibelsare/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) ✗ Android license status unknown. Try re-installing or updating your Android SDK Manager. See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions. [✓] Xcode - develop for iOS and macOS (Xcode 11.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.3, Build version 11C29 • CocoaPods version 1.9.3 [✓] Android Studio (version 3.6) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 45.1.1 • Dart plugin version 192.7761 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) [✓] Connected device (1 available) • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator) ! Doctor found issues in 1 category. ```

[michaeldwu]

Anyone found a solution yet? I'm experiencing this error too.

[BoniWPy]

i've got same problem, anybody can help me ?

[markusrubey]

Enabling hybrid composition solved this Android issue for me.

  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

[khal-it]

Enabling hybrid composition solved this Android issue for me.

  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

Thank You that worked for me!

[darshankawar]

Using the original code and updating it per latest stable version changes, the reported exception persists.

updated runnable code sample

``` import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() { runApp( const MaterialApp( // theme: ThemeData(useMaterial3: true), home: WebViewApp(), ), ); } class WebViewApp extends StatefulWidget { const WebViewApp({super.key}); @override State createState() => _WebViewAppState(); } class _WebViewAppState extends State { late final WebViewController controller; @override void initState() { super.initState(); controller = WebViewController() ..loadRequest( Uri.parse('https://flutter.dev'), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter WebView'), ), body: CustomScrollView( slivers: [ SliverList( delegate: SliverChildListDelegate([ Container( height: 300, color: Colors.green, child: Text('box1'), ), Container( height: 200, color: Colors.red, child: Text('box2'), ) ] ), ), SliverList( delegate: SliverChildListDelegate([ WebViewWidget( controller: controller, ), ]), ) ], ) ); } } ```

stable, master flutter doctor -v

``` [!] Flutter (Channel stable, 3.19.2, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.19.2 on channel stable at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7482962148 (5 days ago), 2024-02-27 16:51:22 -0500 • Engine revision 04817c99c9 • Dart version 3.3.0 • DevTools version 2.31.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. [!] Flutter (Channel master, 3.21.0-4.0.pre.14, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.21.0-4.0.pre.14 on channel master at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 1ca88730a0 (4 hours ago), 2024-03-11 18:31:25 -0700 • Engine revision 6745955bb4 • Dart version 3.4.0 (build 3.4.0-220.0.dev) • DevTools version 2.33.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/dhs/Library/Android/sdk ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13C100 • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2) • IntelliJ at /Applications/IntelliJ IDEA.app • Flutter plugin version 65.1.4 • Dart plugin version 213.7228 [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.29.0 [✓] Connected device (3 available) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 15.3.1 19D52 • macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ```

[charafau]

It will work like that without enabling hybrid composition because of Android and TextureView limitation. If you want to set height to it you need to enable hybrid composition. You can read about it here https://docs.flutter.dev/platform-integration/android/platform-views

and I guess issue can be closed