Search code examples
flutterflutter-layout

How to solve ListView.builder bottom overflow issue?


I'm having the same issue that is outlined here. I've tried all of the solutions provided and I'm still getting an error "RenderFlex overflowed by x pixels on the bottom". I don't have any widgets underneath the custom ListView Builder. I'm really at a loss here.

Widget build(BuildContext context) {
return new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new GradientAppBar("Twitter"),
    new Container(
      child: Flexible(
        child: Column(
          children: <Widget>[
            Container(
              padding: const EdgeInsets.only(top: 10.0, left: 10.0),
              child: UserInfoHeader(userinfo)
            ),
            PagewiseListView(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              physics: const AlwaysScrollableScrollPhysics(),
              pageSize: 200,
              itemBuilder: (context, TwitterCardContent entry, _) {
                return TwitterCard(entry);
              },
              pageFuture: (pageIndex) {
                return getStatuses(userinfo.screenName);
              },
            )
          ],
        ),
      ), 
    ),
  ],
);

}

And here is the contents of each List item.

Widget build(BuildContext context) {
return new Card(
  //elevation: 8.0,
  margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
  child: Container(
    decoration: new BoxDecoration(
      color: Colors.white,
      borderRadius: new BorderRadius.circular(25.0)
    ),
    child: ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
      leading: Container(
        padding: EdgeInsets.only(right: 12.0),
        decoration: new BoxDecoration(
          border: new Border(
            right: new BorderSide(width: 1.0, color: Colors.white54)
          )
        ),
        child: notchecked,
      ),
      title: Text(
        statusCard.timeStampString,
        style: Theme.TextStyles.buttonText,
      ),
      subtitle: Text(
        statusCard.text,
        style: Theme.TextStyles.contentCardText,
      ),
      trailing: delete,
    ),
  ),
);

}


Solution

  • Column widget doesn't scroll and you have that widget as your parent widget and PageListView as a child inside it. Instead, replace your parent Column widget with ListView that should resolve renderflow exception.