<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/widget/hide_back_button/">[Flutter] AppBar의 뒤로가기 버튼 없애기</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><h2 id="개요">개요</h2>Flutter에서 화면을 전환하면, 아무런 설정을 하지 않아도 다음과 같이 두번째 화면의 <code>AppBar</code>에 뒤로가기 버튼이 자동으로 생기는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/hide_back_button/back_button.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/hide_back_button/back_button.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/hide_back_button/back_button.png" alt="Flutter automaticallyImplyLeading - back button"></picture>이번 블로그 포스트에서는 자동으로 생성된 <code>AppBar</code>의 뒤로가기 버튼을 숨기는 방법에 대해서 알아보도록 하겠습니다.여기서 소개하는 소스코드는 <code>GitHub</code>에서 확인하실 수 있습니다.<ul><li>GitHub: <a href="https://github.com/dev-yakuza/study-flutter/tree/main/widget/hide_back_button" rel="nofollow noreferrer" target="_blank">https://github.com/dev-yakuza/study-flutter/tree/main/widget/hide_back_button</a></li></ul><h2 id="뒤로가기-버튼-없애기">뒤로가기 버튼 없애기</h2><code>AppBar</code> 위젯에서는 다음과 같이 <code>leading</code>가 설정이 되어 있지 않아도 뒤로가기 버튼이 표시됩니다.<div><pre><code>class SecondScreen extends StatelessWidget {
 const SecondScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('Second Screen'),
 ),
 body: Center(
 child: ElevatedButton(
 onPressed: () =&gt; Navigator.pop(context),
 child: const Text('Go Back'),
 ),
 ),
 );
 }
}
</code></pre></div><picture><source srcset="/assets/images/category/flutter/2023/hide_back_button/back_button.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/hide_back_button/back_button.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/hide_back_button/back_button.png" alt="Flutter automaticallyImplyLeading - back button"></picture>이렇게 표시된 뒤로가기 버튼을 없애기 위해서는 <code>AppBar</code> 위젯의 <code>automaticallyImplyLeading</code>을 사용할 필요가 있습니다.<ul><li>automaticallyImplyLeading: <a href="https://api.flutter.dev/flutter/material/AppBar/automaticallyImplyLeading.html" rel="nofollow noreferrer" target="_blank">https://api.flutter.dev/flutter/material/AppBar/automaticallyImplyLeading.html</a></li></ul>뒤로가기 버튼을 없애고자 하는 화면에서 다음과 같이 <code>AppBar</code> 위젯의 <code>automaticallyImplyLeading</code>을 설정합니다.<div><pre><code>class SecondScreen extends StatelessWidget {
 const SecondScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 automaticallyImplyLeading: false,
 title: const Text('Second Screen'),
 ),
 body: Center(
 child: ElevatedButton(
 onPressed: () =&gt; Navigator.pop(context),
 child: const Text('Go Back'),
 ),
 ),
 );
 }
}
</code></pre></div>그럼 다음과 같이 뒤로가기 버튼이 없어지는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/hide_back_button/hide_back_button.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/hide_back_button/hide_back_button.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/hide_back_button/hide_back_button.png" alt="Flutter automaticallyImplyLeading - hide back button"></picture><h2 id="완료">완료</h2>이번 블로그에서는 <code>AppBar</code> 위젯에서 자동으로 표시되는 뒤로가기 버튼을 없애는 방법에 대해서 알아보았습니다. 자동으로 뒤로가기 버튼을 만들어주므로 편하지만, 불필요한 경우도 있으니 <code>automaticallyImplyLeading</code> 옵션을 잘 기억해 둡시다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Flutter의 AppBar에서 자동으로 생성하는 뒤로가기 버튼을 없애는 방법에 대해서 알아보겠습니다.