Scaffold Status Bar Blocking Button Touch

Question

Although I am in full screen mode where status bar is hidden but still my menu button on top right corner is not receiving touch. You can see in picture where I have selected the top bar which is receiving the touch.

Half of my menu button is receiving touch and half is not.

I have Also taken picture of Flutter Inspector in Widget Select Mode

I am also adding my custom button code. Just for reference:

class RoundIconButton extends StatelessWidget {
  RoundIconButton({
    Key key,
    @required this.onPressed,
    @required this.icon,
    this.fillColor = Colors.transparent,
  }) : super(key: key);

  final Icon icon;
  final Function onPressed;
  final Color fillColor;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: icon,
      onPressed: onPressed,
      shape: CircleBorder(),
      fillColor: fillColor,
      constraints: BoxConstraints.tightFor(height: 50.0, width: 50.0),
    );
  }
}

wrapping scaffold body with safeArea would move my widgets down as well. I don't want that. — Noor Ali Butt, Dec 29 '20 at 08:50

score 1 · Answer 1 · answered Dec 29 '20 at 10:53

1

You have to wrap your Scaffold with SafeArea like,

without SafeArea layout looks like:

with SafeArea layout looks like:

answered Dec 29 '20 at 10:53

Mayur Chaudhary

217
1
14

You can clearly see that I have a full screen app. I can not use Safe Area period – Noor Ali Butt Dec 30 '20 at 09:22

score 0 · Answer 2 · answered Dec 29 '20 at 09:16

0

use Scaffold in body in child SafeArea and SafeArea inside insert all page safearea has notch and bottom bar avoid

Scaffold(
  body: SafeArea(
    child: ...........
    ...........
  ),
),

answered Dec 29 '20 at 09:16

Jayesh Shinde

71
7

Scaffold Status Bar Blocking Button Touch

2 Answers2