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
3 Réponses :
Scaffold( resizeToAvoidBottomInset: false, ... ) This will avoid resizing when keyboard opens and thus avoid any overflows
Vous utilisez une taille fixe dans votre Container , la « height: 500 », alors ne vous inquiétez pas si vous utilisez un ListView . Essayez de supprimer si vous le pouvez, car ListView gérera la taille.
Au lieu de définir une hauteur pour votre conteneur de vue de liste à 500, vous pouvez envelopper votre conteneur de vue de liste avec le widget Développé, cela ajustera la vue de liste aux changements de taille et d'orientation de l'écran.