Как мне избавиться от лишнего BottomAppBar во Flutter?

У меня есть лишний нижний колонтитул BottomAppBar, и я не хочу там находиться. Я хочу, чтобы нижняя панель навигации была вложена в нижнюю панель приложения, потому что я все еще хочу сохранить выемку для плавающей кнопки действия. На скриншоте это ясно видно, так как он окрашен в красный цвет.

Это мой код:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent.withOpacity(0.4),
        ),
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
      ),
      bottomNavigationBar: bottomNavBar,
      floatingActionButton: addPostButton,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget get bottomNavBar {
    return BottomAppBar(
      color: Colors.red,
      shape: CircularNotchedRectangle(),
      elevation: 0,
      notchMargin: 10,
      child: BottomNavigationBar(
        elevation: 0,
        items: [
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.homeOutline),
            activeIcon: Icon(MdiIcons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.accountOutline),
            activeIcon: Icon(MdiIcons.account),
            title: Text("Profile"),
          ),
        ],
      ),
    );
  }

  Widget get addPostButton {
    return FloatingActionButton(
      focusElevation: 0,
      onPressed: () {},
      child: Icon(
        MdiIcons.mapMarkerPlusOutline,
        size: 30,
      ),
    );
  }
}

Снимок экрана с красным нижним колонтитулом

1 ответ

Измените свой код, как показано ниже, затем проверьте:

 Widget get bottomNavBar {
  return BottomNavigationBar(
    elevation: 0,
    items: [
      BottomNavigationBarItem(
        icon: Icon(MdiIcons.homeOutline),
        activeIcon: Icon(MdiIcons.home),
        title: Text("Home"),
      ),
      BottomNavigationBarItem(
        icon: Icon(MdiIcons.accountOutline),
        activeIcon: Icon(MdiIcons.account),
        title: Text("Profile"),
      ),
    ],
   );
  }
Другие вопросы по тегам