Flutter Stack is not Getting Full Height

Issue

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 stucks 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')
                ),
              ))
        ],
      ),
    );

Any help would be Appreciated.

Solution

Answering Own Question : https://stackoverflow.com/help/self-answer

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

Answered By – Adarsh Raj

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.