How can i check that device has notch without using SafeArea in flutter?

Question

I'm designing a video call screen where i have to manage selfViewContainer between hole screen.

On this screen, I already managed most of the parts for horizontal alignments but for vertical it's not working properly for me in devices with a notch.

I want to make minimum padding of 50 from the top while dragging

Here is a code for orange container which is draggable

Widget _selfView() {

    return Positioned(
      top: _selfViewTop,
      left: _selfViewLeft,
      child: Draggable(
        feedback: _draggableView(),
        childWhenDragging: Container(),
        child: _draggableView(),
        onDragEnd: (dragDetail) {
          var screenWidth = AspectSize.getScreenWidth(context: context);
          var screenHeight = AspectSize.getScreenHeight(context: context);

          _selfViewLeft = dragDetail.offset.dx;
          _selfViewTop = dragDetail.offset.dy;

          if (_selfViewLeft < (screenWidth / 2)) {
            _selfViewLeft = 16.0;
          } else if (_selfViewLeft > (screenWidth / 2)) {
            _selfViewLeft = (screenWidth) - (_selfViewWidth + 16);
          }

          if (_selfViewLeft < 1.0) {
            _selfViewLeft = 16.0;
          } else if ((_selfViewLeft + _selfViewWidth) > screenWidth) {
            _selfViewLeft = (screenWidth) - (_selfViewWidth + 16);
          }
          if (_selfViewTop < 1.0) {
            _selfViewTop = 50;
          } else if ((_selfViewTop + _selfViewHeight) > screenHeight) {
            _selfViewTop = (screenHeight) - (_selfViewWidth + 50);
          }

          setState(() {});
        },
      ),
    );
  }

For this UI i used, the Stack widgets for managing containers the orange container is used to show the caller's picture, and the blue container will show pictures of another person.

Please give me some solution for this.

Thank you.

Jester

Answer 1

You can use MediaQuery.of(context).viewPadding and check whether the padding is greater than zero ,then you will need a safe area as there is a notch .

And the best way to handle notch behaviour is to use the flutter_device_type package.

the following code in the above package can determine the notch:

if( Device.get().hasNotch ){
//Do some notch business
 }

Thank You.

Hyperpyrexia

Answer 2

You can also use the following package: iphone_has_notch

and easily check it, using this command IphoneHasNotch.hasNotch

Suckow