CustomScrollView: 강력한 스크롤 효과 구현

Flutter에서 스크롤 기능은 앱의 중요한 요소 중 하나입니다. 기본적인 스크롤 뷰 위젯들도 많지만, 때로는 더욱 독특하고 복합적인 스크롤 효과가 필요할 수 있습니다. 이런 경우에 사용하는 강력한 도구가 바로 CustomScrollView입니다.

 

CustomScrollView란?

CustomScrollView는 다양한 슬리버 (slivers) 위젯들을 결합하여 원하는 스크롤 효과를 구현할 수 있는 위젯입니다. 슬리버 위젯은 스크롤 가능한 영역을 나타내는 기본 단위이며, CustomScrollView는 이러한 슬리버들을 직접적으로 받아서 스크롤 뷰를 구성합니다.

CustomScrollView 사용 이유

• 다양한 스크롤 효과 구현: 리스트, 그리드, 캘린더 등 다양한 형태의 스크롤 뷰를 구현할 수 있습니다.
• 커스텀 스크롤 뷰 제작: 헤더, 푸터, 구분선 등을 추가하여 복합적인 스크롤 뷰를 만들 수 있습니다.
• 스크롤 동작 제어: 스크롤 방향, 속도, 바운스 효과 등을細かく 조정할 수 있습니다.
• 성능 향상: 필요한 부분만 렌더링하여 성능을 최적화할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('Grid Item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
  ],
)

 

 

추가 참고자료

https://dalgoodori.tistory.com/62

[Flutter] CustomScrollView

SliverAppBar) https://dalgoodori.tistory.com/63

[Flutter] SliverAppBar