Otis
Reputation: 401
Getting exception of A RenderFlex overflowed by 203 pixels on the bottom in flutter
enter image description hereWe trying to run my flutter code am getting this exception 'A RenderFlex overflowed by 203 pixels on the bottom', and the exception is pointing at the first child column of my code. i have try wrapping the column with SingleChildScrollView, Expanded and Flexible but still am getting same exception.
............................................................................. My Code
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.4, 0.7, 0.9],
colors: [
Color(0xFF3594DD),
Color(0xFF4563DB),
Color(0xFF5036D5),
Color(0xFF5B16D0),
],
),
),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: FlatButton(
onPressed: () => print('Skip'),
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
Container(
height: 600.0,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: <Widget>[
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding0.png',
),
height: 150.0,
width: 150.0,
),
),
SizedBox(height: 30.0),
Text(
'Connect people\naround the world',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding1.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Live your life smarter\nwith us!',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding2.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Get a new experience\nof imagination',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
_currentPage != _numPages - 1
? Expanded(
child: Align(
alignment: FractionalOffset.bottomRight,
child: FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
),
),
SizedBox(width: 10.0),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30.0,
),
],
),
),
),
)
: Text(''),
],
),
),
),
),
bottomSheet: _currentPage == _numPages - 1
? Container(
height: 100.0,
width: double.infinity,
color: Colors.white,
child: GestureDetector(
onTap: () => print('Get started'),
child: Center(
child: Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: Text(
'Get started',
style: TextStyle(
color: Color(0xFF5B16D0),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
)
: Text(''),
);
}
}
Upvotes: 0
Views: 59
Answers (1)
Victor Eronmosele
Reputation: 7696
You can wrap the first Container widget with a SingleChildScrollView and then remove the Expanded after this check _currentPage != _numPages - 1.
Your new code should be:
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.4, 0.7, 0.9],
colors: [
Color(0xFF3594DD),
Color(0xFF4563DB),
Color(0xFF5036D5),
Color(0xFF5B16D0),
],
),
),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: FlatButton(
onPressed: () => print('Skip'),
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
Container(
height: 600.0,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: <Widget>[
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding0.png',
),
height: 150.0,
width: 150.0,
),
),
SizedBox(height: 30.0),
Text(
'Connect people\naround the world',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding1.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Live your life smarter\nwith us!',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding2.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Get a new experience\nof imagination',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
_currentPage != _numPages - 1
? Align(
alignment: FractionalOffset.bottomRight,
child: FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
),
),
SizedBox(width: 10.0),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30.0,
),
],
),
),
)
: Text(''),
],
),
),
),
),
),
bottomSheet: _currentPage == _numPages - 1
? Container(
height: 100.0,
width: double.infinity,
color: Colors.white,
child: GestureDetector(
onTap: () => print('Get started'),
child: Center(
child: Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: Text(
'Get started',
style: TextStyle(
color: Color(0xFF5B16D0),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
)
: Text(''),
);
}
Upvotes: 1
Related Questions
- flutter A RenderFlex overflowed by 271 pixels on the bottom
- A RenderFlex overflowed by 99888 pixels on the bottom
- A RenderFlex overflowed by 103 pixels on the bottom
- A RenderFlex overflowed by 224 pixels on the bottom
- A RenderFlex overflowed by 40 pixels on the bottom. Flutter
- Flutter A RenderFlex overflowed by 99469 pixels on the bottom
- Flutter layout error 'A RenderFlex overflowed by Infinity pixels on the bottom'
- A RenderFlex overflowed by 99729 pixels on the bottom
- flutter: EXCEPTION CAUGHT BY RENDERING LIBRARY: A RenderFlex overflowed by n pixels on the bottom
- "A RenderFlex overflowed by 373 pixels on the bottom" problem in flutter [not duplicate]