我正在尝试实现以下UI：

我使用的是插件www.example.com的自定义导航栏样式方法https://pub.dev/packages/persistent_bottom_nav_bar#custom-navigation-bar-styling
不幸的是，无论我做什么，我都不能把蓝色圆圈放在导航栏上方。

class MyCustomNavigationBar extends StatelessWidget {
  final List<PersistentBottomNavBarItem> items;
  final int selectedIndex;
  final ValueChanged<int> onItemSelected;

  const ComponentNavigationBar({
    required this.items,
    required this.selectedIndex,
    required this.onItemSelected,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 60.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: items.map((item) {
          int index = items.indexOf(item);

          Widget icon = IconTheme(
            data: IconThemeData(
              size: item.iconSize,
              color: item.activeColorPrimary,
            ),
            child: item.icon,
          );
          
          Widget result = icon;

          if (index == 2) {
            result = Padding(
              padding: EdgeInsets.only(bottom: 50),
              child: DecoratedBox(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.blue,
                ),
                child: icon,
              ),
            );
          }

          return result;
        }).toList(),
      ),
    );
  }
}

我尝试在Stack中使用Positioned; Align; SafeAreas; margins & paddings，但我总是得到这样的结果：

我怎样才能达到预期的结果？