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
2
Answers
You have to use
Constraints
inside theContainer
:use
height
andwidth
according to yourrequirements
You can use a combination of
ConstrainedBox
andIntrinsicHeight
. Replacewith