[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.

Steps to Fix RenderFlex overflowed by

Solved A RenderFlex overflowed by 719 pixels on the bottom

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,

       ),

     ),

   ],

 ),

),
A RenderFlex overflowed by 719 pixels on the bottom Error

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

A RenderFlex overflowed by 719 pixels on the bottom Solved

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.

Share:

Ambika Dulal is a Flutter developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.

Services

UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion

Contact

App Override

New Plaza, Kathmandu