[Flutter] 페이지 스크롤 적용

Flutter에서는 여러가지 스크롤 기능이 있는데 스크롤의 종류와 어떤 상황에 사용하는지 정리해보자!

.

SingleChildScrollView

가장 기본적인 스크롤 방식으로 위젯이 화면 밖으로 오버플로 했을 때 화면을 스크롤 할 수 있게 만들어준다.

세로방향

SingleChildScrollView(
  child: Column(
    children: [
      // 여러 수직으로 배치된 자식 위젯들...
    ],
  ),
)   

가로로방향

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      // 가로로 배치된 여러 자식 위젯들...
    ],
  ),
)

SingleChildScrollView를 적용하지 않았을 때

• 화면 밖으로 위젯이 넘어갔을 경우 하단에 Overflow 경고가 발생한다.
  

SingleChildScrollView를 적용했을 때

• 화면 밖으로 위젯이 넘어간 경우 스크롤을 통해 화면을 넘길 수 있다.
  

그 외 스크롤 기능

1. ListView

• 세로로 스크롤 가능한 목록을 표시할 때 사용
• 아이템이 많은 목록을 다루거나, 동적으로 아이템이 추가/제거되는 상황에서 효과적

ListView(
  children: [
    ...
  ],
)

2. GridView

• 그리드 형태로 아이템을 나열하고자 할 때 사용
• 각각의 아이템을 그리드 셀에 배치할 수 있습니다. crossAxisCount를 설정하여 열의 수를 지정할 수 있

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // Number of columns
  ),
  children: [
    ...
  ],
)

3. CustomScrollView

• 다양한 Sliver 위젯들을 조합하여 유연한 스크롤 인터페이스를 만들 때 사용
• 다양한 커스텀 스크롤 효과를 적용하고 싶을 때 사용

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildListDelegate(
        [
          // Your scrollable content here
        ],
      ),
    ),
  ],
)

4. PageView

• 여러 페이지로 이루어진 스크롤 뷰를 만들 때 사용
• 페이지 간에 전환할 수 있도록 하며, 주로 이미지 갤러리나 튜토리얼 슬라이드 등에서 사용

PageView(
  children: [
    // Your pages here
  ],
)

Flutter에서는 다양한 스크롤 기능을 제공하기 때문에 상황에 맞게 본인이 원하는 위젯을 선택하여 적용하면 될것 같다.