Custom BottomNavigationBar flutter

Question

I am quite new to flutter, and didn't know about BottomNavigationBar and BottomNavigationBarItem, so I defined a custom one:

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        systemNavigationBarColor: MYColors.darkGrey,
      ),
      child: Scaffold(
        body: ...,
        bottomSheet: SizedBox(
          height: Menu.height,
          child: Menu([
            MenuItem(AppLocalizations.of(context)!.home, Icons.home_outlined),
            MenuItem(AppLocalizations.of(context)!.info, Icons.info_outline),
            MenuItem(
                AppLocalizations.of(context)!.conventions, Icons.sell_outlined),
            MenuItem(AppLocalizations.of(context)!.calendar,
                Icons.calendar_month_outlined),
            MenuItem(AppLocalizations.of(context)!.more, Icons.menu)
          ], _currentPage, _setPage),
        ),
      ),
    );
  }

It works, but e.g. on the iPhone 14 max, which has the new soft button, the padding at the bottom is missing:

I tried to refactor the whole menu, using BottomNavigationBar:

BottomNavigationBarItem _buildBottomNavigationBarItem(
      IconData iconData, String label) =>
  BottomNavigationBarItem(
      backgroundColor: HGVColors.grey,
      icon: Icon(iconData),
      activeIcon: Icon(iconData, color: HGVColors.yellow),
      label: label);

bottomNavigationBar: BottomNavigationBar(
  onTap: (value) => _setPage(value),
  showUnselectedLabels: true,
  unselectedItemColor: Colors.white,
  selectedItemColor: HGVColors.yellow,
  type: BottomNavigationBarType.fixed,
  unselectedLabelStyle: TextStyle(
    overflow: TextOverflow.visible,
  ),
  backgroundColor: HGVColors.grey,
  currentIndex: _currentPage.toInt(),
  items: [
    _buildBottomNavigationBarItem(
        Icons.home_outlined, AppLocalizations.of(context)!.home),
    _buildBottomNavigationBarItem(
        Icons.info_outline, AppLocalizations.of(context)!.info),
    _buildBottomNavigationBarItem(
        Icons.sell_outlined, AppLocalizations.of(context)!.conventions),
    _buildBottomNavigationBarItem(Icons.calendar_month_outlined,
        AppLocalizations.of(context)!.calendar),
    _buildBottomNavigationBarItem(
        Icons.menu, AppLocalizations.of(context)!.more),
  ],
),

It is perfect too, except for the new line on the long label:

I know, I could simply add padding at the bottom, but it would be wasted space for screens without this softbutton. Is there a way to omit the new line wrap for the items? Or can I dynamically add the padding on my custom menu? I look a look at the source code of BottomNavigationBar but did not understand how the dynamic padding is added.

Answer 1

You should use the SafeArea widget on top of the Scaffold widget.

Before SafeArea

After SafeArea

Here is a useful link; https://www.geeksforgeeks.org/safearea-in-flutter/