Пользовательская BottomNavigationBar во Flutter

Question

Я попытался реализовать настраиваемую нижнюю панель навигации. Я использую просмотр страниц для перехода между страницами. Теперь нижняя панель навигации не находится абсолютно над просмотром страницы, но отсекает часть просмотра страницы. Кто-нибудь может мне здесь помочь?

введите описание изображения здесь

Вот соответствующий код:

  Scaffold buildHomePage() {
    return Scaffold(
      body: PageView(
        children: <Widget>[
          PopularScreen(),
          DiscoverScreen(),
          ActivityScreen(),
          ProfileScreen()
        ],
        controller: pageController,
        onPageChanged: onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  Widget buildBottomNavigationBar() {
    return BottomAppBar(
          child: Container(
        height: 65,
        margin: EdgeInsets.only(left: 30, bottom: 40, right: 30),
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 5,
            )
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(50),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: items.map((item) {
            var itemIndex = items.indexOf(item);
            return GestureDetector(
              onTap: () => onTap(itemIndex),
              child: _buildNavBarItem(item, pageIndex == itemIndex),
            );
          }).toList(),
        ),
      ),
    );
  }

Answer 1

Вы можете использовать Stack Widget, чтобы расположить ваш BottomNavigationBar поверх PageView:

Scaffold(
  body: Stack(
    children: <Widget>[
      PageView(...),
      Align(
        alignment: Alignment.bottomCenter,
        child: buildBottomNavigationBar(pageController),
      ),
    ],
  ),
);

Затем вы можете удалить BottomAppBar из buildBottomNavigationBar() или установить для свойства elevation значение 0 и от color до Colors.transparent:

BottomAppBar(
  color: Colors.transparent,
  elevation: 0,
  child: ...
);

Результат:

введите описание изображения здесь

Answer 2

Ваш ответ: Класс стека , который поможет вам построить BottomNavigationBar поверх вашего PageView

Basi c макета страницы

Stack(
  children: [
    PageView(
      ....
    )

    Positioned(
       top: ..,
       left: ..,
       bottom: ..,
       right: ..,
       child: BottomNavigationBar()
    )
  ]
)

Если это имеет для вас смысл