<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/AlwaysScrollableScrollPhysics/"><span itemprop="name">[Flutter] 자식 위젯의 크기와 상관없이 스크롤하기</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="#개요">개요</a></li><li><a href="#alwaysscrollablescrollphysics">AlwaysScrollableScrollPhysics</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2><p>Flutter에서 리스트가 있는 앱을 개발할 때, 우리는 종종 <code>SingleChildScrollView</code> 위젯을 사용합니다. 이때, <code>당겨서 새로고침(Pull to refresh)</code>과 같이 특정 기능을 사용하기 위해, 자식 위젯의 크기와 상관없이 항상 스크롤을 할 수 있게 만들 필요가 있습니다.</p><ul><li><a href="https://deku.posstree.com/ko/flutter/widget/RefreshIndicator/" target="_blank">[Flutter] 당겨서 새로고침</a></li></ul><p>이번 블로그 포스트에서는 <code>SingleChildScrollView</code> 위젯에서 자식 위젯의 크기와 상관없이 스크롤이 가능하도록 만드는 방법에 대해서 알아보도록 하겠습니다.</p><p><code>SingleChildScrollView</code> 위젯은 <code>physics</code> 옵션을 가지고 있습니다.</p><ul><li>SingleChildScrollView: <a href="https://api.flutter.dev/flutter/widgets/SingleChildScrollView/physics.html" rel="noopener" target="_blank">https://api.flutter.dev/flutter/widgets/SingleChildScrollView/physics.html</a></li></ul><p>이 옵션을 사용하면 자식 위젯의 크기와 상관없이 스크롤의 동작을 조절할 수 있습니다. 이 옵션에 다음과 같이 <code>AlwaysScrollableScrollPhysics</code>를 사용하면 자식 위젯의 크기와 상관없이 항상 스크롤이 가능하도록 만들 수 있습니다.</p><div><pre><code><span>SingleChildScrollView</span><span>(</span>
  <span>physics:</span> <span>const</span> <span>AlwaysScrollableScrollPhysics</span><span>(),</span>
  <span>child:</span> <span>...,</span>
<span>),</span>
</code></pre></div><p><code>SingleChildScrollView</code> 위젯 이외에도 <code>ListView</code> 위젯과 같이 스크롤이 가능한 위젯에는 대부분 <code>physics</code> 옵션을 가지고 있습니다.</p><ul><li>ScrollView: <a href="https://api.flutter.dev/flutter/widgets/ScrollView/physics.html" rel="noopener" target="_blank">https://api.flutter.dev/flutter/widgets/ScrollView/physics.html</a></li></ul><p>따라서 스크롤의 동작을 변경할 필요가 있는 경우 <code>physics</code> 옵션을 살펴보면 도움이 됩니다.</p><h2 id="완료">완료</h2><p>이것으로 <code>SingleChildScrollView</code> 위젯에서 자식 위젯의 크기와 상관없이 항상 스크롤이 가능하도록 만들기 위해 <code>physics</code> 옵션에 <code>AlwaysScrollableScrollPhysics</code>을 설정하는 방법에 대해서 알아보았습니다. 이 옵션을 사용하여 <code>당겨서 새로고침</code> 기능을 구현할 수 있습니다. <code>당겨서 새로고침</code>의 구현에 관해 궁금하신 분들은 이전 블로그 포스트를 참고하시기 바랍니다.</p><ul><li><a href="https://deku.posstree.com/ko/flutter/widget/RefreshIndicator/" target="_blank">[Flutter] 당겨서 새로고침(Pull to refresh)</a></li></ul><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

SingleChildScrollView 위젯에서 자식 위젯의 크기와 상관없이 언제나 스크롤이 가능하도록 만드는 방법에 대해서 알아보도록 하겠습니다.