# carousel_slider

tygerhwang

Custom Slider Widget 만들기(2) 이번 글에서는 수평으로 하나의 사이즈가 큰 이미지를 백그라운드 배경으로 사용하면서 페이지 뷰 처럼 수평으로 슬라이딩 할 수 있는 위젯을 소개하려고 한다. 아래 공유한 결과물을 확인하면 이해가 될 것이다. 백프로 완성된 상태는 아니다. 애니메이션이 부자연스러운 부분이 있어, 이 부분의 개선은 필요하다. 실제로 이런 뷰가 필요하여 우선 개발을 해본 상태이고, 나중에 실제 사용될 때에 완성된 상태로 다시 글을 추가할 예정이다. Custom Slider Widget 만들기(1) Flutter 먼저 해당 슬라이더 뷰를 구현하기 위해 필요한 뷰의 갯수인 itemCount와 items를 필수로 받아와야 한다. 슬라이더를 구현하기 위한 스와이프 기능 사용에 현재 position과 index 값을 선언하여 해당

tygerhwang

Custom Slider Widget 만들기(1) Custom Slider Widget 만들기(2) carousel_slider | Flutter Package 이번 글에서는 Slider 위젯을 만들어 보려고 한다. 결과물이 궁금하신 분은 글 아랫 부분에 구현된 영상을 올려놨습니다. 기존 Flutter 기본 위젯으로 슬라이더가 가능한 스와이프 위젯을 만들 수 있다. PageView 위젯을 사용하여 만들 수도 있고 유명한 라이브러리인 carousel_slider 라이브러리를 사용해서도 이러한 UI는 쉽고 빠르게 만들어 볼 수 있다. carousel_slider 라이브러리도 생성 기반은 PageView를 기반으로 하고 있고, PageView를 사용하다 보니 한 가지 문제점이

mi-fasol

플러터로 어플리케이션을 만들던 중, 여러 이미지를 한 번에 보여주는 페이지를 만들 일이 생겼다. 잘 보일지는 모르겠지만 썸네일은 앱 화면을 일부 캡처한 사진이다. 이미지 배열이 주어지면 옆으로 슬라이드 하며 넘길 수 있는 ImageView를 제작하고, Indicator를 사용해 몇 번째 사진인지 확인할 수 있도록 작성했다. 이 라이브러리를 사용하기 위해서 우선 pubspec.yalm 파일에 아래의 의존성을 추가해준다. 의존성 추가가 완료되고 나면, 해당 라이브러리를 사용할 수 있도록 이 위젯이 들어갈 파일에 import를 해준다. 그 후에 원하는 이미지 배열을 images라는 변수명으로 선언하고, 이미지 슬라이더와 인디케이터 위젯을 아래와 같이 생성한다. 당연하지만 인디케이터의 크기 및 색상 등 디자인적인 부분은 본인의 취향껏 바꾸면 된다. image 위젯부터 간단히 설명하겠다. > - width: double.infinity -> 화면 너비에 맞도록 위젯 너비 설

nicesawo

공식문서 https://pub.dev/packages/carousel_slider > 메인 코드 > 파라미터