Card with image on top and text below

Question

Currently I have a card where the image fills the card because I have fit: BoxFit.fill. However I need text below my image. I've tried a few different ways to introduce the text,,Columns etc.. But to no available. The images are of different sizes loaded from the Internet so the fit property works well with the images.

Here is what I have so far. my build method:

@override
  Widget build(BuildContext context) {
    return Column(children: [
      GestureDetector(
        onTap: () {
         
        },
        child: Container(
          width: 335,
          height: 174,
          child: Card(
            clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Image.network(
              'https://via.placeholder.com/300?text=DITTO',


            fit: BoxFit.fill,
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            elevation: 5,
            margin: EdgeInsets.all(10),
          ),
        ),
      ),
    ]);
  }

But I want to have text under the image like this design:

The process bar and timer are unnecessary.

user_6904430 · Answer

This worked for me unless you want the text to be overlay, then u gotta use a Stack() then wrap your text in a Positioned() widget:

         Card(
            clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Column(
              children: [
                Image.network(
                  'https://via.placeholder.com/300?text=DITTO',
                  fit: BoxFit.fill,
                ),
                Text('Something'),
              ],
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            elevation: 5,
            margin: EdgeInsets.all(10),
          )

user_14181556 · Answer

You must place the image and text in a Column widget, in addition to specifying the image dimensions like this:

Column(children: [
          GestureDetector(
            onTap: () {},
            child: Container(
              width: 335,
              height: 174,
              child: Card(
                clipBehavior: Clip.antiAliasWithSaveLayer,
                child: Column(
                  children: [
                    SizedBox(
                      width: 335,
                      height: 110,
                      child: Image.network(
                        'https://via.placeholder.com/300?text=DITTO',
                        fit: BoxFit.fill,
                      ),
                    ),
                    SizedBox(height: 16,),
                    Column(children:[
                       Text('Title'),
                       Text('Subtitle')
                      ])
                  ],
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                elevation: 5,
                margin: EdgeInsets.all(10),
              ),
            ),
          ),
        ]);

user_5106574 · Answer

Accepted solution giving render overflow error, Above issue, can be solved using the Stack widget. I recommend using MediaQuery instead of hardcoded values.

SizedBox(
    width: 335,
    height: 174,
    child: Stack(
      children: [
        Card(
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Column(
            children: [
              SizedBox(
                width: 335,
                height: 110,
                child: Image.network(
                  'https://via.placeholder.com/300?text=DITTO',
                  fit: BoxFit.fill,
                ),
              ),
            ],
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(10),
        ),
        Positioned(
          bottom: 0,
          left: 10,
          child: SizedBox(
            height: 50,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Title'),
                Text('Subtitle')
              ],
            ),
          ),
        )
      ],
    ),
  ),

Output:

Card with image on top and text below

3 Answers