How to create custom ListView Item like this in flutter?

Question

I want to create listitem like this:

But I can only create listItem like this:

With code like this:

class incomingLotsItem extends StatelessWidget{

IncomingLots incomingLots; incomingLotsItem(DocumentSnapshot snapShot) {

String acceptanceDate = snapShot.data['acceptanceDate'];
String lotNumber = snapShot.data['lotNumber'];
String ddtDate = snapShot.data['ddtDate'];
String foodName = snapShot.data['foodName'];
String dueDtae = snapShot.data['dueDtae'];
String ddtNumber = snapShot.data['ddtNumber'];
String origin = snapShot.data['origin'];
String quantity = snapShot.data['quantity'] + snapShot.data['um'];

incomingLots = IncomingLots(acceptanceDate,lotNumber,ddtDate,foodName,dueDtae,ddtNumber,origin,quantity);

}

@override Widget build(BuildContext context) {

Widget row1 = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Date acceptance: "+incomingLots.dateAcceptance.split(" ")[0].replaceAll("-", "/"),style: TextStyle(fontSize: 12, color: Colors.black), textAlign: TextAlign.left,)),
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Nr. DDT: "+incomingLots.ddtNumber,style: TextStyle(fontSize: 12, color: Colors.black),),),
  ],
);
Widget row2 = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Lot number: "+incomingLots.lotNumber,style: TextStyle(fontSize: 12, color: Colors.black)),),
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Origin: "+incomingLots.origin,style: TextStyle(fontSize: 12, color: Colors.black),),),
  ],
);
Widget row3 = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0), child: Text("Date DDT: "+incomingLots.ddtDate.split(" ")[0].replaceAll("-", "/"),style: TextStyle(fontSize: 12, color: Colors.black))),
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Qty: "+incomingLots.quantity,style: TextStyle(fontSize: 12, color: Colors.black),),),
  ],
);

Widget row4 = Row(
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Food name: "+incomingLots.foodName,style: TextStyle(fontSize: 12, color: Colors.black)),),
  ],
);
Widget row5 = Row(
  children: [
    Padding(padding: EdgeInsets.fromLTRB(0, 8, 0, 0),child: Text("Due date: "+incomingLots.dueDate.split(" ")[0].replaceAll("-", "/"),style: TextStyle(fontSize: 12, color: Colors.black,),))
  ],
);

Widget column = Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    row1,row2,row3,row4,row5
  ],
);

return column;

} }

Kindly tell me where am I wrong?

Noam Noam · Accepted Answer · 2019-09-01T20:00:31

Instead of one column with 5 rows, I would do something like that:

create one row and within it two columns, one for each side. then, you can add rows to each columns (5 for the right and 3 for the left).

I hope I helped you, if it's not clear enough, let me know!

We need to use CrossAxisAlignment.start to create widget this way.

How to create custom ListView Item like this in flutter?

1 Answers