Flutter Card ListTile Image Text

Question

Im a bit new on widgets for flutter app, and Im trying to make a desing on a card, that si being imposible, hope you can help me.

This is my Widget for a card (im using listview).

Widget _cardSermon(BuildContext context, Data data) {
return Card(
  elevation: 3,
  margin: EdgeInsets.symmetric(vertical: 7), 
  child: ListTile(
    dense: true,
    leading: data.image != null ? Image.network("https://docs.google.com/uc?export=view&id="+data.image, height: 250, fit: BoxFit.fill) : Image.asset("assets/images/700_x_350.jpg"),
    title: new Text(
      data.title,
      style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
    ),
    subtitle: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Text(data.location,
              style: new TextStyle(
                  fontSize: 14.0, fontWeight: FontWeight.normal)),
          new Text('Population: ${data.date}',
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.normal)),
        ]),
    onTap: () {
      print("taped");
    },
  )
);

So this is my result:

Is not so bad, but this is not what im expected, for example, im getting margin on images that i dont want, and cant add margin between title and textx.

This is what i really want:

Really hope you can help me, or give some aproximate design, is being so hard, I cant find enought help yet, thanks everybody.

Solution

To achieve what you want you should change ListTile for a 'custom' layout Container with a Row in a Card.

You could use this to get you started:

        Container(
          height: 150,
          child: Card(
            color: Colors.orange,
            child: Row(
              children: [
                Expanded(
                  flex: 33,
                  child: Image.network(
                    'https://picsum.photos/250?image=9',
                  ),
                ),
                Expanded(
                  flex: 66,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 50,
                        child: Center(child: Text('abc')),
                      ),
                      Expanded(flex: 25, child: Text('def')),
                      Expanded(flex: 25, child: Text('ghi')),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),

Comments

[Alberto Acuña]

the image is bigger than 33% and gives a important error on design, you sould test ur code and you will see it, but thanks

[Alberto Acuña]

the problem here is, the image is compressed in the max width set, but the good think will be that, the image dont get compressed, and just the card take height image, maybe so dificilut? but thanks

[Kadri Nadir]

i already edited my code it works with every sizes you want .

[Alberto Acuña]

now having error on image / icon : "Another exception was thrown: A RenderFlex overflowed by 2.3 pixels on the right."

[Kadri Nadir]

to get solution to this error you'll juste need to add some sizes to the rest of it i tried it on flutter web it work pretty fine but if you want none bug overflow you just need to add sizes to the rest of elements in order to get an addintion of 100% from width screen. if your image takes 33%(0.33) width the rest should take 67% (0.67) if you want some edits i'll shall do it very clean way but you'll need to wait late on night . Good luck