Flutter add Positioned Icon to navigation bar

Question

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?

Does this answer your question? [How to add button to bottom navigation bar which hang out above - Flutter](https://stackoverflow.com/questions/49299457/how-to-add-button-to-bottom-navigation-bar-which-hang-out-above-flutter) — OMi Shah, May 26 '23 at 16:20
also: https://stackoverflow.com/questions/71346584/icons-get-together-in-flutter-bottom-navigation-bar-with-floating-button — OMi Shah, May 26 '23 at 16:21
Thanks, if I implement that I have other several problems, such as keep the navigation bar. For example, this solution https://stackoverflow.com/a/52717037/3355243 is perfect for me, but how do I keep the navigation bar? — Linesofcode, May 26 '23 at 17:27

score 1 · Accepted Answer · answered May 26 '23 at 17:45

Solved.

I was on the right track all I had to do is apply clipBehavior: Clip.none to the Stack widget.

Solution:

if (index == 2) {
    icon = Stack(
      clipBehavior: Clip.none,
      children: [
        Positioned(
            bottom: 20,
            left: 0,
            right: 0,
            child: DecoratedBox(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: Colors.blue,
              ),
              child: icon,
            )),
      ],
    );
  }

Flutter add Positioned Icon to navigation bar

1 Answers1