CODEWITHSUNDEEP
flutterdartcontainersnavbarsafearea
Chris
Chris

Reputation: 2294

Flutter change bottom nav bar height

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!

Upvotes: 2

Views: 3210

Answers (2)

eeqk
eeqk

Reputation: 3862

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

Upvotes: 1

Jordan Kotiadis
Jordan Kotiadis

Reputation: 566

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

Upvotes: 0

Related Questions