[Flutter] 자식 위젯의 크기와 상관없이 스크롤하기

2023-10-16 hit count image

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

개요

Flutter에서 리스트가 있는 앱을 개발할 때, 우리는 종종 SingleChildScrollView 위젯을 사용합니다. 이때, 당겨서 새로고침(Pull to refresh)과 같이 특정 기능을 사용하기 위해, 자식 위젯의 크기와 상관없이 항상 스크롤을 할 수 있게 만들 필요가 있습니다.

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

AlwaysScrollableScrollPhysics

SingleChildScrollView 위젯은 physics 옵션을 가지고 있습니다.

이 옵션을 사용하면 자식 위젯의 크기와 상관없이 스크롤의 동작을 조절할 수 있습니다. 이 옵션에 다음과 같이 AlwaysScrollableScrollPhysics를 사용하면 자식 위젯의 크기와 상관없이 항상 스크롤이 가능하도록 만들 수 있습니다.

SingleChildScrollView(
  physics: const AlwaysScrollableScrollPhysics(),
  child: ...,
),

SingleChildScrollView 위젯 이외에도 ListView 위젯과 같이 스크롤이 가능한 위젯에는 대부분 physics 옵션을 가지고 있습니다.

따라서 스크롤의 동작을 변경할 필요가 있는 경우 physics 옵션을 살펴보면 도움이 됩니다.

완료

이것으로 SingleChildScrollView 위젯에서 자식 위젯의 크기와 상관없이 항상 스크롤이 가능하도록 만들기 위해 physics 옵션에 AlwaysScrollableScrollPhysics을 설정하는 방법에 대해서 알아보았습니다. 이 옵션을 사용하여 당겨서 새로고침 기능을 구현할 수 있습니다. 당겨서 새로고침의 구현에 관해 궁금하신 분들은 이전 블로그 포스트를 참고하시기 바랍니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts