How to Scroll a Row vertically having two expanded widgets inside it with LayoutBuilder nested in those expanded widgets?

Question

I am developing a web app. The screen is divided into two expanded widgets nested in Row() widget with LayoutBuilder nested in each.

What I need:

1 When the user changes the height of web app, the UI should not overflow from bottom instead it must scroll.

Problems I faced While Achieving that:

1. I used SingleChildScrollView for scrolling over Row but it reduced the height according to the children's height.

2. I wrapped Row with Container and gave it a fixed screen height but it made the UI overflow and not scrollable.

3. Used CustomScrollView with SliverFillRemaining, and also tried with SliverToBoxAdapter. It enabled scrolling but did not render UI and threw exceptions when LayoutBuidlder was used Inside.

4. I also used ConstrainedBox with constraints property and IntrinsicHeight, it solved the problem but LayoutBuilder was not working inside IntrinsicHeight widget.

Code of the first case is

   return SafeArea(
        child: Scaffold(
            body: SingleChildScrollView(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                color: Color.fromARGB(255, 216, 244, 241),
              ),
              child: const Padding(
                padding: EdgeInsets.symmetric(vertical: 40),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 5),
                      child: FlutterLogo(
                        size: 200,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
              child: Container(
            decoration: const BoxDecoration(
              color: blackColor,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: screenWidth * 0.3,
                  height: 45,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(45),
                    border: Border.all(color: mainMediumColor),
                    color: blackColor,
                  ),
                  child: Center(
                    child: FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        'Log In',
                        style: GoogleFonts.poppins(
                            fontSize: 17, color: whiteColor),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )),
        ],
      ),
    )));

Desired UI

Achieved UI

Any Solution to this problem.???

Answer 1

Solved the problem. And here is the code for achieving your expected result.

 return SafeArea(
      child: Scaffold(
          body: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        flex: 1,
        child: Container(
          decoration: const BoxDecoration(
            color: Color.fromARGB(255, 216, 244, 241),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 40),
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      height: 250,
                      width: 250,
                      color: Colors.red,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      height: 250,
                      width: 250,
                      color: Colors.red,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Container(
                      height: 250,
                      width: 250,
                      color: Colors.red,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      Expanded(
          flex: 1,
          child: Container(
            decoration: const BoxDecoration(
              color: blackColor,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: screenWidth * 0.3,
                  height: 45,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(45),
                    border: Border.all(color: mainMediumColor,),
                    color: blackColor,
                  ),
                  child: Center(
                    child: FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        'Log In',
                        style: GoogleFonts.poppins(
                          fontSize: 17,
                          color: whiteColor,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )),
    ],
  )));