Flutter change bottom nav bar height

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!

@mightybruno that is not the issue, I am just resizing it depending on `MediaQuery.of(context)`. Ive tried it without, same issue. — Chris, Apr 05 '21 at 11:19

score 1 · Accepted Answer · answered Apr 05 '21 at 11:21

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

answered Apr 05 '21 at 11:21

mightybruno

1,117
5
11

thanks for your answer! I also changed it to `bottomNaviagtionBar` but how can I fill the safeArea space? – Chris Apr 05 '21 at 11:28
Isn't `SafeArea` widget what you're looking for? Try to wrap the `Column` with it https://api.flutter.dev/flutter/widgets/SafeArea-class.html if not, you may want to take a look on `SafeArea.build` method implementation: https://api.flutter.dev/flutter/widgets/SafeArea/build.html – mightybruno Apr 05 '21 at 11:31
1

working perfectly fine now, thanks for your help :) – Chris Apr 05 '21 at 11:34

score 0 · Answer 2 · answered Apr 05 '21 at 11:14

0

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

answered Apr 05 '21 at 11:14

Jordan Kotiadis

476
4
17

Flutter change bottom nav bar height

2 Answers2