How to set a ConstrainedBox for a bottomNavigationBar

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! :)

CodePudding user response：

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

CodePudding user response：

use ClipRRect instead

_bottomBar()
  {
    return Container(                                             
  decoration: const BoxDecoration(                                                   
    borderRadius: BorderRadius.only(                                           
      topRight: Radius.circular(20), topLeft: Radius.circular(20)),            
    boxShadow: [                                                               
      BoxShadow(color: Colors.green, spreadRadius: 0, blurRadius: 10),       
    ],                                                                         
  ),                                                                           
  child: ClipRRect(                                                            
    borderRadius: const BorderRadius.only(                                           
    topLeft: Radius.circular(20.0),                                            
    topRight: Radius.circular(20.0),                                           
    ),         
    
     child:BottomNavigationBar(
      currentIndex: _current_index,
      selectedItemColor: Colors.orange,
        
      onTap:(int index){
          setState(() {
            _current_index=index;
          });

      },
      items:[
        BottomNavigationBarItem(
          icon: Icon(Icons.home)
          ,label:"Home"
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.email),
          label:"Email"
        )
      ]

    ),
    )
    );
  }