Skip to content

ListView nested in Fixed height container that content overflows bug #17426

Closed

Description

@qiaoyuwen

This is the resulting picture:
wechatimg48

This is my code:

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.

flutter version 0.4.0

Activity

  1. luizjunior05 commented on Jun 1, 2018

    @luizjunior05

    That happened to me too.

    captura de tela de 2018-06-01 19-30-20

    This is my code:

    new Container(
      height: _allArea.length>3 ? 150.0 : _allArea.length*50.0,
      margin: EdgeInsets.only(left: 40.0),
      decoration: new BoxDecoration(
        color: Colors.white,
        border: new Border.all(color: theme.dividerColor)
      ),
      child: new ListView.builder(
        itemCount: _allArea.length,
        primary: false,
        itemBuilder: (BuildContext context, int index) {
          return new InkWell(
            onTap: (){_selectArea(_allArea[index]);} ,
            child: _sugestions(_allArea[index], theme),
          );
        },
      ),
    )

    Flutter version: 0.4.4

  2. Hixie commented on Jun 12, 2018

    @Hixie
    Contributor

    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).

    cc @goderbauer @liyuqian @HansMuller

  3. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    f: scrollingViewports, list views, slivers, etc.
    on Jun 12, 2018
  4. added this to the milestone on Jun 12, 2018
  5. luizjunior05 commented on Jun 12, 2018

    @luizjunior05

    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

    whatsapp image 2018-06-12 at 10 56 39 am

    whatsapp image 2018-06-12 at 11 15 41 am

    whatsapp image 2018-06-12 at 11 17 02 am

    whatsapp image 2018-06-12 at 12 50 14 pm

    SilverList containing elements A1, A2, A3, A4

    captura de tela de 2018-06-12 11-01-44

    captura de tela de 2018-06-12 11-27-22

  6. goderbauer commented on Jun 12, 2018

    @goderbauer
    Member

    Just looked into this a little bit locally: In the error case the viewport does not clip because hasVisualOverflow evaluates 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, hasVisualOverflow is set to true in updateOutOfBandData:

    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.

  7. goderbauer commented on Jun 12, 2018

    @goderbauer
    Member

    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.

  8. luizjunior05 commented on Jun 12, 2018

    @luizjunior05

    Thanks @goderbauer , it really works as expected.

  9. goderbauer commented on Jun 12, 2018

    @goderbauer
    Member

    @luizjunior05 Just FYI: If you set cacheExtent: 0.0 you reduce the accessibility of your app on iOS. I would not recommend shipping that.

  10. luizjunior05 commented on Jun 12, 2018

    @luizjunior05

    I understand. Initially my application will only be used for the android platform. I believe that over time we will have a definitive solution.

  11. goderbauer commented on Jun 12, 2018

    @goderbauer
    Member

    See also: #18368 and #17716, which are both caused by the same root cause.

  12. lock commented on May 21, 2020

    @lock

    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.

  13. locked and limited conversation to collaborators on May 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    f: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions