[Flutter] 플러터 전체 화면 풀스크린 앱 만들기

 

플러터로 프로젝트를 하게 되었다. Dart 자체가 처음인데다가 플러터의 다양한 플러그인들에도 아직 익숙하지 않아 러닝 커브를 겪는 중에 있다. 다른 언어들과 비교해서 약간 고개를 갸우뚱하는 경우도 있었지만, 그래도 지금까지의 총평은 합격이다. 유니티가 아닌 일반 앱은 앞으로도 플러터에 의존할 것 같다는 예상이 잠깐 들었다. 머신러닝과 달리 분명 오늘의 러닝을 망각했을 미래의 나를 위해 플러터에 대해 이것 저것 남겨보기로 했다.

 

이번에 작성하던 앱은 간단한 프로토타입 앱이었는데 전체화면에서 작동하는 것이 필요했다. 추상화가 잘 되어 있어서 안드로이드 네이티브에 비해 비교적 쉽게 전체 화면 전환을 할 수 있었다. 앱의 상단 시스템 메뉴와 하단의 메뉴를 각각 조절할 수있는데, SystemChrome.setEnabledSystemUIOverlays()를 사용한다. 사용 방법은 다음과 같다.

 

// 하단바만 없애기
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

// 상단바(상태바)만 없애기
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

// 모두 없앤 풀스크린 상태 만들기
SystemChrome.setEnabledSystemUIOverlays([]);

 

다음은 앱 시작 시점부터 풀스크린으로 구동되는 간단한 예제 코드이다.

 

// 필요 패키지
import 'package:flutter/services.dart';

// 앱 엔트리
void main() {
  runApp(MyApp());
}

// 루트 위젯 (Stateless)
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Demo',
      home: DemoHomePage(),
    );
  }
}

// 데모 페이지의 Stateful 위젯
class DemoHomePage extends StatefulWidget {
  // Constructor
  DemoHomePage ({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _DemoHomePageState();
}

// 데모 페이지의 State
class _DemoHomePageState extends State<DemoHomePage> {
  // 스테이트 시작 시 호출
  @override
  void initState() {
    super.initState();

    // 풀스크린 만들기
    // 반드시 여기서 불러줘야 하는 것은 아니다.
    // 앱 실행 중간에 전환을 해야할 경우 그 시점에서 불러줘도 무방하다.
    SystemChrome.setEnabledSystemUIOverlays([]);
  }

  // 상태 위젯 빌드
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Image.asset('assets/demo.png', fit: BoxFit.fill));
    }
  }
}

 

주석에도 넣어 놓았지만, 반드시 initState() 시점에 풀스크린을 만들어야 하는 것은 아니다. 필요에 따라 앱 실행 중간에 풀스크린이 필요한 경우 해당 위치에서 호출을 하는 것도 가능하다.

 

 

* Update (21.09.28)

 

글을 작성하고 얼마 지나지 않아 SystemChrome.setEnabledSystemUIOverlays()가 deprecated 되었다는 것을 알게 되었다. 추천되는 해결 방법은 setEnabledSystemUIMode()를 대신 사용하는 것이다. 다음은 사용 방법이다.

 

import 'package:flutter/services.dart';

...

// 화면 로테이션이 없는 풀스크린 앱
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

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

// 상단바만 보이기 (하단 네비게이션바 없애기)
SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual,
  overlays: [
    SystemUiOverlay.top,
  ],
);

// 하단바만 보이기 (상단 상태바 없애기)
SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual,
  overlays: [
    SystemUiOverlay.bottom,
  ],
);

// 풀스크린 해제
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

 

 

Fin.