error by widget element
Opened this issue · 2 comments
liuzitong123a commented
Affected version
0.16.0
Flutter versions
3.13.0
No same issues found.
- Yes, I search all issues but not found.
Steps to Reproduce
use code
Code example
const flutterContainer = document.createElement('flutter-listview');
flutterContainer.style.height = '100vh';
flutterContainer.style.display = 'block';
document.body.appendChild(flutterContainer);
const colors = ['red', 'yellow', 'black', 'blue', 'green'];
for (let i = 0; i < 200; i++) {
const div = document.createElement('div');
div.style.width = '100%';
div.style.border = `1px solid ${colors[i % colors.length]}`;
div.appendChild(document.createTextNode(`${i}`));
const badge = document.createElement('img');
badge.src = 'https://badge.yimutian.com/v1/bull-year3-5.png'
badge.style.position = 'absolute';
badge.style.bottom = '0';
badge.style.left = '40px';
badge.style.width = '16px';
badge.style.height = '16px';
div.appendChild(badge);
const img = document.createElement('img');
img.src = 'https://gw.alicdn.com/tfs/TB1CxCYq5_1gK0jSZFqXXcpaXXa-128-90.png';
div.appendChild(img);
img.style.width = '100px';
flutterContainer.appendChild(div);
}
Expected results
no error
Actual results
======== Exception caught by widgets library =======================================================
The following assertion was thrown building WebFHTMLElementStatefulWidget-[<'674705366'>](state: HTMLElementState#080a7):
A RenderRepaintBoundaryFlowLayout was mutated in RenderSliverList.performLayout.
The RenderObject was mutated when none of its ancestors is actively performing layout.
The RenderObject being mutated was: RenderRepaintBoundaryFlowLayout#8b283 relayoutBoundary=up1
needs compositing
parentData: isPositioned=false; offset=Offset(0.0, 0.0); runIndex: 0; (can use size)
constraints: BoxConstraints(411.4<=w<=Infinity, 785.5<=h<=Infinity)
layer: OffsetLayer#d0b50
size: Size(411.4, 785.5)
creatorElement: HTML Element(51e2b)
contentSize: Size(411.4, 785.5)
contentConstraints: BoxConstraints(411.4<=w<=Infinity, 785.5<=h<=Infinity)
maxScrollableSize: Size(411.4, 785.5)
scrollableViewportSize: Size(411.4, 785.5)
needsLayout: false
position: CSSPositionType.static
backgroundColor: null
isSizeTight: false
width: null
height: null
intrinsicWidth: 0.0
intrinsicHeight: 0.0
borderEdge: EdgeInsets.zero
contentVisibility: ContentVisibility.visible
scrollableSize: Size(411.4, 785.5)
viewportSize: Size(411.4, 785.5)
clipX: false
clipY: false
transformOrigin: Offset(0.0, 0.0)
transformAlignment: Alignment.center
The RenderObject that was mutating the said RenderRepaintBoundaryFlowLayout was: RenderSliverList#f7da1 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: paintOffset=Offset(0.0, 0.0) (can use size)
constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.reverse, scrollOffset: 43.8, remainingPaintExtent: 785.5, crossAxisExtent: 411.4, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 785.5, remainingCacheExtent: 1079.3, cacheOrigin: -43.8)
geometry: SliverGeometry(scrollExtent: 15293.8, paintExtent: 785.5, maxPaintExtent: 15293.8, hasVisualOverflow: true, cacheExtent: 1051.1)
currently live children: 0 to 14
The relevant error-causing widget was:
WebFHTMLElementStatefulWidget-[<'674705366'>] WebFHTMLElementStatefulWidget:file:///Users/ymt/Desktop/krakenProject/ymt_webf/webf/lib/src/widget/webf_adapter_widget.dart:84:12
When the exception was thrown, this was the stack:
#0 RenderObject._debugCanPerformMutations.<anonymous closure> (package:flutter/src/rendering/object.dart:1684:9)
#1 RenderObject._debugCanPerformMutations (package:flutter/src/rendering/object.dart:1745:6)
#2 RenderObject.adoptChild (package:flutter/src/rendering/object.dart:1511:12)
#3 ContainerRenderObjectMixin.insert (package:flutter/src/rendering/object.dart:3778:5)
#4 RenderLayoutBox.insert (package:webf/src/rendering/box_model.dart:205:11)
#5 RenderBoxModel.attachRenderBox (package:webf/src/rendering/box_model.dart:1742:26)
#6 RenderBoxModel.attachToContainingBlock (package:webf/src/rendering/box_model.dart:1497:7)
#7 Element._updateRenderBoxModelWithPosition (package:webf/src/dom/element.dart:840:12)
#8 Element.attachTo (package:webf/src/dom/element.dart:1042:11)
#9 Element.ensureChildAttached (package:webf/src/dom/element.dart:1119:17)
#10 WebFHTMLElementToFlutterElementAdaptor.mount (package:webf/src/widget/element_flutter_element_adapter.dart:25:24)
... Normal element mounting (49 frames)
#59 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953:16)
#60 Element.updateChild (package:flutter/src/widgets/framework.dart:3682:18)
#61 SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1451:37)
#62 SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:1436:20)
#63 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2682:19)
#64 SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:1428:12)
#65 RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:353:23)
#66 RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:2300:59)
#67 PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1056:15)
#68 RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:2300:14)
#69 RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:342:5)
#70 RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:490:5)
#71 RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:241:19)
#72 RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:283:12)
#73 RenderObject.layout (package:flutter/src/rendering/object.dart:2189:7)
#74 RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:149:12)
#75 RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:386:11)
#76 RenderObject.layout (package:flutter/src/rendering/object.dart:2189:7)
#77 RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:550:13)
#78 RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1634:12)
#79 RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1541:20)
#80 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2027:7)
#81 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1020:18)
#82 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:516:19)
#83 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:865:13)
#84 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:381:5)
#85 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1289:15)
#86 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1218:9)
#87 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1076:5)
#88 _invoke (dart:ui/hooks.dart:145:13)
#89 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:338:5)
#90 _drawFrame (dart:ui/hooks.dart:112:31)
andycall commented
wrap img elements with div could avoid this issue
liuzitong123a commented
修改部分代码:
const div2 = document.createElement('div');
const badge = document.createElement('img');
badge.src = 'https://badge.yimutian.com/v1/bull-year3-5.png'
badge.style.position = 'absolute';
badge.style.bottom = '0';
badge.style.left = '40px';
badge.style.width = '16px';
badge.style.height = '16px';
div2.appendChild(badge)
div.appendChild(div2);
依旧报错,删除定位后正常