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!

Solution

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

Comments

[eeqk]

could you share the implementation of scaleWidth(59)?

[Chris]

@mightybruno that is not the issue, I am just resizing it depending on MediaQuery.of(context). Ive tried it without, same issue.

[Chris]

thanks for your answer! I also changed it to bottomNaviagtionBar but how can I fill the safeArea space?

[eeqk]

Isn't SafeArea widget what you're looking for? Try to wrap the Column with it api.flutter.dev/flutter/widgets/SafeArea-class.html if not, you may want to take a look on SafeArea.build method implementation: api.flutter.dev/flutter/widgets/SafeArea/build.html

[Chris]

working perfectly fine now, thanks for your help :)