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?

Ayaz Qureshi · Accepted Answer · 2019-09-13 06:02:45Z

1

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.

edited Sep 13, 2019 at 6:02

Ayaz Qureshi

234 bronze badges

answered Sep 1, 2019 at 20:00

Noam

3832 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ayaz Qureshi Over a year ago

I tried this, it doesn't solve our problem. If you do this, the 2nd column get stretched to the height of 1st column because the height of 1st column is more, this doesn't create our required UI. We need to perfectly align every text we have in colum/row. If you have any solution that can solve this problem then kindly let us know.

Ayaz Qureshi Over a year ago

I tried your solution and it worked with some modification, we have to use CrossAxisAlignment.start for this to actually work, the default will stretch the height of the column to the max.

Noam Over a year ago

glad to here it worked at the end, I suggest you to edit my answer to include your fix in order to help others.

Collectives™ on Stack Overflow

How to create custom ListView Item like this in flutter?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related