Indexed Stacking in Flutter. How to display container above all other widgets?

Question

I try to create a notification button which shows all unread notifications inside the app how we know it from social media apps.

When clicking the notification icon I want to open the list with all new notifications.

My problem: I can't get stacking to work. I'm working with Stack widget but I need the list container float above all other widgets. It always has to be on top.

How its look like

As you can see the blue container is not in front of all widgets. How can we manage it in Flutter to bring it in front of all? Something like position: fixed; z-index: 9999 position: fixed; z-index: 9999 in CSS.

My code

return Scaffold(
  backgroundColor: Get.theme.colorScheme.primary.darken(.05),
  body: Column(
    children: [
      SizedBox(
        height: 50,
        child: WindowTitleBarBox(
          child: MoveWindow(
            child: NotificationBar(),
          ),
        ),
      ),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MainNavigation(),
            Flexible(child: this.child!),
          ],
        ),
      ),
    ],
  ),
);


class NotificationBar extends StatelessWidget {
  const NotificationBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10, right: 35),
      alignment: Alignment.centerRight,
      child: Indexer(
        clipBehavior: Clip.none,
        children: [
          Icon(
            Icons.notifications,
            size: 25,
          ),
          Positioned(
            left: 12,
            bottom: 12,
            child: Badge(
              content: "2",
              minHeight: 5,
              minWidth: 12,
              fontSize: 7,
            ),
          ),
          Positioned(
            top: 30,
            right: 0,
            child: Container(
              clipBehavior: Clip.none,
              width: 300,
              height: 500,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

Do you have an idea?

Answer 1

Try Overlay :

ElevatedButton(
  child: Text('Overlay Test'),
  onPressed: () {
    final entry = OverlayEntry(
      builder: (context) => Positioned(
        bottom: 20,
        right: 20,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
    Overlay.of(context)?.insert(entry);
  },
)

To remove it, call entry.remove() . You might want to store the entry variable higher for easier access, maybe as a class member variable.