Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Stack is not Getting Full Height

Tags:

flutter

I want to overlay container to 1st one container in Stack. But when doing, it works but when I give to height first one it just take this height and second container just stuck and didn't take full height.

I want this but "THIS IS MY TEXT" container should take full height but it won't?

enter image description here

But when I use fit : StackFit.expand. It does work what I want but first one got behind it.

enter image description here

Here's my code

   double topHeightPadding = MediaQuery.of(context).padding.top;
    double heightForStack = (MediaQuery.of(context).size.height - 90);
    return Scaffold(
      body: Stack(
        fit : StackFit.expand,
        children: <Widget>[
          Container(            
            height: topHeightPadding + 120,
            decoration: const BoxDecoration(
              color: Color(0xFF141D38),
            ),
            child: const Center(
                child: Text(
              "SOMETEXT.COM",
              style: TextStyle(color: Colors.white),
              textScaleFactor: 1.4,
            )),
          ),
          Positioned(
              top: topHeightPadding + 90,
              left: 0.1,
              right: 0.1,
              bottom: 0,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: heightForStack,
                decoration: const BoxDecoration(
                  // color: Colors.red,
                  color: Color(0xFFFFFFFF),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(35),
                      topRight: Radius.circular(35)),
                  boxShadow: [
                    BoxShadow(
                      color: Color(0xE6808080),
                      spreadRadius: 5,
                      blurRadius: 5,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: const Center( 
                  child: Text('THIS IS MY TEXT')
                ),
              ))
        ],
      ),
    );
like image 887
Adarsh Avatar asked Aug 06 '26 18:08

Adarsh


1 Answers

I just got how to do it by Adding one more container with height double.infinity.

Code:

  double topHeightPadding = MediaQuery.of(context).padding.top;
    double heightForStack = (MediaQuery.of(context).size.height - 90);
    return Scaffold(
      body: Stack(
        // fit : StackFit.expand,
        children: <Widget>[
          Container(height: double.infinity,),
          Container(            
            height: topHeightPadding + 120,
            decoration: const BoxDecoration(
              color: Color(0xFF141D38),
            ),
            child: const Center(
                child: Text(
              "SOMETEXT.COM",
              style: TextStyle(color: Colors.white),
              textScaleFactor: 1.4,
            )),
          ),
          Positioned(
              top: topHeightPadding + 90,
              left: 0.1,
              right: 0.1,
              bottom: 0,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: heightForStack,
                decoration: const BoxDecoration(
                  // color: Colors.red,
                  color: Color(0xFFFFFFFF),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(35),
                      topRight: Radius.circular(35)),
                  boxShadow: [
                    BoxShadow(
                      color: Color(0xE6808080),
                      spreadRadius: 5,
                      blurRadius: 5,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: const Center( 
                  child: Text('THIS IS MY TEXT')
                ),
              ))
        ],
      ),
    );
like image 187
Adarsh Avatar answered Aug 09 '26 07:08

Adarsh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!