How to get the intrinsic size of container inside stack in flutter

Question

I am trying to build a UI . I am new to flutter and I am confused on how we will be able to get the size of container inside a stack. Right now it fills to stack size. I want to know the intrinsic size of container , so I can fill the bottom, half with an image view.

My requirement is

The result i am getting now is

The code i used was a stack containing two child widgets. The problem is first widget should have dynamic size based on screen size and the second widget, which is the bottom image will be filled in the remaining space. Right now, this works only on static height. Giving no height will make the first child fill the stack. Also, Is this the right approach in flutter to build such widgets?.

My code: I can't share the full code as some custom widgets are used and thus a lot of unnecessary codebase would be posted. However, my structure is as follows

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: [
            Positioned(
              left: 0,
              bottom: 0,
              right: 0,
              child: Container(
                height: 450, // This need to be made to fill the remaining space.
                decoration: const BoxDecoration(
                  color: Colors.amber,
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage(constants.bottomBanner),
                  ),
                ),
              ),
            ),
            Container(
              height: 552, // This will need to be dynamic *********
              decoration: BoxDecoration(
                color: const Color(0xFFFEFBF3),
                image: const DecorationImage(
                  image: AssetImage(constants.topBackground),
                ),
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(18),
                  bottomRight: Radius.circular(18),
                ),
                boxShadow: [
                  BoxShadow(
                    blurRadius: 10,
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: SafeArea(
                child: Column(
                  children: [
                    const LogoHeaderWidget(
                      title: constants.login,
                      subTitle: constants.loginSubtitle,
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 32),
                      child: Column(
                        children: [
                          const SizedBox(
                            height: 12,
                          ),
                          const MSGRTextfield(
                            labelText: "Mobile Number",
                            keyboardType: TextInputType.number,
                          ),
                          const MSGRTextfield(
                            labelText: "Card Number",
                            keyboardType: TextInputType.number,
                          ),
                          const SizedBox(
                            height: 6,
                          ),
                          SizedBox(
                            height: 42,
                            width: double.infinity,
                            child: ElevatedButton(
                                onPressed: _onLoginPressed,
                                child: const Text("Login"),
                                style: ButtonStyle(
                                  elevation: MaterialStateProperty.all(3),
                                  shadowColor: MaterialStateProperty.all(
                                      const Color(0xFFEED196)),
                                )),
                          ),
                          const SizedBox(
                            height: 30,
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

If you want to get the height inside Stack, you can use LayoutBuilder like this:

Stack(
  children: [
    Positioned(
      child: LayoutBuilder(
        builder: (_, constraints) {
          final height = constraints.maxHeight; // This is the height.
          return Container();
        },
      ),
    ),
    Container(
      height: 100,
      color: Colors.red,
    ),
  ],
)

---

But in your code, it's better to replace the Positioned widget with Positioned.fill.

SizedBox(
  width: double.infinity,
  height: double.infinity,
  child: Stack(
    children: [
      Positioned.fill(
        child: Container(
          ...
        ),
      ),
      Container(
        height: 552, // This will need to be dynamic *********
        ...
      ),
    ],
  ),
)