Flutter Grid View image and tilte - flutter

Question

Hi I am creating a flutter screen as follow.
I want to add name under image. If I add column, image is shrink.
May I know how I can add the artist name under image.
Here is the code that I have created for following screen
Widget buidArtistScreen(BuildContext context, List<Artist> artists) =>
GridView.builder(
itemCount: artists.length,
itemBuilder: (context, index) => buidImageCard(index, artists[index]),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
),
);
Widget buidImageCard(int index, Artist artist) => Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
margin: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artist.profilePicture),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Container(
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(100)),
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
),
),
),
),
);
Here is the code with artist name
Widget buidImageCard(int index, Artist artist) => Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
margin: const EdgeInsets.all(8),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artist.profilePicture),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Container(
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(100)),
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
),
),
),
const SizedBox(height: 20,),
Text(artist.name)
],
),
),
);
}

Answer 1

This is how I achieved. Added Expanded.
Widget buildImageCard(int index, Artist artist) => Card(
clipBehavior: Clip.antiAlias,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AlbumScreen(artist: artist),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artist.profilePicture),
fit: BoxFit.cover,
),
),
child: Align(
alignment: Alignment.bottomRight,
child: Container(
margin: const EdgeInsets.all(5),
//padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(100)),
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
),
),
),
Container(
padding: const EdgeInsets.all(8.0),
child: Text(artist.name),
)
]),
),
);