<Flutter> Dot indicator 사용

Indicator로 무엇을 사용할까 고민을 하다 dots_indicator을 보게 되었는데 너무 맘에 들었다.

 

dots_indicator는 http://pub.dev에 dots_indicator를 검색하면 된다. .yaml 파일의 dependency에 dots_indicator: ^2.0.0를 추가하면 바로 사용 가능하다. (현재 2.0.0이 최신이지만 나중에 업데이트가 되면 바꾸면 된다)

 

먼저 아래에서 나오는 pageLength는 표시할 도트의 합계이고 currentIndexPage는 Highlight된 점들이다.

 

가장 기본적인 형식이지만 심플하다. 이를 사용하기 위한 코드는 다음과 같다.

 

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage
)

 

 

만약 색을 변경하고 싶다하면 다음과 같이 사용하면 된다.

 

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    color: Colors.black87,
    activeColor: Colors.redAccent,
  ),
)

DotsDecorator를 사용해 활성화가 되지 않은 점들은 검정으로 표현하고 활성화가 된 점의 색을 빨간색으로 바꿔주기만 하면 마음대로 색을 조합해 사용할 수 있다.

 

 

만약 사이즈와 모양을 바꾸고 싶으면 다음과 같이 바꿔주면 된다.

 

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    size: const Size.square(9.0),
    activeSize: const Size(18.0, 9.0),
    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  ),
)

DotsDecorator 안에 size, activeSize, activeShape만 조합해서 사용하면 된다.

 

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    shape: const Border(),
    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  ),
)

DotsDecorator 안에 shape와 activeShape를 조합해서 사용하면 된다.

 

 

점들의 사이 간격을 늘릴 수도 있다.

 

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    spacing: const EdgeInsets.all(10.0),
  ),
)

DotsDecorator 안에 spacing을 사용해 간격을 원하는 대로 맞출 수 있다.