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.

Answer 1

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')),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),

Answer 2

i don't think that you have full control of a tile.
You can just add sizes to this solution.

GestureDetector(
            child: Card(
              elevation: 3,
              color: Colors.black38,
              child: Row(
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.33,
                    child: Image.asset(
                      "assets/images/banane.jpg",
                      fit: BoxFit.fill,
                    ),
                  ),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "title",
                          style: new TextStyle(
                              fontSize: 15.0, fontWeight: FontWeight.bold),
                        ),
                        new Text(
                          "location",
                          style: new TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.normal,
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              'Population: ${22 / 06 / 2020}',
                              style: TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.normal,
                              ),
                            ),
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 8.0),
                              child: Icon(Icons.data_usage),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            onTap: () {},
          ),