<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter">flutter</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/wakelock/">[Flutter] 화면이 꺼지지 않게 하기</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#wakelock-설치">wakelock 설치</a></li><li><a href="#enable과-disable-함수">enable과 disable 함수</a></li><li><a href="#toggle-함수">toggle 함수</a></li><li><a href="#enabled">enabled</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>Flutter로 개발한 앱에서 화면이 꺼지지 않도록 하거나 사용자가 앱 내에서 특정 기능을 사용할 때에 화면이 꺼지지 않는 기능을 구현해야 할 때가 있습니다.저는 앱에서 TTS 기능을 사용하여 반복적으로 음성을 재생시키는 기능을 가진 앱을 개발하였는데, 화면이 꺼지면 TTS의 반복 재생이 중단되는 문제가 발생하였습니다. 그래서 TTS를 사용하여 반복적으로 음성을 재생하는 기능을 실행할 때에는 화면이 꺼지지 않도록 구현할 필요가 있었습니다.이 때, 사용한 패키지가 <code>wakelock</code>입니다.<ul><li>wakelock: <a href="https://pub.dev/packages/wakelock" rel="nofollow noreferrer" target="_blank">https://pub.dev/packages/wakelock</a></li></ul>이번 블로그 포스트에서는 <code>wakelock</code>을 사용하여 Flutter로 개발한 앱이 실행되었을 때, 화면이 꺼지지 않도록 만드는 방법에 대해서 알아보도록 하겠습니다.<h2 id="wakelock-설치">wakelock 설치</h2>Flutter로 개발한 앱이 실행중일 때, 화면이 꺼지지 않도록 만들기 위해서는 <code>wakelock</code> 패키지를 설치할 필요가 있습니다. 다음 명령어를 실행하여 <code>wakelock</code> 패키지를 설치합니다.<h2 id="enable과-disable-함수">enable과 disable 함수</h2><code>wakelock</code>은 <code>enable</code>과 <code>disable</code> 함수를 제공합니다. <code>wakelock</code>의 <code>enable</code> 함수를 사용하면 자동으로 화면이 꺼지지 않도록 만들 수 있습니다. 이를 확인하기 위해서 <code>main.dart</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>...
void main() {
 WidgetsFlutterBinding.ensureInitialized();
 Wakelock.enable();

 runApp(..);
}

class _MyAppState extends State&lt;MyApp&gt; {
 ...
 @override
 void dispose() {
 Wakelock.disable();
 super.dispose();
 }
 ...
}
...
</code></pre></div><code>wakelock</code> 클래스는 <code>enable</code> 함수와 <code>disable</code> 함수를 가지고 있습니다. <code>wakelock</code> 클래스의 <code>enable</code> 함수를 실행하면 자동으로 화면이 꺼지지 않게 되며, <code>disable</code> 함수를 실행하면 자동으로 화면이 꺼지게 됩니다.<code>wakelock</code> 클래스의 함수들은 <code>WidgetsFlutterBinding.ensureInitialized()</code>을 통해 <code>WidgetsBinding</code>이 초기화된 것을 확인한 후, 실행해야 합니다.<h2 id="toggle-함수">toggle 함수</h2><code>wakelock</code>의 <code>toggle</code> 함수를 사용하면 <code>enable</code>과 <code>disable</code> 함수의 역할을 동시에 수행할 수 있습니다. 이를 확인하기 위해서 <code>main.dart</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>...
void main() {
 WidgetsFlutterBinding.ensureInitialized();
 Wakelock.toggle(enable: true);

 runApp(..);
}

class _MyAppState extends State&lt;MyApp&gt; {
 ...
 @override
 void dispose() {
 Wakelock.toggle(enable: false);
 super.dispose();
 }
 ...
}
...
</code></pre></div><h2 id="enabled">enabled</h2><code>wakelock</code>이 제공하는 <code>enabled</code> 변수를 사용하면, 현재 화면이 자동으로 꺼지지 않도록 설정되었는지 여부를 확인할 수 있습니다.<div><pre><code>...
bool wakelockEnabled = await Wakelock.enabled;
...
</code></pre></div><h2 id="완료">완료</h2>이것으로 <code>wakelock</code> 패키지를 사용하여 Flutter의 앱이 실행되는 중에 화면이 꺼지지 않도록 하는 방법에 대해서 알아보았습니다. 여러분도 <code>wakelock</code> 패키지를 사용하여 화면이 꺼지지 않도록 만들어 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Flutter로 만든 앱을 실행하고 있을 때 또는 앱 내에서 특정 기능을 수행할 때 휴대폰의 화면이 꺼지지 않게 하기 위해 wakelock 패키지를 사용하는 방법에 대해서 알아봅시다.