Description
Hello! I found problems with the SystemChrome.setEnabledSystemUIOverlays ([])
method.
I will try to describe in as much detail as possible.
So, let's begin
I created an empty project and replaced it with this one.
Code
Code taken from here https://flutter.io/cookbook/navigation/navigation-basics/
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstScreen(),
));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
print(""" filterLog
<<<<<< FirstScreen build >>>>>>>>
""");
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
print(""" filterLog
<<<<<< SecondScreen build >>>>>>>>
""");
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
1. Normal State
Code unchanged.
Check the logs for comparing with the following items and note the movement of the contents inside the window when it is in the tray.
2. Full Screen on
Changes in the code.
- Added method
SystemChrome.setEnabledSystemUIOverlays ([]);
- And Third
Screen()
Please note that the widget that started the application does not start the assembly after minimizing the application. However, if you go to the second screen, and then to the third, it will call the build function on all the following screens, except the first, when we return to the application.
Note: In the following paragraph, we consider the option with Navigator.pushReplacement
.
3. Full Screen on and change logic next Screen
Changes in the code. The Navigator.push
method has been replaced by Navigator.pushReplacement
, the second screen is now the main screen, but when we return from the tray, it still calls the build method.
Also note that the second screen is the main one, and when the “Back” button is pressed, the application is hidden and the widget calls the build
method !!!!!! What for????? According to the logic of the android, by pressing back button on the root activity, the activity is killed
4. Hide bottom bar
Code changes instead of SystemChrome.setEnabledSystemUIOverlays ([]);
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.bottom]);
When you open the application, everything is in order, the bottom panel is hidden, but if you tap the screen in any area, it will appear and disappear only after the application goes to the tray and back. The build method is still called after the tray.
5. Hide status bar
Code changes instead of SystemChrome.setEnabledSystemUIOverlays ([]);
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);
The top pane does not appear when you tap the screen (everything is fine), and not like in the previous example. The assembly method is still called when you go to the tray and back.
6. Full screen mode is enabled using native Android code.
Added the following code
package com.example.flutterbugsystemuioverlays
import android.os.Bundle
import android.view.View
import android.view.WindowManager
import io.flutter.app.FlutterActivity
import io.flutter.plugins.GeneratedPluginRegistrant
class MainActivity(): FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE
or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_FULLSCREEN)
GeneratedPluginRegistrant.registerWith(this)
}
}
This is the most interesting case.
- In all previous examples, the content inside has shifted when trying to hide the upper or lower bar
- For some reason, the lower bar is not hidden, although this code works fine for native applications android
- Also note that even though the top bar is hidden, the assembly function in the second screen is not called.
Flutter doctor -v
[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.14 18A391, locale ru-RU)
• Flutter version 0.9.4 at /Users/alexfix/Flutter/flutter
• Framework revision f37c235c32 (6 weeks ago), 2018-09-25 17:45:40 -0400
• Engine revision 74625aed32
• Dart version 2.1.0-dev.5.0.flutter-a2eb050044
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
• Android SDK at /Users/alexfix/Library/Android/sdk
• Android NDK at /Users/alexfix/Library/Android/sdk/ndk-bundle
• Platform android-28, build-tools 28.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
• All Android licenses accepted.
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 10.1, Build version 10B61
• ios-deploy 2.0.0
• CocoaPods version 1.5.3
[✓] Android Studio (version 3.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 30.0.1
• Dart plugin version 181.5656
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
[!] Connected devices
! No devices available
Conclusion
It turns out that at the moment it is impossible to use the usual full-screen mode for Android.
The native flutter method calls assembly methods for all screens, except for the first after returning to the applications from the tray.
In addition, the flutter somehow does not allow the native Android code to hide the lower bar, which would be a quick decision to remove the call for the assembly function on all screens, except for the first after the tray in full screen mode
I hope I somehow helped, because I really liked the flutter.
Activity
kyleorin commentedon Nov 5, 2018
@zoechi ..
zoechi commentedon Nov 5, 2018
Please add the output of
flutter doctor -v
.1AlexFix1 commentedon Nov 5, 2018
Done, added to description issue .
GaryQian commentedon Dec 5, 2018
Thanks for detailing this. The root cause is how we treat the padding for safe areas. When going full-screen, the safe area padding around the edges are reduced to make use of the new space. However, when the multitasking button is pressed, the navbar reappears, and Flutter responds by changing the padding to accommodate the newly appearing navbar, even though it does not need to.
We should add some smarter logic to distinguish between actual safe-area changes and temporary changes such as those made by the multitasker.
priezz commentedon Feb 16, 2019
Hello. I can confirm the same behavior for point 4. (hide the bottom navbar). We would like to hide the bottom controls in our app, but keep the status bar visible. However, the described behavior (tapping anywhere in the screen opens the black bottom navbar, overlapping the app UI, and no way to hide it) prevents us from doing that. At the same time if we hide both nav and status bars, the app works as expected - system controls appear just on the swipe from bottom to top or from top to bottom.
Nackha1 commentedon Feb 17, 2019
I have the same problem showed in the point 4. I'd like to create a fullscreen app (that keeps the status bar but not the bottom navbar) but it is impossible to accomplish because every time a user taps (anywhere) on the screen the bottom navbar is opened and it can be closed only by going in the apps manager section of Android and returning to the app.
That's line I used:
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);
- Patch for [issues:23913](flutter/flutter#23913) point 4
1AlexFix1 commentedon Jun 20, 2019
Hi, the problem is already more than six months, will there be any solutions? Since the creation of normal full-screen applications is not possible
mirjalal commentedon Sep 11, 2019
Hi, any update with the related bug?
DjangoOverloard commentedon Nov 16, 2019
I have a very strange problem and I don't know if they are connected... Somehow when I only show the top system overlay, the rest of the screen becomes inactive. I can't scroll or press anything. But when I go to full screen, display both overlays or only the bottom one this doesn't seem to be the case.
26 remaining items