I'm trying to build a ListView but I can't do that my list hit the bottom without overflowing it, the way that I found to work was setting the height on a container, but, when I use my personal device I got a big white space below my list. I already tried the flexible and expanded widgets before the list, but neither worked, I always get the same errors:

[FurkannCetin]

RenderFlex children have non-zero flex but incoming height constraints are unbounded

Vertical viewport was given unbounded height error.

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.blueAccent,
title: Padding(
padding: EdgeInsets.only(left: 5.0),
child: Text(
user.name,
style: TextStyle(fontSize: 30.0),
),
),
actions: [
IconButton(
alignment: Alignment.center,
icon: Icon(Icons.forward),
onPressed: () {},
),
],
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.blueAccent,
child: Padding(
padding: EdgeInsets.only(top: 30.0, left: 20.0, right: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Conta",
style: TextStyle(fontSize: 17.0, color: Colors.white)),
Divider(color: Colors.blueAccent),
Text("${user.bankAccount} / ${user.agency}",
style: TextStyle(fontSize: 30.0, color: Colors.white)),
Padding(
padding: EdgeInsets.only(top: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Saldo",
style:
TextStyle(fontSize: 17.0, color: Colors.white)),
Divider(color: Colors.blueAccent),
Text("${user.balance}",
style:
TextStyle(fontSize: 30.0, color: Colors.white)),
Divider(color: Colors.blueAccent),
],
),
),
],
),
),
),
Divider(color: Colors.white),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Recentes",
style: TextStyle(fontSize: 20.0, color: Colors.black)),
FutureBuilder(
future: getuserStatement(user.userId),
builder: getstatements,
),
],
),
),
],
),
);
}

Future getuserStatement(int id) {
return api.getUserExtract(id);
}

Widget getstatements(BuildContext context, AsyncSnapshot snapshot) {
return !snapshot.hasData
? Center(child: CircularProgressIndicator())
: Container(
height: 340,
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
print(snapshot.data[index].title);
return Card(
elevation: 5,
child: Column(
children: [
Padding(
padding: EdgeInsets.only(top: 10.0, left: 10.0),
child: Row(
children: [
Text(snapshot.data[index].title),
Expanded(
child: Align(
alignment: Alignment(0.90, 0.00),
child: Text(snapshot.data[index].date),
),
),
],
),
),
Padding(
padding:
EdgeInsets.only(top: 20.0, bottom: 10.0, left: 10.0),
child: Row(
children: [
Text(snapshot.data[index].desc),
Expanded(
child: Align(
alignment: Alignment(0.90, 0.00),
child:
Text(snapshot.data[index].value.toString()),
),
),
],
),
)
],
),
);
},
),
);
}
}

[Limzen]

The issue you're facing, where the ListView creates an overflow or a white space at the bottom, is related to unbounded height constraints in the widget structure. Specifically, placing a ListView inside a Column without constraints causes this error, as ListView requires a definite height.

Here's a solution:

1. Wrap ListView in an Expanded widget: This will allow ListView to take up the remaining space within the Column without overflow errors.

2. Remove any specific height settings in ListView's container, if you've set them.

Here's how to update your code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 0,
      backgroundColor: Colors.blueAccent,
      title: Padding(
        padding: EdgeInsets.only(left: 5.0),
        child: Text(
          user.name,
          style: TextStyle(fontSize: 30.0),
        ),
      ),
      actions: [
        IconButton(
          alignment: Alignment.center,
          icon: Icon(Icons.forward),
          onPressed: () {},
        ),
      ],
    ),
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          color: Colors.blueAccent,
          child: Padding(
            padding: EdgeInsets.only(top: 30.0, left: 20.0, right: 20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Conta", style: TextStyle(fontSize: 17.0, color: Colors.white)),
                Divider(color: Colors.blueAccent),
                Text("${user.bankAccount} / ${user.agency}", style: TextStyle(fontSize: 30.0, color: Colors.white)),
                Padding(
                  padding: EdgeInsets.only(top: 30.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Saldo", style: TextStyle(fontSize: 17.0, color: Colors.white)),
                      Divider(color: Colors.blueAccent),
                      Text("${user.balance}", style: TextStyle(fontSize: 30.0, color: Colors.white)),
                      Divider(color: Colors.blueAccent),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        Divider(color: Colors.white),
        Padding(
          padding: EdgeInsets.only(left: 20.0, right: 20.0),
          child: Text("Recentes", style: TextStyle(fontSize: 20.0, color: Colors.black)),
        ),
        Expanded(
          child: FutureBuilder(
            future: getuserStatement(user.userId),
            builder: getstatements,
          ),
        ),
      ],
    ),
  );
}

Widget getstatements(BuildContext context, AsyncSnapshot snapshot) {
  return !snapshot.hasData
      ? Center(child: CircularProgressIndicator())
      : ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (context, index) {
            return Card(
              elevation: 5,
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.only(top: 10.0, left: 10.0),
                    child: Row(
                      children: [
                        Text(snapshot.data[index].title),
                        Expanded(
                          child: Align(
                            alignment: Alignment(0.90, 0.00),
                            child: Text(snapshot.data[index].date),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 20.0, bottom: 10.0, left: 10.0),
                    child: Row(
                      children: [
                        Text(snapshot.data[index].desc),
                        Expanded(
                          child: Align(
                            alignment: Alignment(0.90, 0.00),
                            child: Text(snapshot.data[index].value.toString()),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        );
}

Explanation

• Wrapping FutureBuilder (and thus ListView) in an Expanded widget inside the Column will constrain the height of ListView to the available space, eliminating the overflow error.
• Removing the fixed height on ListView's container gives it flexibility to adjust to different screen sizes without leaving white space.

This should resolve the issue with the white space and allow ListView to scroll properly within the available screen space.