[Solved] A RenderFlex overflowed by 719 pixels on the bottom
Are you making this UI design mistake? Learn why a RenderFlex overflowed by 719 pixels on the bottom can lead to a frustrating user experience.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
Table of Contents
Steps to Fix RenderFlex overflowed by
Code with error
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
If your code arose this kind of error , read above terminal message and try to understand what that said. Framework is unable to scrolling below from the page so this happen. Wrap your body container with SingleChildScrollview or use listView widget on the place of column widget.
Related Reading: [Solved] Incorrect use of ParentDataWidget in Flutter
Solution
Method 1
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),Method 2
body: ListView(
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
Container(
height: 200,
decoration: const BoxDecoration(color: Colors.grey),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
],
),Manage your UI according to your requirement.
About Ambika Dulal
Lead Mobile App Developer and Tech Consultant specializing in Flutter, Dart, and Firebase.