Is it possible to have left/right buttons in unsafe area next to the notch in Flutter (iOS)?

Viewed 86

I'm currently working on my first Flutter app and now I'm trying to achieve a button next to the notch (see attached image). Placing the button at the desired place is not the problem, but the button isn't clickable. When placing the button next to the notch in a native iOS app the button is clickable. Using a Stack widget for the buttons at the top of the screen.

return Stack(
  children: [
    if (widget.showMenu)
      Positioned(
        top: _iconPosition,
        left: _iconPosition + 4,
        child: CustomIconButton(
          icon: widget.menuIcon,
          width: 26,
          height: 17,
          onPressed: () => menuPressed(),
        ),
      ),
    if (widget.showLeaderboard)
      Positioned(
        top: _iconPosition,
        right: _iconPosition,
        child: CustomIconButton(
          icon: IconHelper.leaderboard,
          width: 26,
          height: 20,
          tooltip: ToolTip(icon: IconHelper.leaderboardPlus),
        ),
      ),
  ],
);

enter image description here

1 Answers

You can wrap Stack widget with SafeArea widget with top: true, bottom : true, right : true and legt : true. So you can avoid unsafe area.

Related