Talha Nadeem
Reputation: 119
Flutter: RenderPhysicalModel object was given an infinite size during layout
I am making a SignUp Screen, at first I had like no problems as when I run the code but the Bottom OverFlow by some pixels as I haven't inserted ScrollView or ListView, but as I add the ScrollView or ListView over my Scaffold I get the error like: ════════ Exception caught by rendering library ═════════════════════════════════ RenderPhysicalModel object was given an infinite size during layout. The relevant error-causing widget was Scaffold lib\screens\home.dart:22 ════════════════════════════════════════════════════════════════════════════════ Here's my code:
Widget buildSignInScreen(){
return SingleChildScrollView(
child: Scaffold(
body: Container(
padding: EdgeInsets.symmetric(vertical: 40),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Colors.deepPurple.shade900,
Colors.deepPurple.shade800,
Colors.deepPurple.shade400,
]
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 70,),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Login",style: TextStyle(color: Colors.white,fontSize: 30 ),),
SizedBox(height: 10,),
Text("Welcome Back",style: TextStyle(color: Colors.white,fontSize: 30 ),),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(50),topRight: Radius.circular(50),)
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(
color: Color.fromARGB(220, 90, 30, 10),
blurRadius: 20,
offset: Offset(0,10),
)]
),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextField(
decoration: InputDecoration(
hintText: "Phone Number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
)
],
),
),
SizedBox(height: 40,),
Text("Forget Password",style: TextStyle(color: Colors.grey),),
SizedBox(height: 40,),
Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.deepPurple[900],
),
child: Center(
child: Text("Login",style: TextStyle(color: Colors.white,fontSize: 18,fontWeight: FontWeight.bold),),
),
),
SizedBox(height: 60,),
Text("Continue with social media",style: TextStyle(color: Colors.grey,),),
SizedBox(height: 20,),
Row(
children: <Widget>[
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Center(
child: Text("Twitter",style: TextStyle(color: Colors.white),),
),
),
),
SizedBox(width: 30,),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.deepPurpleAccent,
),
child: Center(
child: Text("Skype",style: TextStyle(color: Colors.white),),
),
),
),
SizedBox(width: 30,),
],
)
],
),
),
),
)
],
),
),
),
);
}
Upvotes: 0
Views: 3391
Answers (1)
Ashok Kuvaraja
Reputation: 716
Just remove the Expanded widget from the Column and load SingleChildScrollView to the parent of Container not Scaffold. Please find the code snippets below,
Widget buildSignInScreen() {
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(vertical: 40),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(begin: Alignment.topCenter, colors: [
Colors.deepPurple.shade900,
Colors.deepPurple.shade800,
Colors.deepPurple.shade400,
])),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 70,
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Login",
style: TextStyle(color: Colors.white, fontSize: 30),
),
SizedBox(
height: 10,
),
Text(
"Welcome Back",
style: TextStyle(color: Colors.white, fontSize: 30),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
)),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Color.fromARGB(220, 90, 30, 10),
blurRadius: 20,
offset: Offset(0, 10),
)
]),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey.shade200))),
child: TextField(
decoration: InputDecoration(
hintText: "Phone Number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey.shade200))),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
)
],
),
),
SizedBox(
height: 40,
),
Text(
"Forget Password",
style: TextStyle(color: Colors.grey),
),
SizedBox(
height: 40,
),
Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.deepPurple[900],
),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
),
SizedBox(
height: 60,
),
Text(
"Continue with social media",
style: TextStyle(
color: Colors.grey,
),
),
SizedBox(
height: 20,
),
Row(
children: <Widget>[
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Center(
child: Text(
"Twitter",
style: TextStyle(color: Colors.white),
),
),
),
),
SizedBox(
width: 30,
),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.deepPurpleAccent,
),
child: Center(
child: Text(
"Skype",
style: TextStyle(color: Colors.white),
),
),
),
),
SizedBox(
width: 30,
),
],
)
],
),
),
)
],
),
),
),
);
}
Upvotes: 1
Related Questions
- RenderCustomMultiChildLayoutBox object was given an infinite size during layout. flutter error
- how to solve Flutter RenderConstrainedBox object was given an infinite size during layout
- Flutter layout error 'A RenderFlex overflowed by Infinity pixels on the bottom'
- _RenderInkFeatures object was given an infinite size during layout
- Flutter RenderIndexedStack object was given an infinite size during layout
- Flutter: Object was given an infinite size during layout
- renderanimatedopacity object was given an infinite size during layout
- RenderIndexedSemantics object was given an infinite size during layout
- flutter: EXCEPTION CAUGHT BY RENDERING LIBRARY: A RenderFlex overflowed by n pixels on the bottom
- RenderCustomMultiChildLayoutBox object was given an infinite size during layout error