Strange white band under flutter keyboard - flutter

After upgrading flutter I noticed that I have a strange looking white band under my keyboard.
I have no idea how that came to be and how to get rid of it.
My app works in fullscreen mode which might have something to do with it.

From SystemChrome.setEnabledSystemUIMode documentation:
The settings here can be overridden by the platform when System UI
becomes necessary for functionality.
For example, on Android, when the keyboard becomes visible, it will
enable the navigation bar and status bar system UI overlays. When the
keyboard is closed, Android will not restore the previous UI
visibility settings, and the UI visibility cannot be changed until 1
second after the keyboard is closed to prevent malware locking users
from navigation buttons.
You can hover over in your code and read more, but apparently it is for safety issues regarding malware lockouts.
As to why it appears white, I think it's a bug. I managed to get it working only while using manual like this, and assigning either bottom or top:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);
This for example while using bottom, will keep the upper status bar hidden, but shows the navigation keys. If the keyboard is needed, it appears normally, and not as a white issue. If you don't need the status bar, but you're okay with the bottom, use the SystemUiOverlay.bottom perhaps, until it's fixed.
Notice the hidden status bar on top.

Related

How to disable android's bottom status bar in Flutter?

Over the past few days, I've been struggling to figure out how to disable the Android device's bottom status (navigation) bar. (As shown in the image below)
Bottom Status Bar on Android
I've looked everywhere and tried everything to find the solution. I tried every method there was to do this, but it didn't work the way I wanted it to. The system overlays, like the bottom and top status bars, can be hidden, but they cannot be entirely disabled or concealed.
I want to know if it is possible to completely disable the status bars. I'm building an app for a marketing MV Player device and the public users can touch or interact with the application but I have to prevent them from exiting the application for security reasons.
I have tried the method given in this answer. The bottom status bar, however, will be hidden; nonetheless, it will become visible if you swipe up to the position of the status bar, or occasionally when you press the bottom of the screen.
You could use the package kiosk_mode to do what you are after. Have a look at this package.

Issues with Ionic 5 keyboard

I am currently working on an Ionic 5 and I am facing 2 issues with the keyboard.
When I click on the ion-input and the keyboard appears:
The ion-content is pushed up so it is right above the keyboard, which cause everything to be crammed. I tried a bunch of solutions, but none of them properly worked, and most of them involve android:windowSoftInputMode="adjustNothing", which leaves the ion-content as it is, hence the ion-input is not visible and so the user can't see what they're typing and they also can't see the next button, so they must first close the keyboard in order to see what they wrote and be able to move on to the next step.
When the keyboard is about to dismiss, it leaves a white space in the space it was taking up. It's only for a split second but it is visible and makes the app feel like it's slow or lagging.
These 2 issues seem to be very common as I found questions about them since 2014, and I tried most solutions mentioned in the answers but nothing seems to work.
I seem to be having this issue in this app only, but I know that it is not an ionic 5 issue as people faced the same issue in older versions.
What the structure of the page looks like, I had to close all code blocks so that I could take one screenshot:
android:windowSoftInputMode is ised for native fields (EditText,etc..) so when you click on native xml it will take effect. All what you need to do is in your androidManefist.xml on line applicarion or activity, there is keyboardresize="adjustResize" which is the default, change it to adjustPan and content will not be pushed up , instead keyboard will go up as actionsheet from bottom without effecting the content.

White background shows when keyboard closes on Android

I am testing my app on HTC One M8 running Android version 5.0.2. When an input field in the app loses focus, a white background is shown after the keyboard closes.
My background image is set on .scroll-content, so I don't understand why it acts like this on Android.
Check your ionic pane colour and view colour. You have different background colour so in the keyboard adjust pane mode the view gets resized (height-keyboard height) so when the keyboard goes off it shows the ionic-pane colour. So override the '.pane' background colour and see will it make any difference.
keyboard adjustment will work only if '.scroll-content' is present. By default ionic-content will enable this
The issue is that when we open a keyboard in our current application the app gets resized to the area that is left after opening the keyboard and the Cordova webview is too slow in resizing the app back to its normal size after the user closes the keyboard. There is no proper solution to this problem.
The most elegant working workaround for is to stop resizing the application on keyboard open. The keyboard will just slide up and down on the form as an overlay and there will be no resizing required.
In AndroidManifest.xml file try to set windowSoftInputMode attribute to adjustNothing:
android:windowSoftInputMode="adjustPan"
This is not a solution and can be considered as an option for small forms but it is not suitable for big forms.

Pull twice to show notification center or control panel?

Recently, I am trying to fix issues of my app after release of iOS7.
One of the most annoying problem is about the pull-up control panel: since my app has pull up menu, apparently, the pull-up gesture triggers control panel simultaneously.
However, I found some apps are not affecting by this issue cause they need to pull twice to show the control panel, such as Slideshark. When user perform a pull-up gesture, the menu shows up with a "pull up tab" at the bottom of the screen(see red rectangle).
So the user need to pull up again to trigger the control panel.
I do not think pull-up menu is a good idea in iOS7, but this seems temporarily fix the problem. Anyone know how to do this?
Hubert
You'll get this behavior automatically when you hide the status bar in your app.
This question explains ways to hide the status bar on iOS 7: Cannot hide status bar in iOS7
(You can do it on a per view controller basis, or for your entire app at once.)

Google Chrome page bottom cut off

Since google chrome updated to 11.0.696.60 some days ago, it cuts off the bottom of popup pages ... the status bar is displayed OUTSIDE the window at the bottom. Here is an example how it happens on the Facebook share popup, like shown in the screenshot:
On the left window the share and skip button disappear totally. The page seems to be larger than the window but resizing the windows does not uncover them. When you hover over a link, the status bar appears outside the chrome window ... strange! Maximizing the window or going into fullscreen mode shows the bottom. I detect this behavior on different popup pages on different systems ...
Is this a setting thing or a bug?!?
Since I code something with this fb share function (fb jsSDK)
ok, i found now there is a thread at the chromium forum regarding this issue:
here
Just managed to fixed this issue by reverting the theme back to the default.
options > personal stuff > themes > reset to default theme
For me the problem was occurring due to a zoom level exceeding 100%. Setting the zoom value to 100% fixed it.