[flutter] 리스트 스크롤 적용하기

dev-nam 2022. 4. 10. 15:22

플러터 리스트 스크롤이 보이도록 적용하는 방법

리액트 네이티브에선 기본적으로 리스트 스크롤이 보이도록 적용되어 있었는데, 플러터는 ListView 위젯을 사용하더라도 스크롤이 보이지 않아서 추가적인 작업이 필요합니다.

 

리스트 스크롤 표시는 Scrollbar() 위젯만 추가하면 간단하게 해결되며, 스크롤의 색상과 크기는 속성값으로 변경할 수 있습니다.

 

- thickness : 스크롤 너비 (기본값 4.0)

- radius : 스크롤 라운딩 (기본값 8.0)

- isAlwaysShown : 항상 보이게 할 것인지

 

샘플 코드

class PostList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      thickness: 4.0, // 스크롤 너비
      radius: Radius.circular(8.0), // 스크롤 라운딩
      isAlwaysShown: true, // 항상 보이기 여부
      child: ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: posts.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            ...,
          );
        },
        scrollDirection: Axis.vertical, 
      )
    );
  }
}

 

스크롤 관련해서 궁금한게 있으시면 댓글 남겨주세요!

저의 코드를 살펴봐주셔서 감사합니다~😊

 

반응형