[flutter] 플러터(Flutter)에서 스크롤(Scroll) 기능 구현하기

안녕하세요! 이번에는 플러터(Flutter)에서 스크롤(Scroll) 기능을 구현하는 방법에 대해 알아보겠습니다.

스크롤 기능은 사용자가 화면에 보여지는 컨텐츠보다 많은 내용을 스크롤하여 볼 수 있는 기능입니다. 이는 많은 양의 데이터를 효과적으로 표시하거나, 화면이 작은 경우에 유용하게 사용됩니다.

리스트뷰(ListView)를 이용한 스크롤 구현

플러터에서 스크롤을 구현하는 가장 일반적인 방법은 ListView 위젯을 사용하는 것입니다. ListView 위젯은 스크롤 가능한 리스트를 생성하고, 자식 위젯들을 리스트 내에 배치할 수 있도록 해줍니다.

ListView(
  children: <Widget>[
    // 자식 위젯들을 리스트에 추가
    ...
  ],
)

위 코드에서 children 속성에는 스크롤 될 자식 위젯들을 추가하면 됩니다. 이때, 자식 위젯들은 원하는 만큼 추가할 수 있습니다.

GridView를 이용한 스크롤 구현

GridView 위젯을 이용하면 그리드 형태의 스크롤 뷰를 구현할 수 있습니다. GridView는 행과 열로 구성된 격자 형태로 자식 위젯들을 배치할 수 있습니다.

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 한 행에 보여줄 아이템 개수
  ),
  children: <Widget>[
    // 자식 위젯들을 격자에 추가
    ...
  ],
)

위 코드에서 gridDelegate 속성에는 SliverGridDelegateWithFixedCrossAxisCount를 설정해주어야 합니다. crossAxisCount 속성을 지정하여 한 행에 보여줄 아이템의 개수를 설정할 수 있습니다.

CustomScrollView를 이용한 스크롤 구현

CustomScrollViewSliver 위젯들을 커스텀한 방식으로 스크롤할 수 있도록 해줍니다. CustomScrollView를 이용하면 SliverAppBar, SliverList, SliverGrid, SliverPersistentHeader 등 다양한 슬리버 위젯들을 조합하여 원하는 형태의 스크롤을 구현할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Scroll Example'),
      floating: true,
      // 스크롤이 화면 위로 올라갈 때 앱 바를 숨길지 여부
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 100, // 리스트 아이템 개수
      ),
    ),
  ],
)

위 코드에서 slivers 속성에는 여러 개의 슬리버 위젯들을 배열로 넣어주면 됩니다. SliverListSliverChildBuilderDelegate를 통해 동적으로 리스트 아이템을 생성할 수 있습니다.

마무리

이번 포스트에서는 플러터(Flutter)에서 스크롤(Scroll) 기능을 구현하는 세 가지 방법에 대해 알아보았습니다. ListView, GridView, CustomScrollView를 이용하여 다양한 스크롤 형태를 구현할 수 있으니 필요에 따라 적절한 방법을 선택하여 사용하시면 됩니다. 감사합니다!

참고 자료