Question 80134 in Flutter Question posted in
The official Flutter documentation can be found here.

ListTiles inside ListView won't disappear on scrolling – Flutter

I’ve got a ListView within a Column. In that Listview I want to place a couple of ListTiles. Unfortunately the tiles behave weird when scrolling. They are shown on top of the other widget placed in the Column

Is there a way to prevent that behaviour of ListTile?

Here is my code:

Column(children: [
    const ChatHeader(),
    Padding(
        padding: const EdgeInsets.all(8),
        child: SizedBox(
            height: 300,
            child: ListView.builder(
                padding: const EdgeInsets.only(left: 8, right: 8),
                scrollDirection: Axis.vertical,
                itemCount: myCollection,
                shrinkWrap: true,
                physics: const BouncingScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  var item = myCollection[index];
                  return Column(children: [
                    Row(
                      children: [
                        Container(
                            decoration: boxDecoration(
                                radius: 20, bgColor: d_colorPrimary)),
                        text("${item.value1}", fontSize: textSizeMedium)
                      ],
                    ),
                    ListTile(
                        dense: true,
                        shape: const RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(8))),
                        tileColor: quiz_light_gray,
                        title: SizedBox(
                            child: text(item.name,
                                fontSize: textSizeMedium,
                                textColor: d_textColorPrimary,
                                isLongText: true,
                                maxLine: 10)))
                  ]);
                }))),
    16.height,
    Container(color: greenColor, child: Text("text input here"))
  ]);

Replacing the ListTiles with a Container solves this problem. As far as I can see there is no property to prevent that behaviour. Still want to use ListTiles.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've wrapped the SizedBox with the ListView in a Material widget. That solved the problem.


  2. 0

    1. Perhaps this is because of the usage of BouncingScrollPhysics().
      Try replacing it with Neverscrollablescrollphysics() or just wrap the whole Listview.builder with an Expanded widget. which will let you won’t use shirnkWrap and physics properties.

    2. If the Container widget fixes the issue then you can try wrapping Listile() with another Sizedbox() widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search