<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/"><span itemprop="name">Home</span></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"><span itemprop="name">flutter</span></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/widgets/back_button/"><span itemprop="name">[Flutter] BackButton 위젯 사용법</span></a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#appbar%EC%9D%98-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0-%EB%B2%84%ED%8A%BC">AppBar의 뒤로가기 버튼</a></li><li><a href="#backbutton-%EC%9C%84%EC%A0%AF">BackButton 위젯</a></li><li><a href="#appbar%EC%9D%98-automaticallyimplyleading">AppBar의 automaticallyImplyLeading</a></li><li><a href="#backbutton%EC%9D%98-%ED%99%9C%EC%9A%A9">BackButton의 활용</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2><p>Flutter에서 기본적으로 제공하는 <code>BackButton</code> 위젯을 사용하여 이전 화면으로 이동하는 방법에 대해서 알아보겠습니다.</p><h2 id="appbar의-뒤로가기-버튼">AppBar의 뒤로가기 버튼</h2><p>지금까지 앱을 개발하면서 <code>AppBar</code>의 뒤로가기 버튼을 다음과 같이 구현하여 사용해 왔습니다.</p><div><pre><code><span>AppBar</span><span>(</span>
  <span>leading:</span> <span>IconButton</span><span>(</span>
    <span>icon:</span> <span>const</span> <span>Icon</span><span>(</span><span>Icons</span><span>.</span><span>arrow_back_ios_new</span><span>),</span>
    <span>splashRadius:</span> <span>20.0</span><span>,</span>
    <span>onPressed:</span> <span>()</span> <span>=</span><span>&gt;</span> <span>Get</span><span>.</span><span>back</span><span>(),</span>
  <span>),</span>
  <span>...</span>
<span>),</span>
</code></pre></div><p>저는 <code>GetX</code>를 사용하여 앱을 개발하기 때문에 <code>Get.back()</code>을 사용하여 화면 뒤로가기를 구현했습니다.</p><h2 id="backbutton-위젯">BackButton 위젯</h2><p>하지만 Flutter에서는 기본적으로 제공하는 <code>BackButton</code> 위젯을 사용하여 뒤로가기 버튼을 더 간단히 구현할 수 있습니다.</p><div><pre><code><span>AppBar</span><span>(</span>
  <span>leading:</span> <span>const</span> <span>BackButton</span><span>(),</span>
  <span>...</span>
<span>),</span>
</code></pre></div><ul><li>공식 문서: <a href="https://api.flutter.dev/flutter/material/BackButton-class.html" rel="nofollow noreferrer" target="_blank">https://api.flutter.dev/flutter/material/BackButton-class.html</a></li></ul><h2 id="appbar의-automaticallyimplyleading">AppBar의 automaticallyImplyLeading</h2><p><code>AppBar</code>의 <code>automaticallyImplyLeading</code> 속성을 사용하여 <code>BackButton</code>을 자동으로 표시하거나 숨길 수 있습니다. <code>AppBar</code>의 <code>automaticallyImplyLeading</code>의 기본값은 <code>true</code>이므로, 위와 같이 <code>BackButton</code>을 사용하지 않아도 <code>AppBar</code>에 뒤로가기 버튼이 표시됩니다.</p><h2 id="backbutton의-활용">BackButton의 활용</h2><p><code>AppBar</code>의 <code>automaticallyImplyLeading</code> 속성을 <code>false</code>로 설정하지 않는다면 기본적으로 <code>BackButton</code>이 표시되므로, <code>BackButton</code>을 일부러 사용할 필요는 없습니다.</p><p>다만, 이전 화면으로 돌아갈 때특정 함수를 호출할 필요가 있는 경우, 다음과 같이 <code>BackButton</code>을 사용하여 구현할 수 있습니다.</p><div><pre><code><span>AppBar</span><span>(</span>
  <span>leading:</span> <span>BackButton</span><span>(</span>
    <span>onPressed:</span> <span>()</span> <span>{</span>
      <span>callback</span><span>();</span>
      <span>Get</span><span>.</span><span>back</span><span>();</span>
    <span>},</span>
  <span>),</span>
  <span>...</span>
<span>),</span>
</code></pre></div><h2 id="완료">완료</h2><p>이것으로 <code>Flutter</code>라 기본적으로 제공하는 <code>BackButton</code> 위젯에 대해서 살펴보았습니다. 저처럼 <code>BackButton</code>의 존재를 모르고 직접 <code>IconButton</code>으로 구현하고 있었다면, <code>BackButton</code>을 사용하여 더 간단하게 구현할 수 있습니다.</p><p>또한 <code>AppBar</code>의 <code>leading</code>에 아무 기능도 하지 않는 <code>BackButton</code>을 사용하고 있다면, <code>AppBar</code>의 옵션인 <code>automaticallyImplyLeading</code>으로 뒤로가기 버튼이 자동으로 표시되는 것도 잊지 않으시기 바랍니다.</p><p><code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code></p><h2>앱 홍보</h2><div><p> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요.<br><code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.</p><p> 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</p></div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Flutter에서 기본적으로 제공하는 BackButton 위젯을 사용하여 이전 화면으로 되돌아가는 방법에 대해서 설명합니다.