Expansion Tile and Listview

Asked

Viewed 714 times

1

I’m trying to create this layout for an app, I used an Expansion Tile inside a Card and a listview below, but when I open the expansionTile, if hitting the bottom of the screen happened that and if the listview has many Iles happens that, I’m not getting any way to solve this problem.

Follow my code below:

     class HomeState extends State<Teste>{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text (""),
          ),
            body: Container(
              padding: EdgeInsets.all(15.0),
              child: Column(
                children: <Widget>[
                  CardList(),
                  MyList()
                ],
              ),
            ),
        );
      }
    }

    Widget CardList(){
      return new Flexible(
          child: Card(
            elevation: 5,
            color: Color.fromARGB(255, 0xC8, 0xF4, 0xF2),
            child: ExpansionTile(
              title: Text("Periodo",
                style: new TextStyle(
                ),textAlign: TextAlign.center,
              ),
              children: <Widget>[
                ListaPeriodos(10)
              ],
            ),
          )
      );
    }

Widget MyList(){
  return new ListView.builder(
    padding: EdgeInsets.all(10.0),
    shrinkWrap: true,
    itemBuilder: (BuildContext context, int index) {
      return new ListTile(
        title: new Text(
          "Texto",
          textAlign: TextAlign.center,
          style: new TextStyle(
            fontWeight: FontWeight.normal,
            color: Colors.black45
          ),
        ),
      );
    },
    itemCount: 15,
  );
}
dart flutter
  • 1

    From what I understand your content is overflowing the possible screen size. Try to put your Widgets tree in a Singlechildscrollview().

  • Thanks, I did that and it worked visually, but now I can’t roll the page, only if I run my finger through the edge of the screen. My idea is that this Ile expander is fixed on the screen, while the list below is scrollable, the list options will be shown according to what is selected in the Ile expander.

  • Got it, in case your full screen content might be "scrolled" isn’t that it? and in case the tile and the list is larger than the screen you will make the "scroll" in the two widgets? Because I kept thinking about your layout and I think that the selector you presented would be with the best content presented in a Dialog that displays your options. So only the list would have scroll. Here is the suggestion.

1 answer

1

Errors occur because you have not indicated a limit height of the ListView and she’s inside the Column of ExpansionTile, it grows according to the amount of items, this way at some point exceeds the screen limit and error happens.

One possible solution is to involve your ListView in a Container limited height with a height less than that of the entire screen, for example 200, thus allowing scrolling both the list (Within these 200), and the screen.

You limit the height of ListView using the Container avoids error and activates the Listview scroll itself, without the need to implement a SingleChildScrollView.

Browser other questions tagged dart flutter

You are not signed in. Login or sign up in order to post.