Tabs RenderFlex overflowed by 20 pixels on the bottom - flutter

Question

I'm new in flutter and I'm trying to resolve this issue.
Updated My Code
After setting width and height of container, I'm getting this output now
Desirable output
TabsContainer.dart
class TabsContainer extends StatelessWidget {
final String image, tittle;
const TabsContainer({Key? key, required this.image, required this.tittle})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
image,
fit: BoxFit.cover,
height: 46,
width: 46,
),
),
const SizedBox(
height: 10,
),
Text(
tittle,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black),
)
],
);
}
}
categorypage.dart
List<Tab> tabs = [
const Tab(
height: 50,
child: TabsContainer(
image: 'assets/images/g.png', tittle: 'Social Media'),
),
const Tab(
height: 50,
child: TabsContainer(
image: 'assets/images/g.png', tittle: 'Interior Design')),
];
List<Widget> tabsContent = [
const SocialMedia(),
];
#override
Widget build(BuildContext context) {
return SafeArea(
child: DefaultTabController(
length: tabs.length,
child: Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.arrow_back_ios_rounded,
size: 30, color: AppColors.fIconsAndTextColor),
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications,
size: 30, color: AppColors.fIconsAndTextColor),
)
],
elevation: 0.0,
backgroundColor: Colors.transparent),
backgroundColor: AppColors.fBackgroundColor,
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Column(
children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
'Category',
style: TextStyle(fontFamily: "ROCK"),
)),
const SizedBox(height: 10),
TabBar(
automaticIndicatorColorAdjustment: false,
indicatorColor: Colors.transparent,
isScrollable: true,
tabs: tabs),
const SizedBox(height: 10),
Expanded(
child: TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: tabsContent),
),
],
),
),
),
),
);
}
}

Answer 1

try this :
class TabsContainer extends StatelessWidget {
final String image, tittle;
const TabsContainer({Key? key, required this.image, required this.tittle})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
child: Image.asset(image),
),
Text(
tittle,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black),
)
],
);
}
}

Answer 2

Tab: the default height is 72.0 pixels. Without an icon, the height is 46.0 pixels.
We need to provide our custom height in this case. And for decoration, use ClipRRect for on image.
class TabsContainer extends StatelessWidget {
final String image, tittle;
const TabsContainer({Key? key, required this.image, required this.tittle})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
image,
fit: BoxFit.cover,
// as for Desirable output, both height and width will be same
height: 50,
width: 50,
),
),
const SizedBox(
height: 10,
), // you can use padding here
Text(
tittle,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black),
)
],
);
}
}
And tabs will be like
List<Tab> tabs = [
const Tab(
height: 50 +
10 +
24, // image height + padding/space + 24 for font, better will be getting text size from theme
child: TabsContainer(
image: ...
),
I will also encourage you to check icon and text property for this case. The image size is ok up to 46, if you increase the size, you need to provide Tab(height:) to fix the overflow. You can use unselectedLabelStyle and labelStyle for text on TabBar.
In this case tabs will be
List<Tab> tabs = [
Tab(
text: 'Social Media',
icon: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
'assets/images/image01.png',
fit: BoxFit.cover,
// as for Desirable output, both height and width will be same
height: 46,
width: 46,
),
),
),
Tab(
text: 'Interior Design',
icon: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
'assets/images/image02.png',
fit: BoxFit.fitHeight,
// as for Desirable output, both height and width will be same
height: 46,
width: 46,
),
),
),
];