Skip to content

Flutter problem full-screen on android  #23913

Closed
@1AlexFix1

Description

@1AlexFix1

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.

video_1_720

2. Full Screen on

Changes in the code.

  1. Added method SystemChrome.setEnabledSystemUIOverlays ([]);
  2. 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.

video_2_720

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

video_3_720

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.

video_4_720

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.

video_5_720

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.

  1. In all previous examples, the content inside has shifted when trying to hide the upper or lower bar
  2. For some reason, the lower bar is not hidden, although this code works fine for native applications android
  3. Also note that even though the top bar is hidden, the assembly function in the second screen is not called.

video_6_720

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

kyleorin commented on Nov 5, 2018

@kyleorin
added
frameworkflutter/packages/flutter repository. See also f: labels.
a: fidelityMatching the OEM platforms better
f: routesNavigator, Router, and related APIs.
on Nov 5, 2018
zoechi

zoechi commented on Nov 5, 2018

@zoechi
Contributor

Please add the output of flutter doctor -v.

added this to the Goals milestone on Nov 5, 2018
1AlexFix1

1AlexFix1 commented on Nov 5, 2018

@1AlexFix1
Author

Пожалуйста, добавьте вывод flutter doctor -v.

Done, added to description issue .

GaryQian

GaryQian commented on Dec 5, 2018

@GaryQian
Contributor

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

priezz commented on Feb 16, 2019

@priezz

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

Nackha1 commented on Feb 17, 2019

@Nackha1

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]);

1AlexFix1

1AlexFix1 commented on Jun 20, 2019

@1AlexFix1
Author

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.

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

mirjalal commented on Sep 11, 2019

@mirjalal

Hi, any update with the related bug?

DjangoOverloard

DjangoOverloard commented on Nov 16, 2019

@DjangoOverloard

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

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms bettera: layoutSystemChrome and Framework's Layout Issuescustomer: crowdAffects or could affect many people, though not necessarily a specific customer.found in release: 1.21Found to occur in 1.21frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallywaiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @fredgrott@zoechi@Hixie@goderbauer@kf6gpe

      Issue actions

        Flutter problem full-screen on android · Issue #23913 · flutter/flutter