Flutter add Positioned Icon to navigation bar

I’m trying to achieve the following UI:

And I’m using the Custom Navigation Bar Styling approach of the plugin https://pub.dev/packages/persistent_bottom_nav_bar#custom-navigation-bar-styling

Unfortunately no matter what I do I cannot put the blue circle above the navigation bar.

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(),
      ),
    );
  }
}

I have tried to use Positioned inside a Stack; Align; SafeAreas; margins & paddings but I always end up with this result:

How can I achieve the desired result?