캐러셀 리스트뷰 만들기

2018. 12. 21. 01:07·개발/Flutter

Flutter에서는 간단하게 캐러셀 형식의 리스트뷰를 사용할 수 있습니다. 리스트 뷰 위젯에 physics를 PageScrollPhysics()로 설정해주면 됩니다.

...
    return new ListView.builder(
        padding: EdgeInsets.all(0.0),
        physics: const PageScrollPhysics(),
        controller: scrollController,
        scrollDirection: Axis.vertical,
        itemCount: length + 1,

        itemBuilder: (BuildContext context, int index) {
          if (index == length) {
            //  마지막
            return new SnapStatusLoadingItem(
              title: board.title,
              queryInterface: boardManager,
            );
          } else {
            return new SnapItem(postList[index],
                memo: boardManager.memoMap != null
                    ? boardManager.memoMap[postList[index].userId]
                    : null);
          }
        });
...

주의할 점은 각 item widget의 높이 또는 너비 값을 화면 크기에 맞게 설정해 줘야 합니다.

실제로 동작은 아이템 높이 또는 너비 만큼만 스크롤이 되기 때문에 아이템의 크기가 너무 크거나 작으면 정확하게 동작하지 않게 됩니다.

저작자표시 비영리 변경금지 (새창열림)

'개발 > Flutter' 카테고리의 다른 글

async 함수 순차로 실행하기  (0) 2023.02.07
xcode 13.4.1에서 iOS 빌드시 버그 해결하기  (0) 2022.09.07
xcode 14 베타 사용시 Invalid Bundle로 배포 안되는 버그 수정  (0) 2022.09.05
배경이 투명한 페이지 만들기  (0) 2018.12.06
링크 모음  (0) 2018.11.25
키보드 show/hide 감지하기  (0) 2018.11.25
'개발/Flutter' 카테고리의 다른 글
  • xcode 13.4.1에서 iOS 빌드시 버그 해결하기
  • xcode 14 베타 사용시 Invalid Bundle로 배포 안되는 버그 수정
  • 배경이 투명한 페이지 만들기
  • 링크 모음
까망고양이
까망고양이
월 300k를 달리지만 빨리는 못달리는 아저씨의 블로그
  • 까망고양이
    본격 러닝 블로그
    까망고양이
    • 분류 전체보기 (422)
      • 러닝 (259)
        • 대회 (6)
        • 기록 (244)
        • 기어 (6)
      • 일상 (61)
        • 일기 (26)
      • 고양이 (37)
        • 퓨리 (35)
      • 리뷰 (31)
        • 집 (5)
      • 취미 (12)
        • 디비전2 (0)
      • 정보 (10)
      • 개발 (12)
        • Flutter (11)
  • 전체
    오늘
    어제
  • 블로그 메뉴

    • 소개
    • 러닝
    • EDC
    • 방명록
  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
까망고양이
캐러셀 리스트뷰 만들기
상단으로

티스토리툴바