ListTile with rectangle image and text

900 Views Asked by At

Newbie to Flutter. I want to design screen like below. I am using ListTile but it not allowing me to add multiple text. Help would be appreciated.

enter image description here

@override
  Widget build(BuildContext context) {
   return Scaffold(
    body: Center(
          child: new ListView.builder(
              itemCount: _ProductsList.length,
              itemBuilder: (BuildContext ctxt, int i) {
                final img = _ProductsList[i].image_urls;
                return new Card(
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          leading: ConstrainedBox(
                            constraints: BoxConstraints(
                              minWidth: 44,
                              minHeight: 44,
                              maxWidth: 64,
                              maxHeight: 64,
                            ),
                            child: Image.network('$url$img'),
                          ),
                           title: Text(_ProductsList[i].title, style: kListTileShopTitleText,),
                          onTap: () {        
                          },
                        ),
                      ],
                    )
                );
              })
      )
    );
 }
2

There are 2 best solutions below

0
On BEST ANSWER

You can acheive this by using richtext but the code will become messy, listtile provides limited feature, instead of list you should use columns and rows like this:

Column(
Children:[
Row(
Children:[
Card/Container(
//your rectangle image wether using container or card
),
Column(
Children:[
Text(""$itemName),
Row(
Children:[
Icon(
//Rating Icon
),
Text(''$averagerating),
Text(''$totalratings),
]
),
Row(
Children:[
Icon(
//Currency Icon
),
Text(''$Discountedprice),
Text(''$Originalprice),
]
),
]
),]),]),
0
On

Use the properties of listile, title, and subtitle. Inside of this you can use any widget as a column so you can put more text. Another solultion is to construct your own widget to replace the listile.