How to display text below the image?

Question

i'm trying to display text of each picture below to that picture in an alertdialog like rating a score. I tried to use stack widget and this is the result the result. Text is in front of the picture and not display below th picture but i just want it to display below the picture. How can I do it correctly?

@override
  Widget build(BuildContext context) {
    return Container(
        height: 60,
        width: MediaQuery.of(context).size.width*0.75,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: pic.length,
            itemBuilder: (context, index) {
              return  Container(
                margin: const EdgeInsets.only(right: 10),
                 child: InkWell(
                        onTap: () {
                        },
                         child: Stack(
                children: <Widget> [
                      Image.asset('assets/images/'+pic[index].toString()+'.png', height: 70, width: 70,),
                    Text(pic[index].toString())
                ])));
            }));   
  }

}

score 1 · Accepted Answer · answered Jun 24 '20 at 10:21

1

reverse the order of your widgets like so: First the InkWell Widget with a container child and to that container pass a column widget with the icon and then the text. I've used GestureDetector in this example..

GestureDetector(
          onTap: #Do Something
          child: Container(
            child: Column(
              children: <Widget>[
                Icon('Your Icon Here'),
                Text('Your Text Here')
              ],
            ),
          ),
        ),

answered Jun 24 '20 at 10:21

Itai Ben Amram

168
9

it has and error "Another exception was thrown: A RenderFlex overflowed by 9.0 pixels on the bottom." when add text. how can i fix this? – Sprizx Jun 24 '20 at 11:35
this error is caused because of strained heights - try to put this in an Expanded widget looking at your code - increasing the size of your parent container (from 60 to lets say 70-80) will solve it. If my solution helped you - please thumbs it up and accept the answer so the thread can be closed :) – Itai Ben Amram Jun 24 '20 at 11:41

score 1 · Answer 2 · answered Jun 24 '20 at 10:50

this code if u not want use STACk

Container(
      constraints: new BoxConstraints.expand(
        height: 200.0,
      ),
      alignment: Alignment.bottomLeft,
      padding: new EdgeInsets.only(left: 16.0, bottom: 8.0),
      decoration: new BoxDecoration(
        image: new DecorationImage(
          image: new AssetImage('assets/image.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: new Text('Title',
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 20.0,
        )
      ),
    );

and this if u want use STACK

Container(
        constraints: new BoxConstraints.expand(
          height: 200.0,
        ),
        padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new AssetImage('assets/image.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: new Stack(
          children: <Widget>[
            new Positioned(
              left: 0.0,
              bottom: 0.0,
              child: new Text('Title',
                  style: new TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  )
              ),
            ),
            new Positioned(
              right: 0.0,
              bottom: 0.0,
              child: new Icon(Icons.star),
            ),
          ],
        )
    );

this link if u want see more https://cogitas.net/overlay-text-icon-image-flutter/

I use your code, it works too but doesn't work in alertdalog. may be i need to fix something. Thank you so much. — Sprizx, Jun 24 '20 at 11:54

score 0 · Answer 3 · answered Jun 24 '20 at 10:15

0

You can position elements inside your stack - positioned

answered Jun 24 '20 at 10:15

Omer Gamliel

456
3
6

How to display text below the image?

3 Answers3