ListView containing a multiline Textfield followed by ListTiles in flutter

Question

The goal is to have a ListView that contains a multiline texfield (with an arbitrary number of lines, maxLines=null) that is followed by several ListTiles. When lines are added to the TextField, it grows and the ListTiles should move accordingly. However, there is an unexpected behaviour with the following code:

@override
  Widget build(BuildContext context) {
    
    ListView l = new ListView(children: [

      TextField(maxLines: null),

      SizedBox(height: 50, child: ColoredBox(color: Colors.yellow,child: Text("Tile1"),) ),

      ListTile(tileColor: Colors.blueGrey,title: Text("Tile1"),),

      ListTile(tileColor: Colors.blueGrey,title: Icon(Icons.looks_two_rounded),)
    ]);

    return Scaffold(backgroundColor: Color(0xdcdcffff), body: Center(child: l));
  }

https://gfycat.com/fr/obviousshorttermchihuahua

The green colored box moves down at expected but the ListTiles do not (although their children do), until I scroll, then they move where they should've been.

Is there any way to solve this ?

score 0 · Answer 1 · answered Sep 01 '21 at 18:27

I don't know what exactly caused the bug, but I found a workaround that could perhaps be useful to someone trying to do the same: I put the ListTile in transparent inside a Colored box:

@override
  Widget build(BuildContext context) {
    ListView l = new ListView(children: [
      TextField(maxLines: null),
      SizedBox(
          height: 50,
          child: ColoredBox(
            color: Colors.green,
            child: Text("Tile1"),
          )),
      ColoredBox(
        color: Color(0x77ff0000),
        child: ListTile(
          tileColor: Colors.transparent,
          title: Text("Tile1"),
        ),
      ),
      ColoredBox(
          color: Color(0x77ff0000),
          child: ListTile(
            tileColor: Colors.transparent,
            title: Icon(Icons.looks_two_rounded),
          )),
    ]);

    return Scaffold(body: Center(child: l));
  }

https://gfycat.com/fr/idioticquarrelsomegossamerwingedbutterfly

ListView containing a multiline Textfield followed by ListTiles in flutter

1 Answers1