I am using the AnimatedNotchBottomBar package in my Flutter app as a bottom navigation bar. It works fine in portrait mode, but when I rotate the screen to landscape mode, the bottom bar does not expand to fill the entire width of the screen.

Code Snippet:

bottomNavigationBar: AnimatedNotchBottomBar(
  removeMargins: true,
  showBottomRadius: false,
  showTopRadius: true,
  elevation: 2.0,
  durationInMilliSeconds: 400,
  showLabel: true,
  blurOpacity: 0.4,
  blurFilterX: 5.0,
  blurFilterY: 10.0,
  color: MyConst.constIconColor,
  notchBottomBarController: notchBottomBarController,
  bottomBarItems: [],
),

What I Tried: Wrapped it with a SizedBox and MediaQuery to ensure it takes full width:

bottomNavigationBar: SizedBox(
  width: MediaQuery.of(context).size.width,
  child: AnimatedNotchBottomBar( ... ),
),

// No effect, still does not expand in landscape.

Wrapped it inside a Container with double.infinity width:

bottomNavigationBar: Container(
  width: double.infinity,
  child: AnimatedNotchBottomBar( ... ),
),

// Still not expanding.

Checked if Scaffold constraints were causing issues by setting resizeToAvoidBottomInset: false

Scaffold(
  resizeToAvoidBottomInset: false,
  bottomNavigationBar: AnimatedNotchBottomBar( ... ),
) 

// No success

What I Expect: The AnimatedNotchBottomBar should expand to full width in landscape mode, just like it does in portrait mode. It should not be clipped or centered, but rather take up the entire bottom space.

I am using the AnimatedNotchBottomBar package in my Flutter app as a bottom navigation bar. It works fine in portrait mode, but when I rotate the screen to landscape mode, the bottom bar does not expand to fill the entire width of the screen.

Code Snippet:

bottomNavigationBar: AnimatedNotchBottomBar(
  removeMargins: true,
  showBottomRadius: false,
  showTopRadius: true,
  elevation: 2.0,
  durationInMilliSeconds: 400,
  showLabel: true,
  blurOpacity: 0.4,
  blurFilterX: 5.0,
  blurFilterY: 10.0,
  color: MyConst.constIconColor,
  notchBottomBarController: notchBottomBarController,
  bottomBarItems: [],
),

What I Tried: Wrapped it with a SizedBox and MediaQuery to ensure it takes full width:

bottomNavigationBar: SizedBox(
  width: MediaQuery.of(context).size.width,
  child: AnimatedNotchBottomBar( ... ),
),

// No effect, still does not expand in landscape.

Wrapped it inside a Container with double.infinity width:

bottomNavigationBar: Container(
  width: double.infinity,
  child: AnimatedNotchBottomBar( ... ),
),

// Still not expanding.

Checked if Scaffold constraints were causing issues by setting resizeToAvoidBottomInset: false

Scaffold(
  resizeToAvoidBottomInset: false,
  bottomNavigationBar: AnimatedNotchBottomBar( ... ),
) 

// No success

What I Expect: The AnimatedNotchBottomBar should expand to full width in landscape mode, just like it does in portrait mode. It should not be clipped or centered, but rather take up the entire bottom space.

• android
• ios
• flutter
• algorithm
• dart

1 Answer 1

from their repository, they set the bottom bar width as follows:

_screenWidth = MediaQuery.of(context).size.width <= 500 ? MediaQuery.of(context).size.width : widget.bottomBarWidth;

so if the screen width is over 500, the parameter bottomBarWidth is used and this has a default of 500.

So one solution would be:

bottomNavigationBar: AnimatedNotchBottomBar(
  removeMargins: true,
  showBottomRadius: false,
  bottomBarWidth: MediaQuery.of(context).size.width,
  showTopRadius: true,
  elevation: 2.0,
  durationInMilliSeconds: 400,
  showLabel: true,
  blurOpacity: 0.4,
  blurFilterX: 5.0,
  blurFilterY: 10.0,
  color: MyConst.constIconColor,
  notchBottomBarController: notchBottomBarController,
  bottomBarItems: [],
),