Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 18.104.22.168 release ready!
Updated 28 April 2023
Flutter is in trend to develop the mobile application for the cross-platform because of its beautiful UI and performance. We most of the time use lists in our apps as ListView or GridList.
When we are using the list in the column then we are facing an issue as the list scrolling is stopped and showing BOTTOM OVERFLOWED BY 221 PIXELS.
You may also check our interactive app designs by our Flutter app development company
Suppose I need to show a Title and then show a list below of the title. So we normally create this type of code in our codebase.
When we run this code then the output of this code as below:
The issue is it will not scroll and showing BOTTOM OVERFLOWED BY 221 PIXELS. Due to space acquire as list acquire the extra space as the column. To remove this issue we will use the Expanded widget.
Expanded widget definition from flutter official site – “Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor”
The final code will be as below :
We have added some padding to the list item view so it will look as readable now the output screen will be :
Same as for the Grid list. Please do not use the List or Grid list to direct child of the column. Use the expanded widget and put your list widget inside. Hope your issue will be resolved.
For any query or suggestion please comment in the below section.
To read more exciting blogs – https://mobikul.com/blog/
Happy coding < 😉 />
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.