CODEWITHSUNDEEP
flutterflutter-layout
Andres Eloy
Andres Eloy

Reputation: 133

Flutter make container size fit stack size

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).

Example of what I want to achieve

Upvotes: 2

Views: 6424

Answers (3)

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27137

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,
          ),
        ),
      ),
    );
  }

Upvotes: 1

Ravindra Kushwaha
Ravindra Kushwaha

Reputation: 8042

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

Upvotes: 0

Sidak
Sidak

Reputation: 1283

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
    ),
  ],
),

Upvotes: 12

Related Questions