Flutter: Draw/extend within notch area in landscape mode - flutter

Objective:
Extend into/draw within android notch area, specifically in landscape mode. Testing with 2 physical devices results in the notch area being unusable (black) in landscape mode.
Note:
Utilising extendBodyBehindAppBar, ExtendBody and SystemChrome.setEnabledSystemUI mode etc successfully extends into the notch area in PORTRAIT mode, however when the screen is rotated to landscape, the notch area is truncated and not utilised.
Problem: When extending the screen in landscape mode on most devices with curved corners the screen looks stupid and imbalanced with a squared-off black area in the notch section and curved at the other end.
Cheers guys.

Turns out, as it currently stands it's an open issue.
See Github issue #59236
https://github.com/flutter/flutter/issues/59236
On NATIVE Android 3 options exist to control drawing in the cut-out 'notch' area:
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
This is the default behaviour. Content renders into the cut-out area while in portrait mode, but content is letterboxed while in landscape mode.
LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
Content renders into the cutout area in both portrait and landscape modes.
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
Content never renders into the cutout area.
Further native Android information can be found here:
https://developer.android.com/guide/topics/display-cutout
As it stands, the native Android equivalent of LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT seems to be stuck on flutter.
If anyone manages to work around this (perhaps platform channel stuff?), please comment.

I've faced the same problem, but looks like in addition to
SystemChrome.setEnabledSystemUIOverlays([]);
we should add the following to Android style.xml:
<style name="AppTheme" parent="#android:style/Theme.Black.NoTitleBar">
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>
Tested this on a flutter demo project with Samsung S21 Ultra that has a notch and everything works as expected in a portrait and landscape modes.
Please note that I use flutter 1.22.6, but I am sure that the same approach should work on the latest flutter.

Related

Unity SafeArea is inconsistent between different starting rotations

I'm trying to make a script that adjusts the SafeArea of my Canvas when the device is rotated. I've got it almost working and it looks great on-launch, but I'm getting a weird result after rotating that I can't understand: the SafeArea is different depending on whether the app launched in Portrait or Landscape mode.
When I log out the value of Screen.safeArea on an iPhone 12 Pro, for example, I get the following values:
Portrait on launch: (x:0.00, y:102.00, width:1170.00, height:2289.00)
Portrait rotated to Landscape: (x:0.00, y:102.00, width:2532.00, height:927.00)
Landscape on launch: (x:141.00, y:63.00, width:2250.00, height:1107.00)
Landscape rotated to Portrait: (x:141.00, y:63.00, width:888.00, height:2469.00)
The Width/Height values are changing on rotation, which makes sense, but the X/Y offsets are not. Given the particular nature of the iPhone 12, that means there is a big empty space at the top when launching in Portrait and rotating to Landscape but overflowing the notch to the side, and big empty spaces on both sides when launching in Landscape and rotating to Portrait but overflowing the notch to the top.
Is this the expected behavior? I would have thought the "launching in Portrait" and "rotated to Portrait" safeAreas should be the same, right? Is there a way to force-refresh the safeArea or something, to get the proper X/Y values? Or am I misunderstanding how this is supposed to work?
As I mentioned in my comment, I believe this is a bug in the version of Unity you are using. Good news though! According to this bug report, it has been fixed in 2020.1.X, 2018.4.X and 2019.3.X. If you are already in one of these versions, it could be that the bug has returned. If that's the case, I would try one of the alternate versions listed. If no listed versions work, you should report that the bug has regressed.

When I change the orientation of the device, there is a small black flash on the screen, Flutter

I have a sin up page that works very well, but when I switch to landscape mode, there is a small black flash on the screen that also disappears very early. flutter
I created a sign up page on flutter but when I switch from portrait to landscape mode, I see a black square appear on the screen before it disappears
When change the device orientation (by rotate the device) an black screen is painted in the bounds
what are the cases that can cause this?
I wanted to share my solution which is quite easy compared to my question above. Maybe it will save someone's time.
the black edge that appears when the device pivots (see image) disappeared during the execution of a release (flutter run apk --release).
suddenly everything is going well.

Set a Drawer to portrait even if image goes to landscape

I am using this template to build out an App. First attempt at App building but want to use this for an online exhibition platform for my paintings and photography etc. This is from a Google Flutter demo on Youtube.
https://github.com/MarcinusX/drawer_challenge/blob/master/lib/main.dart
When you run the app in custom guitar drawer mode(set the flip Bool to true ) the Drawer is set to the left side of the screen(portrait mode). I want to use the length of the screen for info and other menu items for the App.
however i need to display the images and paintings in landscape mode.
this is the issue. Is there a way to leave the Drawer as it would be in portrait mode?
ie when the user turns the device to landscape mode, then the Drawer will turn up from the bottom of the screen, and not the left side of the screen as it currently does?
or is there a way to set an image into landscape mode through ratio change that could be done without orientating the device to landscape?
I tried transform.rotate on the image but that means it get renders in portrait mode in landscape orientation. I also tried playing with the Transform.translate but can't work out how to set the Sizebox differently
I am new to this and wish to use the lockdown time to have a place for my work of the last 15 years so can work out how to code the images and place the controls and audio player for the App but if i can get the basic structure set then i can get going with the design.
any help would be great but if need be I will have to design the App around this
....
app in portrait mode
app in landscape mode, want drawer to turn in from bottom of screen not left edge

White bar appears when iPhone changes from portrait to landscape

iPhone image with white bar I'm experiencing an issue with the display of an Angular 6 app with Cordova on iOS devices in landscape mode. The app looks as expected in portrait mode, however when the orientation is changed to landscape a white bar appears on the screen in the top half left corner.
I've tried adding and removing 'viewport-fit=cover' and there's no change.
I also tried debugging the app in Safari using the 'Develop' option and the white bar is not affected by any styling and I can't even inspect the bar ... it's like it doesn't exist in code but appears on the device somehow.
I expect to not see the white bar at the top of the screen when the iPhone device is in landscape mode.
What am I missing? Is this an iOS/Apple issue? Or an issue with Cordova?

Android on-screen keyboard and B4A

I am wondering about the on-screen keyboard (osk).
When I’m in portrait mode the osk shows up on the bottom of the screen and only covers up the lower portion of my app. This is ideal because you can still see my text box which is located in the upper portion of the app. But when the orientation is changed to landscape, the osk covers up the entire app (hiding my text box) with its own text area.
This osk text area only shows in landscape mode. Is this how the osk behaves on all Androids or is it specific to Samsung Tab 7" or something else?
Is there a way to prevent the osk from displaying its own text box in landscape mode? If not, I will have to design my own osk. If I do design my own osk can I still take advantage of Android's auto completion through B4A?
I have tried the AutoCompleteEditText but it does not work the way that the Android auto completion does which is closer to what I need.
Any suggestions?
Thank you for your help,
Bob Gately
Better answer. You can use the reflection library to disable the full screen keyboard:
Dim r As Reflector
r.Target = EditText1
r.RunMethod2("setImeOptions", 268435456, "java.lang.int") 'IME_FLAG_NO_EXTRACT_UI constant
This is the default behavior of all Androids when in landscape.
You may want to see this link for an implementation of custom keyboards: