[Flutter]플러터 화면 고정 및 풀스크린 |안드로이드, IOS

가끔 앱을 제작 하다보면, 특정 페이지에서 화면을 세로 또는 가로 고정이 필요하다.

 

1. 사용되는 라이브러리

import 'package:flutter/services.dart';

 

2. 화면 고정 코드 (코드 내용은 주석 참고)

SystemChrome 라는 클레스에 있는 각종 함수들은 사용 하여 원하는대로

세로, 가로 고정 및 풀스크린을 위지 할 수 있다.

initState안에 사용하는 이유는 4번에서~~

@override
void initState() {
  // TODO: implement initState
  super.initState();
//화면 세로 고정
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp,DeviceOrientation.portraitDown,]);
//화면 가로 고정
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight,]);

//화면 로테이션이 가능한 풀스크린 화면
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
//화면 로테이션이 불가능한 풀스크린 화면
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

  ]); //세로 고정
}

3. 화면 고정 및 풀스크린 해체 코드 (코드 내용은 주석 참고)

@override
void dispose() {
  // TODO: implement dispose
//가로고정 또는 세로고정 해체
 SystemChrome.setPreferredOrientations([]);
//풀스크린 해체
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  super.dispose();
}

 

4. initState와 dispose를 하는 이유?

StatefulWidget을 이용하여 init과 dispose영역을 나눈이유는 

SystemChrome를 이용해 화면 가로, 세로 설정 값을 변경하게 되면 해당 앱의 존재하는 모든 페이지가

화면이 고정되거나, 풀스크린이 된다.

예를 들어 특정 페이지만 화면 고정이 필요하거나 풀스크린만 유지하고 다른 페이지는 화면 고정이 필요 없을때,

dispose를 이용하여 화면이 종료될때 원래 설정값으로 변경하는 것이다아아아~~

 

5. IOS에서는?

IOS는 항상 풀스크린으로 앱이 실행되기 때문에, 풀스크린 위젯을 안쓰는 것을 추천한다.

가끔 세로 고정이 안될때가 있는데 XCode에서 설정하면 된다.

General -> Deployment Info 에 Device Orientation

Xcode에서 모드 설정