0

I want to put text below the image in a gridview

What I want:

enter image description here

What I have:

enter image description here

I want the music title and the artist name below the music cover, not inside, how do I do this?

Page code

Container Item code

gut
  • 29
  • 1
  • 6
  • Try my answer [here](https://stackoverflow.com/a/72008609/13997210) and [here](https://stackoverflow.com/a/71976662/13997210) hope its help to you In this answer I have put text below of the image, same as per your design or if you want add Text over/on the image then refer [this](https://stackoverflow.com/a/72656642/13997210) answer hope its help to you – Ravindra S. Patil Dec 27 '22 at 04:50

2 Answers2

1

Instead of using this in your container:

decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage(musicData['imagePath']),
    fit: BoxFit.fill,
  ),
  borderRadius: BorderRadius.circular(15),
),

Why not simply use a Column widget? With this, you can insert multiple widgets inside the children: field (instead of sticking to 1 maximum at your container)

So something that looks like that as example:

Column(
  children: const <Widget>[
    AssetImage(musicData['imagePath']),
    Text('Your title here'),
    Text('A description, etc.')
  ],
)
Jukoz
  • 117
  • 1
  • 6
  • I tried use a column but still doesn't work ([result here](https://iili.io/HTJ1SRe.png)), I tried wrap the widgets with an Expanded or Flexible, but the result was the same – gut Dec 27 '22 at 02:22
  • 1
    Looks like you just need to tweak some size values to keep the aesthetics you wish for. The column does the alignment right, it's just that all children have the same height/width. – Jukoz Dec 27 '22 at 02:27
1

You can try this

Column( children: const [

SizedBox(height:50,width:50,child:AssetImage(musicData['imagePath']),
Flexible(child:
          Text('Your title here',
                overflow: TextOverflow.ellipsis,maxLines: 1),),
Flexible(child:
         Text('description,etc.',
               overflow: TextOverflow.ellipsis,maxLines: 1),),

], )

Krina Bhojani
  • 36
  • 2