SingleChildScrollView is limiting the height of Container to the children despite using Expanded inside Row()

Question

There are two containers inside the row wrapped with expanded but when SingleChildScrollView above Row is used the height of containers is reduced to its children.

Without SingleChildScrollView the output is like this but not scrollable.

  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    final screenHeight = MediaQuery.sizeOf(context).height;

    return Scaffold(
        body: SafeArea(
            child: Center(
      child: Container(
        color: Colors.blue,
        // height: screenHeight,
        child: Row(
          children: [
            Expanded(
              child: Container(
                color: mainLightColor,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        width: MediaQuery.sizeOf(context).width * 0.22,
                        height: MediaQuery.sizeOf(context).width * 0.22,
                        fit: BoxFit.contain,
                        image: const AssetImage('assets/images/logo.png')),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: blackColor,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: screenWidth * 0.2,
                      height: 35,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(45),
                        color: mainMediumColor,
                      ),
                      child: Center(
                        child: Text(
                          'Create Account',
                          style: GoogleFonts.poppins(),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Container(
                      width: screenWidth * 0.2,
                      height: 35,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(45),
                        border: Border.all(color: mainMediumColor),
                        color: blackColor,
                      ),
                      child: Center(
                        child: Text(
                          'Log In',
                          style: GoogleFonts.poppins(color: whiteColor),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    )));
  }
}

Without Using SingleChildScrollView the output is like this

Using SingleChildScrollView the output is like this

  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    final screenHeight = MediaQuery.sizeOf(context).height;

    return Scaffold(
        body: SafeArea(
            child: Center(
      child: SingleChildScrollView(
        child: Container(
          color: Colors.blue,
          // height: screenHeight,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  color: mainLightColor,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image(
                          width: MediaQuery.sizeOf(context).width * 0.22,
                          height: MediaQuery.sizeOf(context).width * 0.22,
                          fit: BoxFit.contain,
                          image: const AssetImage('assets/images/logo.png')),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: blackColor,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: screenWidth * 0.2,
                        height: 35,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(45),
                          color: mainMediumColor,
                        ),
                        child: Center(
                          child: Text(
                            'Create Account',
                            style: GoogleFonts.poppins(),
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      Container(
                        width: screenWidth * 0.2,
                        height: 35,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(45),
                          border: Border.all(color: mainMediumColor),
                          color: blackColor,
                        ),
                        child: Center(
                          child: Text(
                            'Log In',
                            style: GoogleFonts.poppins(color: whiteColor),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    )));
  }
}

I want full height of the container with scrolling but SingleChildScrollView decreases it according to the height of children.

I provided container with screenHeight but it did not work.

Any Solution? Thanks

Answer 1

You can use a combination of ConstrainedBox and IntrinsicHeight. Replace

      child: SingleChildScrollView(
        child: Container(
          color: Colors.blue,
          // height: screenHeight,
          child: Row(

with

      child: SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(minHeight: screenHeight),
          child: IntrinsicHeight(
            child: Row(

Answer 2

You have to use Constraints inside the Container :

Container(
constraints:BoxConstraints(
minWidth: MediaQuery.sizeOf(context).width,
minHeight: MediaQuery.sizeOf(context).height,
),
child:....
)

use height and width according to your requirements