Flutter change bottom nav bar height - flutter

Question

I am trying to build a custom bottomNavBar and my code looks like this:
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(scaleWidth(20)),
topRight: Radius.circular(scaleWidth(20)),
),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.1),
blurRadius: 20,
),
],
),
height: scaleWidth(59),
child: Row(
children: _buildBottomNavBarItems(context),
),
),
Container(
color: AppColors.white,
height: MediaQuery.of(context).padding.bottom,
)
],
);
}
I am calling this inside a Scaffold like this:
bottomSheet: BottomNavBar(),
But the problem is that bottomNavBar is covering the whole screen! Without the Column it is working fine, but the Column is crucial so I can have the bottom Container with height: MediaQuery.of(context).padding.bottom, so the height of the navBar is changing dynamically depending on the SafeArea of the device. (Example: iPhone SE has no bottomSafeArea but the iPhone X has one, so the height needs to be adjusted.)
What am I missing here and how can I solve this?
If you need any more info just let me know!

Answer 1

You have to add mainAxisSize: MainAxisSize.min to the Column. Also, you don't need mainAxisAlignment: MainAxisAlignment.end, the bottom sheet is automatically aligned to the end.
Also, if you want Scaffold.body to take bottom widget's space into consideration, swap bottomSheet with bottomNavigationBar.
class Sheet extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
//...
],
);
}
}
https://www.dartpad.dev/374026cc206115bedf79925bb75720af?null_safety=true

Answer 2

Try using bottomNavigationBar: instead of bottomSheet: or in the body use Stack: and add the position of your bottomNavBar bottom:0