How to set a ConstrainedBox for a bottomNavigationBar | Flutter

Question

I was trying to setup a bottomNavigationBar with:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 500),
  child: // child (Two buttons, occupying each ~40% of the total width
)

But when I do this, the bottomNavigationBar takes the full width of the display (an iPad Pro 11''), and I only want this bottomNavigationBar to take so much space (less than 500)

Anyone knows what's the problem? I have this ConstrainedBox for the body and there's no issue

Thanks! :)

score 1 · Accepted Answer · answered May 05 '22 at 21:53

the following example will constrain the ´bottomNavigationBar´ to 500 if the display size is bigger than 500, otherwise it will take the full size of the screen.

  bottomNavigationBar: Row(
    children: [
      Spacer(),
      ConstrainedBox(
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width >= 500 ? 500 : MediaQuery.of(context).size.width),
        child: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
          ],
        ),
      ),
      Spacer()
    ],
  ),

This worked just as I expected :) Don't know why I didn't tried it hahaha Thanks a lot! — cgutierr, May 06 '22 at 09:04

How to set a ConstrainedBox for a bottomNavigationBar | Flutter

1 Answers1