Tabs RenderFlex overflowed by 20 pixels on the bottom

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,
        ),
      ),
    ),
  ];