How to Overlay a Second Container with a Specific Color in Flutter?

Question

I'm working on a Flutter app and encountered an issue where I need to overlay a second container with a specific color on top of an existing container. However, when I attempt to add this second container, the layout does not behave as expected. I've attempted to look for solutions on Stack Overflow, but most questions related to container overlays do not address the specific problem I'm facing, particularly in the context of using LayoutBuilder and Scaffold.

Here's the part of my code where I define the initial layout and try to introduce a second container:

LayoutBuilder(
              builder: (context, constraints) {
                return Scaffold(
                  backgroundColor: Color(0xffF6F6F6),
                  body: TextSelectionTheme(
                    data: TextSelectionTheme.of(context).copyWith(
                      selectionColor: Color(0xffD7D7D7),
                      cursorColor: Color(0xff3B3B3B),
                      selectionHandleColor: Color(0xffD7D7D7),
                    ),
                    child: Center(
                      child: Container(
                        height: double.maxFinite,
                        width: double.maxFinite,
                        decoration: BoxDecoration(
                          color: Color(0xffF6F6F6),
                          borderRadius: BorderRadius.all(
                            Radius.circular(0.0),
                          ),
                        ),
                        child: SingleChildScrollView(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(16.0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    RichText(
                                      text: TextSpan(
                                        style: GoogleFonts.questrial(),
                                        children: [
                                          WidgetSpan(
                                            child: Icon(FontAwesomeIcons.checkDouble,
                                                size: 40,
                                                color: Color(0xffD7D7D7)),
                                          ),
                                        ],
                                      ),
                                    ),
                                    RichText(
                                      text: TextSpan(
                                        style: GoogleFonts.questrial(),
                                        children: [
                                          WidgetSpan(
                                            child: GestureDetector(
                                              onTap: () {
                                                showDialog(
                                                    context: context,
                                                    barrierColor: Colors.transparent,
                                                    builder: (ctx) => HomePagePomodoroTimer());
                                              },
                                              child: Icon(FontAwesomeIcons.squareXmark,
                                                size: 40,
                                                color: Color(0xff3B3B3B),),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Column(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Center(
                                    child: Container(

                                      decoration: BoxDecoration(
                                        color: Color(0xffF4CFDD),

                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.fromLTRB(50, 30, 50, 0),
                                        child: Column(
                                          children: [
                                            Column(
                                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                              crossAxisAlignment: CrossAxisAlignment.center,
                                              children: [
                                                Text(
                                                  "We send you an Email",
                                                  style: TextStyle(
                                                    fontSize: 20,
                                                    fontStyle: FontStyle.normal,
                                                    fontWeight: FontWeight.normal,
                                                    color: Color(0xff3B3B3B),
                                                  ),
                                                ),
                                              ],
                                            ),
                                            SizedBox(height: 50,),
                                            const Center(
                                              child: Text(
                                                "Please, check your Email inbox ,
                                                style: TextStyle(
                                                  fontSize: 20,
                                                  fontStyle: FontStyle.normal,
                                                  fontWeight: FontWeight.normal,
                                                  color: Color(0xff3B3B3B),
                                                ),
                                              ),
                                            ),
                                            Divider(color: Color(0xff3B3B3B)),
                                            SizedBox(height: 40,),
                                            const SizedBox(height: 360,
                                              child: RiveAnimation.asset('letter_and_knife.riv',
                                                  fit: BoxFit.cover
                                              ),),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }
          )

When I add the following piece of code to introduce the pink container:

Center(
  child: Container(
    height: double.maxFinite,
    decoration: BoxDecoration(
      color: Color(0xffF4CFDD), //pink color
    ),
  ),
);

The UI doesn't render as expected. The second container either does not show up at all or overlays in a manner that's not intended.

I'm looking to understand how I can properly overlay this second container with a pink color (Color(0xffF4CFDD) on top of the existing content. Is there a specific approach or Flutter widget that would make this possible without disrupting the existing layout?

What I've Tried:

1. Searching for "Flutter container overlay" on Stack Overflow and reviewing similar questions, but none addressed the unique context of my layout.
2. Experiment with different widgets like Stack and Positioned, but these attempts have not yielded the desired outcome.

Question:

How can I correctly overlay a second container with a specific color in this Flutter layout? Is there a Flutter-specific approach or widget that facilitates this kind of overlay without affecting the positioning of other elements in the layout?

Answer 1

Consider giving the two children equal height or height you would want them to have from the constraints using SizedBox or Container like below.

LayoutBuilder(
    builder: (context, constraints) {
        return Column(
                children: [
                    Container(
                       height: constraints.maxHeight/2, width: double.infinity, color: Colors.red,
                    ),
                    Container(
                       height: constraints.maxHeight/2, width: double.infinity, color: Colors.red,
                    ),
                ]        

        );



});

This way now you can move the children you want inside those containers.

Note: SingleChildScrollView does not work with infinite constraints children like Column on infinite height, consider sizing them or setting MainAxisSize.min or Flexible instead of constraints.

Answer 2

The problem is that you are using height: double.maxFinite with returns constant value of 1.7976931348623157e+308, in that case you want the size of your current widget parent context simple use MediaQuery.of(context).size.height

the code should look like this:

Center(
     child: Container(
         height: MediaQuery.of(context).size.height,
         decoration: const BoxDecoration(
         color: Color(0xffF4CFDD),
         ),