Flutter BottomNavBar не показывает BoxShadow

Question

Я сделал настраиваемую панель BottomNav Bar и обернул ее внутри контейнера, чтобы я мог придать ей некоторую тень коробки. Но тень коробки не применяется. Вот код

class CBottomNavBar extends StatefulWidget {
  @override
  _CBottomNavBarState createState() => _CBottomNavBarState();
}

class _CBottomNavBarState extends State<CBottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return Consumer<SManageIndex>(
      builder: (context, manageIndex, child) => Container(
        height: 80,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
            color: primaryColorDark,
            boxShadow: [
              BoxShadow(color: primaryColorDark, blurRadius: 4, spreadRadius: 2)
            ],
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(20), topLeft: Radius.circular(20))),
        child: BottomNavigationBar(
          backgroundColor: primaryColorDark,
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.hospital,
                ),
                title: Text('Appointments')),
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.pills,
              ),
              title: Text('Medicines'),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.bookMedical,
              ),
              title: Text('Documents'),
            ),
          ],
          currentIndex: manageIndex.index,
          onTap: (value) => manageIndex.changePage(value),
        ),
      ),
    );
  }
}

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

Дело в том, что мне нужны и радиус границы, и тень блока, поэтому я использую контейнер. Также приветствуются любые другие простые способы сделать то же самое.

Спасибо за ваше время.

Answer 1

Ваш ответ: Offset. Используйте класс смещения в своем decoration для элемента boxShadow, и вам будет хорошо делать go

//dx is horiztonal and dy is vertical
// play with it
boxShadow: [BoxShadow(offset: Offset(dx, dy));

Answer 2

Вам нужно свойство Offset для BoxShadow,

Свойство offset используется для управления положением тени. По умолчанию это zero, поэтому вам нужно добавить Offset:

Я добавил демонстрацию, используя ваше дерево виджетов в качестве примера:

class CBottomNavBar extends StatefulWidget {
  @override
  _CBottomNavBarState createState() => _CBottomNavBarState();
}

class _CBottomNavBarState extends State<CBottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return Consumer<SManageIndex>(
      builder: (context, manageIndex, child) => Container(
        height: 80,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
            color: primaryColorDark,
            boxShadow: [
              BoxShadow(
                 color: primaryColorDark, blurRadius: 4, spreadRadius: 2,
                 // add the offset property
                 offset: Offset(0, 5), // new line [move to the right[horizontally] by 0 ,move to the top[vertically] by 5]
            ),
            ],
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(20), topLeft: Radius.circular(20))),
        child: BottomNavigationBar(
          backgroundColor: primaryColorDark,
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.hospital,
                ),
                title: Text('Appointments')),
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.pills,
              ),
              title: Text('Medicines'),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.bookMedical,
              ),
              title: Text('Documents'),
            ),
          ],
          currentIndex: manageIndex.index,
          onTap: (value) => manageIndex.changePage(value),
        ),
      ),
    );
  }
}