Dart & Flutter/궁금했던 것, 몰랐던 것

system UI (status bar/navigation bar) 안 보이게 만들기

낭초비 2023. 10. 25. 10:57
반응형

main() 에서 아래의 코드를 추가하면 시스템 UI 인 status bar(top) 와  navigation bar( bottom) 이 숨겨진 채로 Full screen에 대해서 앱의 UI 가 표시된다. 

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

 

그런데 앱 실행중에 status bar, navigation bar 가 생성될 수 있는 제스쳐를 취하게 되면 숨겨두었던 system UI 가 나타나면서 UI 가 overflow 될 수 있다. 

 

이를 감지해서 다시 system UI 를 숨겨 두기 위한 코드도 추가해 두었었다. system UI 를 감지하고 2초 후에 다시 원래 상태로 되돌리는 명령이다. 

  SystemChrome.setSystemUIChangeCallback((systemOverlaysAreVisible) async {
    await Future.delayed(const Duration(seconds: 2));
    SystemChrome.restoreSystemUIOverlays();
  });

 

하지만 위의 두 코드를 넣어서 만들었을 경우, system UI 를 생성하는 제스쳐 후 2초 동안은 bottom overflow 에 의해서 app 의 UI가 망가지는 것이었다. 그 원인은 앱을 구현할 때 height 부분을 처음 mediaqury 에서 받아온 height 를 기반으로 계산한 fixed 값을 사용 했기 때문이다. 이러한 코드를 일일이 flexable 하게 바꿔 주는 작업을 할 까하다가 작업이 많아 보여서 먼저 SystemChrome 의 메서드를 찾아보다가 해답을 찾았다. 

 

위의 첫번째 코드들 대신에 그냥, SystemUiMode 를 immersiveSticky 로 해주면 되었다. 

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

처음에 설정했던  SystemUiMode.manual 이나  SystemUiMode.immersive  는 앱 시작할 때는 system UI 가 숨겨져 있지만 system UI 를 생성시키는 제스쳐를 하게 되면 그 뒤로는 쭈~~욱 system UI 표시 되는데,  SystemUiMode.immersiveSticky 는 잠시 표시되었다가 다시 사라진다. 물론 표시되는 사이에 overflow 도 발생하지 않고. 

 

 

반응형