개요
Flutter로 개발한 앱에서 화면이 꺼지지 않도록 하거나 사용자가 앱 내에서 특정 기능을 사용할 때에 화면이 꺼지지 않는 기능을 구현해야 할 때가 있습니다.
저는 앱에서 TTS 기능을 사용하여 반복적으로 음성을 재생시키는 기능을 가진 앱을 개발하였는데, 화면이 꺼지면 TTS의 반복 재생이 중단되는 문제가 발생하였습니다. 그래서 TTS를 사용하여 반복적으로 음성을 재생하는 기능을 실행할 때에는 화면이 꺼지지 않도록 구현할 필요가 있었습니다.
이 때, 사용한 패키지가 wakelock입니다.
- wakelock: https://pub.dev/packages/wakelock
이번 블로그 포스트에서는 wakelock을 사용하여 Flutter로 개발한 앱이 실행되었을 때, 화면이 꺼지지 않도록 만드는 방법에 대해서 알아보도록 하겠습니다.
wakelock 설치
Flutter로 개발한 앱이 실행중일 때, 화면이 꺼지지 않도록 만들기 위해서는 wakelock 패키지를 설치할 필요가 있습니다. 다음 명령어를 실행하여 wakelock 패키지를 설치합니다.
flutter pub add wakelock
enable과 disable 함수
wakelock은 enable과 disable 함수를 제공합니다. wakelock의 enable 함수를 사용하면 자동으로 화면이 꺼지지 않도록 만들 수 있습니다. 이를 확인하기 위해서 main.dart 파일을 열고 다음과 같이 수정합니다.
...
void main() {
WidgetsFlutterBinding.ensureInitialized();
Wakelock.enable();
runApp(..);
}
class _MyAppState extends State<MyApp> {
...
@override
void dispose() {
Wakelock.disable();
super.dispose();
}
...
}
...
wakelock 클래스는 enable 함수와 disable 함수를 가지고 있습니다. wakelock 클래스의 enable 함수를 실행하면 자동으로 화면이 꺼지지 않게 되며, disable 함수를 실행하면 자동으로 화면이 꺼지게 됩니다.
wakelock 클래스의 함수들은 WidgetsFlutterBinding.ensureInitialized()을 통해 WidgetsBinding이 초기화된 것을 확인한 후, 실행해야 합니다.
toggle 함수
wakelock의 toggle 함수를 사용하면 enable과 disable 함수의 역할을 동시에 수행할 수 있습니다. 이를 확인하기 위해서 main.dart 파일을 열고 다음과 같이 수정합니다.
...
void main() {
WidgetsFlutterBinding.ensureInitialized();
Wakelock.toggle(enable: true);
runApp(..);
}
class _MyAppState extends State<MyApp> {
...
@override
void dispose() {
Wakelock.toggle(enable: false);
super.dispose();
}
...
}
...
enabled
wakelock이 제공하는 enabled 변수를 사용하면, 현재 화면이 자동으로 꺼지지 않도록 설정되었는지 여부를 확인할 수 있습니다.
...
bool wakelockEnabled = await Wakelock.enabled;
...
완료
이것으로 wakelock 패키지를 사용하여 Flutter의 앱이 실행되는 중에 화면이 꺼지지 않도록 하는 방법에 대해서 알아보았습니다. 여러분도 wakelock 패키지를 사용하여 화면이 꺼지지 않도록 만들어 보시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)