CODEWITHSUNDEEP
flutterdart
mustafa zaki
mustafa zaki

Reputation: 407

Flutter error with ListView.builder(). error: Bottom Overflowed by 279 pixels

class TransactionWidget extends StatelessWidget {
  final List<Transaction> _transaction;

  TransactionWidget(this._transaction);
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 500,
        child: ListView.builder(
          itemBuilder: (ctx, index) {
            return Card(
                child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  child: Text(
                    '\$${_transaction[index].amount.toString()}',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        color: Colors.blue),
                  ),
                  decoration: BoxDecoration(
                      border: Border.all(width: 2, color: Colors.lightBlue)),
                  padding: EdgeInsets.all(8),
                ), // amount ICON (Left)
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      _transaction[index].title,
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
                    ), // Text Title
                    Text(
                      DateFormat('dd-MM-yyyy').format(_transaction[index].date),
                      style: TextStyle(fontSize: 13, color: Colors.grey),
                    ), // Text Date
                  ],
                ) // Text of Title and Date
              ],
            ));
          },
          itemCount: _transaction.length,
        ));
  }
}

I am building a flutter app that shows a list of transactions entered by the user. The following code is to build and display multiple transactions, however whenever I open the keyboard to enter a new transaction the overflow error occurs. Above the transaction list I have added the 'Card' widget that takes the user input and adds a new transaction. The screenshot of the app

Upvotes: 0

Views: 544

Answers (3)

Joseph Isiyemi
Joseph Isiyemi

Reputation: 1

Instead of setting a height for your listview container to 500, you can wrap your listview container with the Expanded widget, this will adjust the listview to changes in the screen size and orientation.

Upvotes: 0

Silo&#233; Bezerra Bispo
Silo&#233; Bezerra Bispo

Reputation: 2244

You are using a fixed size in your Container, the 'height: 500', so don't care if you are using a ListView. Try to remove if you can, because the ListView will manage the size.

Upvotes: 0

Joy Terence
Joy Terence

Reputation: 730

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

This will avoid resizing when keyboard opens and thus avoid any overflows

Upvotes: 1

Related Questions