Place widgets correctly inside a Card

Question

I'm trying to create a ListView with Card widget.

I have the ListView and the Card but I can't figure out how to place widgets correctly inside the Card itself. This is how it looks now:

I want the favorites icon and the image to keep their place, but to move the text to be near the image and to have the "Jean-Paul-Gaultier" text to be closer to the "Le Male" and have it align left.

This is what I have so far:

Widget _myListView(BuildContext context) { 
return ListView.builder(
  itemBuilder: (context, index){
    return Card(

      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.network('${decoded[index]['image']}'),
              ),
            ],
          ),
          SizedBox(width: 8,),
          Column(
            children: <Widget>[
              Text(
                '${decoded[index]['name']}',
                style: TextStyle(
                  color: Colors.black87,
                  fontWeight: FontWeight.bold,
                  fontSize: 14,
                ),
              ),
              Row(
                children: <Widget>[
                  Text(
                    '${decoded[index]['brand']}',
                    style: TextStyle(
                      color: Colors.blueGrey,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.favorite_border),
              ),
            ],
          ),
        ],
      ),
    );
  },
);
}

Without the mainAxisAlignment: MainAxisAlignment.space-between the text is indeed closer to the image, but the favorites icon gets right near the text which is something I do not want.

I tried to search for answers but as I'm new to Flutter I don't really know the right keywords so I couldn't find anything.

Doc Doc · Accepted Answer · 2019-09-16T16:51:50

A much easier approach would be using a ListTile

  Widget _myListView(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            title: Text("title"),
            subtitle: Text("subtitle"),
            leading: Container(
              width: 48, height: 48,
              child: Placeholder(), //place image here replacing the Placeholder widget
            ),
            trailing: IconButton(
              icon: Icon(Icons.favorite_border),
              onPressed: () {},
            ),
          ),
        );
      },
    );
  }

which gives us

But if you want your code then here it is

  Widget _myListView(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Card(
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.all(8.0),
                child: Placeholder(),
                width: 48,
                height: 48,
              ),
              SizedBox(
                width: 8,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'title',
                    style: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.bold,
                      fontSize: 14,
                    ),
                  ),
                  Text(
                    'subtitle',
                    style: TextStyle(
                      color: Colors.blueGrey,
                      fontWeight: FontWeight.normal,
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
              Spacer(),
              IconButton(
                icon: Icon(Icons.favorite_border),
                onPressed: () {},
              ),
            ],
          ),
        );
      },
    );
  }

EDIT

to reduce the space between title and subtitle replace the title with following code

 title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("title",style: Theme.of(context).textTheme.body2,),
                 Text("subtitle",style: Theme.of(context).textTheme.caption,),
              ],
            ),

Place widgets correctly inside a Card

1 Answers