[flutter] 플러터 스택드 위젯에서 이미지 슬라이드쇼 만들기
이미지 슬라이드쇼는 사용자가 여러 이미지를 자동으로 또는 수동으로 전환하면서 보여주는 기능을 제공합니다. 이 기능을 플러터의 스택드(Stacked) 위젯을 사용하여 구현해보겠습니다.
스택드 위젯이란?
스택드(Stacked) 위젯은 여러 위젯을 겹쳐서 표시할 수 있도록 하는 위젯입니다. 가장 나중에 추가된 위젯이 다른 위젯 위에 겹쳐져 나타나게 됩니다.
이미지 슬라이드쇼 구현
이미지 슬라이드쇼를 구현하기 위해서는 다음 단계를 따릅니다.
- ListView.builder를 사용하여 이미지 목록 만들기: ListView.builder를 사용하여 이미지 목록을 만들어주고, PageView.builder에 이미지 목록이 표시되도록 합니다.
예시:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Image.network(images[index]),
);
},
)
- PageView.builder를 사용하여 슬라이드쇼 만들기: PageView.builder를 사용하여 이미지 목록이 슬라이드 형태로 표현되도록 합니다.
예시:
PageView.builder(
controller: PageController(viewportFraction: 0.8),
itemCount: images.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Image.network(images[index]),
);
},
)
- 자동으로 전환되는 슬라이드쇼 만들기: Timer.periodic을 사용하여 일정 시간마다 자동으로 이미지가 전환되도록 설정합니다.
예시:
Timer.periodic(Duration(seconds: 3), (Timer timer) {
if (_pageController.page.round() == images.length - 1) {
_pageController.animateToPage(0, duration: Duration(milliseconds: 300), curve: Curves.easeOut);
} else {
_pageController.nextPage(duration: Duration(milliseconds: 800), curve: Curves.easeOut);
}
});
이러한 방법으로 플러터의 스택드(Stacked) 위젯을 사용하여 이미지 슬라이드쇼를 만들 수 있습니다. 사용자에게 다양한 이미지를 보여주고, 앱의 사용자 경험을 높일 수 있는 좋은 기능입니다.