[Flutter] Clone - 당근마켓40(Item detail & PageView) - 2

지난번에 구현한 SmoothPageIndicator 를 다른 위치에 넣아서 유사한 효과를 내는 방법에 대해서 알아보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

 

이전 버전 화면은 아래와 같습니다. (붉은색)인디케이터의 이동 경로에 집중해주세요.

화면을 스크롤 다운할때 인디케이터가 사라진다.

 

 

 

 

 

이전 버전 화면은 아래와 같습니다. (검은색)인디케이터의 이동 경로에 집중해주세요.

화면을 스크롤 다운할때 인디케이터가 사라지지 않고 이미지와 같이 올라가다가 타이틀 위치로 올라간다.

 

 

 

 

 

./src/screens/home/item_detail_page.dart(붉은색 인디케이터 코드)

 

  SliverAppBar _imageAppBar(ItemModel2 itemModel) {
    return SliverAppBar(
      // expandedHeight 에서는 세로 길이를 정해줄 수 있음,
      expandedHeight: _size!.width,
      // pinned: true 면 앱바 역역을 남기는 역할, false 면 스크롤시 같이 사라짐,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        // background 로 이미지를 넣으면 됨, 이미지 표시
        background: Stack(
          children: [
            // 좌/우로 스크롤 가능하게 처리,
            PageView.builder(
              controller: _pageController,
              // 옆페이지로 이동시 포커스를 옆페이지로 이동시켜 로딩을 미리하게 설정함,
              allowImplicitScrolling: true,
              itemBuilder: (BuildContext context, int index) {
                return ExtendedImage.network(
                  itemModel.imageDownloadUrls[index],
                  fit: BoxFit.cover,
                  // 캐싱을 했지만 다시 로딩하는 경우가 있어서 이미지 사이즈를 줄여줌,
                  scale: 0.1,
                );
              },
              itemCount: itemModel.imageDownloadUrls.length,
            ),
            Positioned(
              bottom: padding_16,
              // 중간으로 위치시키기 위해서 좌/우 0 으로 설정,
              left: 0,
              right: 0,
              child: Center(
                child: SmoothPageIndicator(
                    controller: _pageController, // PageController
                    count: itemModel.imageDownloadUrls.length,
                    effect: WormEffect(
                        activeDotColor: Theme.of(context).primaryColor,
                        dotColor: Theme.of(context).colorScheme.background,
                        radius: 4,
                        dotHeight: 8,
                        dotWidth: 8), // your preferred effect
                    onDotClicked: (index) {}),
              ),
            ),
          ],
        ),
      ),
    );
  }

 

 

 

./src/screens/home/item_detail_page.dart(검은색 인디케이터 코드)

 

SliverAppBar _imageAppBar(ItemModel2 itemModel) {
  return SliverAppBar(
    // expandedHeight 에서는 세로 길이를 정해줄 수 있음,
    expandedHeight: _size!.width,
    // pinned: true 면 앱바 역역을 남기는 역할, false 면 스크롤시 같이 사라짐,
    pinned: true,
    flexibleSpace: FlexibleSpaceBar(
      centerTitle: true,
      // 타이틀 부분에 인디케이터 표시하고 아래에 위치함, 패키지 추가 필요함,
      title: SizedBox(
        child: SmoothPageIndicator(
            controller: _pageController,
            // PageController
            count: itemModel.imageDownloadUrls.length,
            effect: const WormEffect(
              activeDotColor: Colors.black,
              dotColor: Colors.black45,
              radius: 3,
              dotHeight: 6,
              dotWidth: 6,
            ),
            // your preferred effect
            onDotClicked: (index) {}),
      ),

      // background 로 이미지를 넣으면 됨, 이미지 표시
      background: Stack(
        children: [
          // 좌/우로 스크롤 가능하게 처리,
          PageView.builder(
            controller: _pageController,
            // 옆페이지로 이동시 포커스를 옆페이지로 이동시켜 로딩을 미리하게 설정함,
            allowImplicitScrolling: true,
            itemBuilder: (BuildContext context, int index) {
              return ExtendedImage.network(
                itemModel.imageDownloadUrls[index],
                fit: BoxFit.cover,
                // 캐싱을 했지만 다시 로딩하는 경우가 있어서 이미지 사이즈를 줄여줌,
                scale: 0.1,
              );
            },
            itemCount: itemModel.imageDownloadUrls.length,
          ),
        ],
      ),
    ),
  );
}