I am using CustomScrollView() with SliverFillRemaining and Inside it I used a row with two expanded widgets side by side. I want to use LayoutBuilder inside those Expanded Widgets but it is throwing an error. What is the possible solution to it?
I want to get the dynamic size of those Expanded Widgets whenever the user changes the width or height of the screen.
Here is the code
Scaffold(
backgroundColor: blackColor,
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Row(
children: [
Expanded(
flex: Responsive.isMediumDevice(context) ? 4 : 1,
child: Container(
width: screenWidth,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 216, 244, 241),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(
Responsive.isSmallDevice(context)
? 35
: 0),
topRight: Radius.circular(
Responsive.isSmallDevice(context)
? 0
: 35),
bottomRight: const Radius.circular(35))),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 5),
child: Image(
width: Responsive.isSmallDevice(context)
? screenWidth * 0.35
: screenWidth * 0.12,
height: Responsive.isSmallDevice(context)
? screenWidth * 0.35
: screenWidth * 0.12,
fit: BoxFit.contain,
image: const AssetImage(
'assets/images/logo1.png')),
),
FittedBox(
fit: BoxFit.scaleDown,
child: Text(
'Quranic Quotes',
style: GoogleFonts.oleoScript(
color: const Color(0xff23504D),
fontSize: 40,
fontWeight: FontWeight.w500),
),
),
],
),
),
),
),
Expanded(
flex: Responsive.isMediumDevice(context) ? 5 : 1,
child: Container(
color: blackColor,
child: LayoutBuilder(builder: (context, size) {
final parentWidth = size.maxWidth;
return Padding(
padding: EdgeInsets.symmetric(
vertical: 25, horizontal: screenWidth * 0.08),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: Responsive.buttonWidth(context),
height: 45,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
// color: color4,
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
// color1,
color5,
color4,
color3,
color2,
]),
),
child: Center(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
'Create Account',
style: GoogleFonts.poppins(
fontWeight: FontWeight.w600,
fontSize: 17,
color: blackColor),
),
),
),
),
const SizedBox(
height: 20,
),
Container(
width: Responsive.buttonWidth(context),
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),
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth * 0.09,
vertical: 15),
child: Row(
children: [
const Expanded(
child: Divider(
color: whiteColor,
thickness: 1,
),
),
Padding(
padding: EdgeInsets.all(
screenWidth * 0.005),
child: const Text(
'OR',
style: TextStyle(color: whiteColor),
),
),
const Expanded(
child: Divider(
color: whiteColor,
thickness: 1,
),
),
],
),
),
Container(
width: Responsive.buttonWidth(context),
height: 45,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
// border: Border.all(color: mainMediumColor),
color: Colors.blue,
),
child: FittedBox(
fit: BoxFit.scaleDown,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'Google',
style: GoogleFonts.roboto(
fontSize: 17,
color: whiteColor),
)
],
),
),
)
],
),
);
}),
),
),
],
),
)
],
)));
Here is the Error
The following assertion was thrown during performLayout():
LayoutBuilder does not support returning intrinsic dimensions.
Calculating the intrinsic dimensions would require running the layout callback speculatively, which
might mutate the live render object tree.
The relevant error-causing widget was:
SliverFillRemaining
SliverFillRemaining:file