A RenderFlex overflowed by 19 pixels on the bottom, while scrolling - flutter

Question

In TabBarView -> Column, Iam getting this exception A RenderFlex overflowed by 120 pixels on the bottom.
while scrolling, It happens only on the particular part/container: TabBarView -> Column -> Container.
here is an image for better understanding sample image
here is the code for tabView.dart:
class TabView extends StatelessWidget {
List<Category> categories = [
];
final TabController tabController;
TabView({Key key, this.tabController}) : super(key: key);
#override
Widget build(BuildContext context) {
print(MediaQuery.of(context).size.height / 9);
return TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: tabController,
children: <Widget>[
Column( **//Exception here**
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.all(8.0),
height: MediaQuery.of(context).size.height/9,
width: MediaQuery.of(context).size.width,
// padding: EdgeInsets.only(top: 4.0),
child: ListView.builder(
//shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: categories.length,
itemBuilder: (_, index) => CategoryCard(
category: categories[index],
)),),
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList()),
],
),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
]);
}
}
code for recommendedList.dart:
class RecommendedList extends StatelessWidget {
List<Product> products = [....];
#override
Widget build(BuildContext context) {
return Column( **//Exception here**
children: <Widget>[
Container(
height: 20,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
IntrinsicHeight(
child: Container(
margin: const EdgeInsets.only(left: 16.0, right: 8.0),
width: 4,
color: Colors.lightBlue,
),
),
Center(
child: Text(
'Recommended',
style: TextStyle(
color: darkGrey,
fontSize: 16.0,
fontWeight: FontWeight.bold),
)),
],
),
),
Flexible(
child: Container(),
),//
],
);
}
}
These 2 classes are used in main page, here is the code:
return Scaffold(
resizeToAvoidBottomPadding: false,
bottomNavigationBar: CustomBottomBar(controller: bottomTabController),
body: CustomPaint(
painter: MainBackground(),
child: TabBarView(
controller: bottomTabController,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
SafeArea(
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
// These are the slivers that show up in the "outer" scroll view.
return <Widget>[
SliverToBoxAdapter(
child: appBar,
),
SliverToBoxAdapter(
child: topHeader, //child: ParallaxMain(),
),
SliverToBoxAdapter(
child: ProductList(
products: products,
),
),
SliverToBoxAdapter(
child: ProductList2(),
),
SliverToBoxAdapter(
child: tabBar,
),
];
},
body: Container(
child: TabView(
tabController: tabController,
),
//: MediaQuery.of(context).size.height/10,
),
),
),
CategoryListPage(),
CheckOutPage(),
ProfilePage()
],
),
),
);
and here is the exception i got:
A RenderFlex overflowed by 104 pixels on the bottom.
The relevant error-causing widget was:
Column file:///E:/arm%20dataset/flutter_ecommerce_template-m/lib/screens/main/components/tab_view.dart:59:11
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
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.
The specific RenderFlex in question is: RenderFlex#7b505 OVERFLOWING
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(w=411.4, h=13.1)
... size: Size(411.4, 13.1)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: min
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
A RenderFlex overflowed by 19 pixels on the bottom.
The relevant error-causing widget was:
Column file:///E:/arm%20dataset/flutter_ecommerce_template-m/lib/screens/main/components/recommended_list.dart:37:12
════════════════════════════════════════════════════════════════════════════════════════════════════
Please help me out.

Answer 1

Use ListView instead of Column should help.

Answer 2

Did you try using wrapping your Column with SingleChildScrollView widget like this?
SingleChildScrollView(
child: Column(
children: <Widget>[

Answer 3

Wrapping the Column widget with SingleChildScrollview should work.. Let me know if it worked for you..