Flutter make container size fit stack size

Question

I want to make something like in the picture below: A picture with two texts over it.

My first approach was creating a Container with a Stack inside and both Texts inside the Stack; and another Stack with the picture and Texts, but I encountered the problem of having to give a size to the Container that wraps the Stack with the texts. Althought it works that way, it is not a optimal solution for me due to responsiveness reasons.

Is there any way of wrapping a Stack with a Container and let the Container size from the Stack's content? Or is there a better way of achieving what I'm seeking? Thanks in advance. (Sorry for my English).

if any solution is useful for you then please upvote and accept the answer as useful, it will help to the future users — Ravindra Kushwaha, May 24 '20 at 16:08

score 11 · Accepted Answer · answered May 16 '20 at 05:39

11

In your Stack:

Stack(
  children: <Widget> [
    Image(...), // Your Image here
    Positioned.fill( // Expands to the size of your image
      child: ..., // Put your Text widgets here in a Stack/Any other way you deem fit
    ),
  ],
),

answered May 16 '20 at 05:39

Sidak

1,213
6
11

2

I had no clue about the Positioned.fill thanks a lot – Marcus Rohden Nov 12 '21 at 00:18
1

It's the best solution, it must be accepted. – Ataberk Jan 01 '22 at 23:57

score 1 · Answer 2 · answered May 16 '20 at 06:33

You can use Shadow property to achieve this layout.

Following code will help you more.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: double.infinity,
          height: 300,
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://miro.medium.com/max/1400/1*U-R58ahr5dtAvtSLGK2wXg.png'),
                fit: BoxFit.cover),
          ),
          child: Text(
            " Hello world",
            style: TextStyle(
              fontSize: 50,
              color: Colors.white,
              shadows: [
                Shadow(
                  color: Colors.amber,
                  offset: Offset(-30.0, -30.0),
                  blurRadius: 1.0,
                ),
              ],
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }

score 0 · Answer 3 · answered May 16 '20 at 06:30

You can also use the double.maxFinite property for the setting the height and width to match parent , like below

  Stack(
          children: <Widget>[
            Container(
              height: double.maxFinite,
               width: double.maxFinite,
               child:
                  Image.asset('YOOUR_ASSEST_IMAGE_HERE', fit: BoxFit.fill),
              ),
            ]
          )

And check the another solution of mine using thee Stack, please check it once https://stackoverflow.com/a/58029364/3946958

Flutter make container size fit stack size

3 Answers3