A list of stacks with an text on top of an image

I've tried desperately to get this to work. I'm probably missing on something small... or large, what do I know.

I have a sliverlist of widgets of my own class, so the picture you see is supposed to be about 1/3 of the screen and a scrollable list of them. So just imagine that repeating 2 or 3 times per screen.

To achieve this, which sizes must be fixed? The text bubble is not supposed to be fixed. I would like every picture be be the exact same size.

  return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        overflow: Overflow.visible,
        children: [
          _LargeImage(
            url:
                'imageurl',
          ),

          ContainerWithText(),
        ],
      ),
    ); 

Of course I should put the container in a position, but I can't get it to work. I either get an error or it says that the object is overflowed, strangely.

Please, if somebody could help me recreate the picture.

Solution 1: Mathis Fouques

I tried a simple implementation of what you asked, and didn't get any errors. Here it is :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        overflow: Overflow.visible,
        children: [
          Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png'),
          Positioned( bottom: 50 , left : 100, child:Container(child: Text('Some Text'))),
        ],
      ),
    );
  }
}

Solution 2: Guillaume Roux

Here is my implementation of your widget, I did not have any error and should do what you want.

class ImageWithTextStack extends StatelessWidget {
  final textSize;
  final textPadding;
  final String text;
  final String imgUrl;

  ImageWithTextStack({
    this.textSize = 14.0,
    this.textPadding = 16.0,
    @required this.text,
    @required this.imgUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Container(
            margin: EdgeInsets.only(bottom: textPadding * 2 - textSize / 2),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(imgUrl),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 16),
                padding: EdgeInsets.all(textPadding),
                decoration: BoxDecoration(
                  border: Border.all(width: 3),
                  color: Colors.white,
                ),
                child: Text(
                  text,
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Simply call the ImageWithTextStack like this:

ImageWithTextStack(text: 'my text', imgUrl: 'image url')

And here is the result I obtained using DartPad: