You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
ListView nested in Fixed height container that content overflows bug #17426
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Test'),
),
body: new Row(
children: <Widget>[
new Expanded(
child: new Container(
height: 500.0,
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.red,
)
),
child: new ListView.builder(
itemCount: 50,
itemBuilder: (BuildContext context, i) {
return new Container(
height: 50.0,
child: new Text('test1 $i'),
);
},
),
),
),
new Expanded(
child: new Container(
height: 500.0,
/*decoration: new BoxDecoration(
border: new Border.all(
color: Colors.black,
)
),*/
child: new ListView.builder(
itemCount: 50,
itemBuilder: (BuildContext context, i) {
return new Container(
height: 50.0,
child: new Text('test2 $i'),
);
},
),
),
),
],
),
),
);
}
}
There different of the ListViews only they parent Container one has a border and one does not, the ListView does not have a border then it's content overflows.
Weird, maybe the ListView isn't properly clipping?
Can you attach the result of pressing "t" and "L" in the flutter run console? (This will dump the render tree and the layer tree).
Maybe also a screenshot of what happens when you press "p" (enables debugPaintSizeEnabled).
I believe this is an unintended side-effect of adding the cacheExtent to the viewport (in fact, if you set cacheExtent: 0.0 on the ListView in question everything works as expected). The problem is probably that the SliverList calculates hasVisualOverflow based on the cacheExtent and not the paintExtent here: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/sliver_list.dart#L283
I'll be looking into a fix.
Reacted by luizjunior05, QYW and Ruslan Leshchenko
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
Activity
luizjunior05 commentedon Jun 1, 2018
That happened to me too.
This is my code:
Flutter version: 0.4.4
Hixie commentedon Jun 12, 2018
Weird, maybe the ListView isn't properly clipping?
Can you attach the result of pressing "t" and "L" in the
flutter runconsole? (This will dump the render tree and the layer tree).Maybe also a screenshot of what happens when you press "p" (enables debugPaintSizeEnabled).
cc @goderbauer @liyuqian @HansMuller
luizjunior05 commentedon Jun 12, 2018
Layer tree
I/flutter (29420): TransformLayer#357ef
I/flutter (29420): │ owner: RenderView#543a9
I/flutter (29420): │ creator: [root]
I/flutter (29420): │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ transform:
I/flutter (29420): │ [0] 3.0,0.0,0.0,0.0
I/flutter (29420): │ [1] 0.0,3.0,0.0,0.0
I/flutter (29420): │ [2] 0.0,0.0,1.0,0.0
I/flutter (29420): │ [3] 0.0,0.0,0.0,1.0
I/flutter (29420): │
I/flutter (29420): └─child 1: OffsetLayer#71e53
I/flutter (29420): │ creator: RepaintBoundary ← _FocusScopeMarker ← Semantics ←
I/flutter (29420): │ FocusScope ← PageStorage ← Offstage ← _ModalScopeStatus ←
I/flutter (29420): │ _ModalScope-[LabeledGlobalKey<_ModalScopeState>#da01f]
I/flutter (29420): │ ← _OverlayEntry-[LabeledGlobalKey<_OverlayEntryState>#4b117] ←
I/flutter (29420): │ Stack ← _Theatre ←
I/flutter (29420): │ Overlay-[LabeledGlobalKey#35b21] ← ⋯
I/flutter (29420): │ offset: Offset(0.0, 0.0)
I/flutter (29420): │
I/flutter (29420): └─child 1: OffsetLayer#63d8c
I/flutter (29420): │ creator: RepaintBoundary-[GlobalKey#0b22a] ← IgnorePointer ←
I/flutter (29420): │ FadeTransition ← FractionalTranslation ← SlideTransition ←
I/flutter (29420): │ _MountainViewPageTransition ← AnimatedBuilder ← RepaintBoundary
I/flutter (29420): │ ← _FocusScopeMarker ← Semantics ← FocusScope ← PageStorage ← ⋯
I/flutter (29420): │ offset: Offset(0.0, 0.0)
I/flutter (29420): │
I/flutter (29420): └─child 1: PhysicalModelLayer#6e5a5
I/flutter (29420): │ elevation: 0.0
I/flutter (29420): │ color: Color(0xfffafafa)
I/flutter (29420): │
I/flutter (29420): ├─child 1: OffsetLayer#3cb26
I/flutter (29420): │ │ creator: RepaintBoundary ←
I/flutter (29420): │ │ NotificationListener ←
I/flutter (29420): │ │ GlowingOverscrollIndicator ← Scrollable ←
I/flutter (29420): │ │ PrimaryScrollController ← ListView ←
I/flutter (29420): │ │ DropdownButtonHideUnderline ← MediaQuery ← Padding ← SafeArea ←
I/flutter (29420): │ │ _FormScope ← WillPopScope ← ⋯
I/flutter (29420): │ │ offset: Offset(0.0, 80.0)
I/flutter (29420): │ │
I/flutter (29420): │ ├─child 1: OffsetLayer#3aa65
I/flutter (29420): │ │ │ creator: RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter (29420): │ │ │ NotificationListener ←
I/flutter (29420): │ │ │ GlowingOverscrollIndicator ← Scrollable ←
I/flutter (29420): │ │ │ PrimaryScrollController ← ListView ←
I/flutter (29420): │ │ │ DropdownButtonHideUnderline ← MediaQuery ← Padding ← SafeArea ←
I/flutter (29420): │ │ │ ⋯
I/flutter (29420): │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ └─child 1: OffsetLayer#969d7
I/flutter (29420): │ │ │ creator: Viewport ← _ScrollableScope ←
I/flutter (29420): │ │ │ IgnorePointer-[GlobalKey#6033c] ← Semantics ← Listener ←
I/flutter (29420): │ │ │ _GestureSemantics ←
I/flutter (29420): │ │ │ RawGestureDetector-[LabeledGlobalKey#dca0d]
I/flutter (29420): │ │ │ ← _ExcludableScrollSemantics-[GlobalKey#20207] ←
I/flutter (29420): │ │ │ RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter (29420): │ │ │ NotificationListener ← ⋯
I/flutter (29420): │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 1: OffsetLayer#091ed
I/flutter (29420): │ │ │ │ creator: RepaintBoundary-[<0>] ←
I/flutter (29420): │ │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ │ AutomaticKeepAlive ← SliverList ← SliverPadding ← Viewport ←
I/flutter (29420): │ │ │ │ _ScrollableScope ← IgnorePointer-[GlobalKey#6033c] ← Semantics
I/flutter (29420): │ │ │ │ ← Listener ← _GestureSemantics ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(16.0, 16.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 1: PictureLayer#079bd
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 328.0, 86.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 2: OffsetLayer#757b3
I/flutter (29420): │ │ │ │ creator: RepaintBoundary-[<1>] ←
I/flutter (29420): │ │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ │ AutomaticKeepAlive ← SliverList ← SliverPadding ← Viewport ←
I/flutter (29420): │ │ │ │ _ScrollableScope ← IgnorePointer-[GlobalKey#6033c] ← Semantics
I/flutter (29420): │ │ │ │ ← Listener ← _GestureSemantics ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(16.0, 102.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 1: PictureLayer#11426
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 328.0, 86.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ └─child 3: OffsetLayer#f34e2
I/flutter (29420): │ │ │ creator: RepaintBoundary-[<2>] ←
I/flutter (29420): │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ AutomaticKeepAlive ← SliverList ← SliverPadding ← Viewport ←
I/flutter (29420): │ │ │ _ScrollableScope ← IgnorePointer-[GlobalKey#6033c] ← Semantics
I/flutter (29420): │ │ │ ← Listener ← _GestureSemantics ← ⋯
I/flutter (29420): │ │ │ offset: Offset(16.0, 188.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 1: PictureLayer#0b2dd
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 328.0, 300.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 2: TransformLayer#16a49
I/flutter (29420): │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │ transform:
I/flutter (29420): │ │ │ │ [0] 0.75,0.0,0.0,52.0
I/flutter (29420): │ │ │ │ [1] 0.0,0.75,0.0,14.0
I/flutter (29420): │ │ │ │ [2] 0.0,0.0,0.75,0.0
I/flutter (29420): │ │ │ │ [3] 0.0,0.0,0.0,1.0
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 1: PictureLayer#9a59b
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(-69.3, -18.7, 368.0, 381.3)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 3: PictureLayer#93557
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 328.0, 300.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 4: OffsetLayer#0eb98
I/flutter (29420): │ │ │ │ creator: RepaintBoundary ← _Decorator ← InputDecorator ←
I/flutter (29420): │ │ │ │ AnimatedBuilder ← Listener ← RawGestureDetector ←
I/flutter (29420): │ │ │ │ GestureDetector ← IgnorePointer ← Semantics ← TextField ←
I/flutter (29420): │ │ │ │ TextFormField ← Padding ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(52.0, 36.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 1: OffsetLayer#b8c74
I/flutter (29420): │ │ │ │ creator: RepaintBoundary ←
I/flutter (29420): │ │ │ │ NotificationListener ←
I/flutter (29420): │ │ │ │ GlowingOverscrollIndicator ← Scrollable ←
I/flutter (29420): │ │ │ │ EditableText-[LabeledGlobalKey#f4650] ←
I/flutter (29420): │ │ │ │ RepaintBoundary ← _Decorator ← InputDecorator ← AnimatedBuilder
I/flutter (29420): │ │ │ │ ← Listener ← RawGestureDetector ← GestureDetector ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ ├─child 1: OffsetLayer#e392d
I/flutter (29420): │ │ │ │ │ creator: RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter (29420): │ │ │ │ │ NotificationListener ←
I/flutter (29420): │ │ │ │ │ GlowingOverscrollIndicator ← Scrollable ←
I/flutter (29420): │ │ │ │ │ EditableText-[LabeledGlobalKey#f4650] ←
I/flutter (29420): │ │ │ │ │ RepaintBoundary ← _Decorator ← InputDecorator ← AnimatedBuilder
I/flutter (29420): │ │ │ │ │ ← Listener ← ⋯
I/flutter (29420): │ │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │ │
I/flutter (29420): │ │ │ │ └─child 1: LeaderLayer#a2ba9
I/flutter (29420): │ │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │ │ link: LayerLink#69763()
I/flutter (29420): │ │ │ │ │
I/flutter (29420): │ │ │ │ └─child 1: PictureLayer#30c5c
I/flutter (29420): │ │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 264.0, 22.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 2: PictureLayer#acd0d
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 264.0, 22.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 5: PictureLayer#44ff0
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 328.0, 300.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ └─child 6: OffsetLayer#cef04
I/flutter (29420): │ │ │ creator: RepaintBoundary ←
I/flutter (29420): │ │ │ NotificationListener ←
I/flutter (29420): │ │ │ GlowingOverscrollIndicator ← Scrollable ← ListView ← Padding ←
I/flutter (29420): │ │ │ DecoratedBox ← ConstrainedBox ← Padding ← Container ← Column ←
I/flutter (29420): │ │ │ ConstrainedBox ← ⋯
I/flutter (29420): │ │ │ offset: Offset(41.0, 76.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ ├─child 1: OffsetLayer#c0264
I/flutter (29420): │ │ │ │ creator: RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter (29420): │ │ │ │ NotificationListener ←
I/flutter (29420): │ │ │ │ GlowingOverscrollIndicator ← Scrollable ← ListView ← Padding ←
I/flutter (29420): │ │ │ │ DecoratedBox ← ConstrainedBox ← Padding ← Container ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 1: OffsetLayer#d78f3
I/flutter (29420): │ │ │ │ creator: Viewport ← _ScrollableScope ←
I/flutter (29420): │ │ │ │ IgnorePointer-[GlobalKey#08fdd] ← Semantics ← Listener ←
I/flutter (29420): │ │ │ │ _GestureSemantics ←
I/flutter (29420): │ │ │ │ RawGestureDetector-[LabeledGlobalKey#936b6]
I/flutter (29420): │ │ │ │ ← _ExcludableScrollSemantics-[GlobalKey#184c3] ←
I/flutter (29420): │ │ │ │ RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter (29420): │ │ │ │ NotificationListener ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ ├─child 1: OffsetLayer#7af33
I/flutter (29420): │ │ │ │ │ creator: RepaintBoundary-[<0>] ←
I/flutter (29420): │ │ │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ │ │ AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ←
I/flutter (29420): │ │ │ │ │ Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#08fdd] ←
I/flutter (29420): │ │ │ │ │ Semantics ← Listener ← ⋯
I/flutter (29420): │ │ │ │ │ offset: Offset(0.0, 0.0)
I/flutter (29420): │ │ │ │ │
I/flutter (29420): │ │ │ │ └─child 1: PictureLayer#e27cc
I/flutter (29420): │ │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 286.0, 50.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ ├─child 2: OffsetLayer#5cf7c
I/flutter (29420): │ │ │ │ │ creator: RepaintBoundary-[<1>] ←
I/flutter (29420): │ │ │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ │ │ AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ←
I/flutter (29420): │ │ │ │ │ Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#08fdd] ←
I/flutter (29420): │ │ │ │ │ Semantics ← Listener ← ⋯
I/flutter (29420): │ │ │ │ │ offset: Offset(0.0, 50.0)
I/flutter (29420): │ │ │ │ │
I/flutter (29420): │ │ │ │ └─child 1: PictureLayer#30e6d
I/flutter (29420): │ │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 286.0, 50.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ ├─child 3: OffsetLayer#73320
I/flutter (29420): │ │ │ │ │ creator: RepaintBoundary-[<2>] ←
I/flutter (29420): │ │ │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ │ │ AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ←
I/flutter (29420): │ │ │ │ │ Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#08fdd] ←
I/flutter (29420): │ │ │ │ │ Semantics ← Listener ← ⋯
I/flutter (29420): │ │ │ │ │ offset: Offset(0.0, 100.0)
I/flutter (29420): │ │ │ │ │
I/flutter (29420): │ │ │ │ └─child 1: PictureLayer#ad319
I/flutter (29420): │ │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 286.0, 50.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 4: OffsetLayer#d9c0c
I/flutter (29420): │ │ │ │ creator: RepaintBoundary-[<3>] ←
I/flutter (29420): │ │ │ │ NotificationListener ← KeepAlive ←
I/flutter (29420): │ │ │ │ AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ←
I/flutter (29420): │ │ │ │ Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#08fdd] ←
I/flutter (29420): │ │ │ │ Semantics ← Listener ← ⋯
I/flutter (29420): │ │ │ │ offset: Offset(0.0, 150.0)
I/flutter (29420): │ │ │ │
I/flutter (29420): │ │ │ └─child 1: PictureLayer#b7aa2
I/flutter (29420): │ │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 286.0, 50.0)
I/flutter (29420): │ │ │
I/flutter (29420): │ │ └─child 2: PictureLayer#5189a
I/flutter (29420): │ │ paint bounds: Rect.fromLTRB(0.0, 0.0, 286.0, 148.0)
I/flutter (29420): │ │
I/flutter (29420): │ └─child 2: PictureLayer#47c88
I/flutter (29420): │ paint bounds: Rect.fromLTRB(0.0, 0.0, 360.0, 512.0)
I/flutter (29420): │
I/flutter (29420): └─child 2: PictureLayer#0476b
I/flutter (29420): paint bounds: Rect.fromLTRB(0.0, 0.0, 360.0, 592.0)
Screnshots
SilverList containing elements A1, A2, A3, A4
goderbauer commentedon Jun 12, 2018
Just looked into this a little bit locally: In the error case the viewport does not clip because
hasVisualOverflowevaluates to false here:https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/viewport.dart#L514-L518
In the case where the viewport does clip,
hasVisualOverflowis set to true inupdateOutOfBandData:https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/viewport.dart#L1330-L1341
Need to do some more digging to figure out why the sliver children in one case think that they do not overflow.
goderbauer commentedon Jun 12, 2018
I believe this is an unintended side-effect of adding the
cacheExtentto the viewport (in fact, if you setcacheExtent: 0.0on the ListView in question everything works as expected). The problem is probably that the SliverList calculateshasVisualOverflowbased on thecacheExtentand not thepaintExtenthere:https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/sliver_list.dart#L283
I'll be looking into a fix.
luizjunior05 commentedon Jun 12, 2018
Thanks @goderbauer , it really works as expected.
goderbauer commentedon Jun 12, 2018
@luizjunior05 Just FYI: If you set
cacheExtent: 0.0you reduce the accessibility of your app on iOS. I would not recommend shipping that.luizjunior05 commentedon Jun 12, 2018
I understand. Initially my application will only be used for the android platform. I believe that over time we will have a definitive solution.
goderbauer commentedon Jun 12, 2018
See also: #18368 and #17716, which are both caused by the same root cause.
lock commentedon May 21, 2020
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.