Question 75532 in Flutter Question posted in
The official Flutter documentation can be found here.

I used MediaQuery.of(context) but it has render overflow error on small screen – Flutter

here is the snippet and I used mediaQuery class to resolve render overflow problem, but there the error can you tell me how to solve it

Container(
        padding: AppTheme.navbarPadding,
        alignment: Alignment.center,
        height: MediaQuery.of(context).size.height * 0.11,
        width: MediaQuery.of(context).size.width * 0.94,
        decoration: AppTheme.navbarDecoration,
        child: Container(
          decoration: AppTheme.navbarElementDecoration,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: BottomNavigationBar(
              elevation: 30,
              showSelectedLabels: false,
              showUnselectedLabels: false,
              currentIndex: screen,
              onTap: updateScreen,
              iconSize: AppTheme.navbarIconSize,
              selectedIconTheme:
                  const IconThemeData(color: AppTheme.selectedIconColor),
              unselectedIconTheme:
                  const IconThemeData(color: AppTheme.unselectedIconColor),
              type: BottomNavigationBarType.fixed,
              unselectedItemColor: AppTheme.unselectedNavbarColor,
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: const Icon(FeatherIcons.zap),
                  label: '',
                  activeIcon: Container(
                    alignment: Alignment.center,
                    width: AppTheme.navbarIconWidth,
                    height: AppTheme.navbarIconHeight,
                    decoration: AppTheme.navbarIconDecoration,
                    child: const Icon(
                      FeatherIcons.zap,
                    ),
                  ),
                ),`

This is the code that I used

(https://i.stack.imgur.com/1kri0.png)

Tags:

2

Answers


  1. 0

    Increase the height of the container,to match with the icon size

     height: MediaQuery.of(context).size.height * 0.3,//change like this should match the height of the icon
    Login or Signup to reply.
  2. 0

    In that case, the inner container uses the constraints of the outer container. when you use relative size with MediaQuery.of(context) On a larger screen, the outer container becomes larger, and as the screen size decreases, the outer container size becomes smaller. But your inner container size is fixed. That’s why it causes overflow issues.

    I think the best option is to make the outer container’s height and width also fixed. Because it no need to add responsiveness in that case,

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search