🔥 awesome_indicator (0.0.1)

awesome_indicator | Flutter Package

awesome_indicator | Git Repository
awesome_indicator_sample | Git Repository

What the Package is.

소개해 드리는 패키지는 제가 직접 개발하고 퍼블리싱한 awesome_indicator 라는 패키지에 대해서 소개하려고 한다.

스크롤 뷰 위젯의 인디케이터를 연동하여 자동으로 스크롤 진행률 만큼 이동 시켜주는 패키지이다.

이번에는 초기 배포 버전으로 스크롤 뷰 위젯에서만 사용 가능하지만, 추후 페이지뷰 등에서도 사용할 수 있는 인디케이터를 추가로 업데이트 할 예정이다.

How to use.

해당 패키지의 사용 방법에 대해서 소개하도록 하겠다.

Dependencies

dependencies:
	awesome_indicator: <latest_version>

AwesomeScrollIndicator

awesome_indicator 패키지의 위젯으로는 AwesomeScrollIndicator를 사용하면 된다.

AwesomeScrollIndicator의 필수 값으로 스크롤 뷰의 Controller를 넘겨주면 된다. 그럼 끝이다. 간단하다 !

AwesomeScrollIndicator(
	controller: _controller,
);

ScrollController만 넘겨주면 awesome_indicator 패키지가 자동으로 스크롤 진행률에 맞춰 포지션을 맞춰준다.

이제 원하는 방법으로 인디케이터를 꾸며주도록 하는 옵션들에 대해서 살펴보자.

Size

먼저 인디케이터의 가로 사이즈를 변경해 주자.

Default width : MediaQuery.of(context).size.width

AwesomeScrollIndicator(
	controller: _horizontalController,
	width: MediaQuery.of(context).size.width - 40,
);

이번에는 인디케이터의 높이를 변경해 보자.

Default height : 8

AwesomeScrollIndicator(
	controller: _horizontalController,
	height: 20,
);

Width	Height

Indicator

이번에는 인디케이터의 가로 사이즈의 비율을 변경하도록 해보자.

가로 비율 변경은 indicator 파라미터를 사용하면 된다. 0~1 사이의 값을 Double 타입으로 지정할 수 있다.

Default indicator : 0.5

AwesomeScrollIndicator(
	controller: _horizontalController,
	indicator: 0.2,
),

0.2	0.7

Color

인디케이터와 배경 색상을 변경해 보도록 하자.

먼저, 배경 색상을 변경하자. background 옵션의 배경 색상을 변경할 수 있는 파라미터 이고, Color 타입을 사용하면 된다.

Default background : Color.fromRGBO(195, 195, 195, 1)

AwesomeScrollIndicator(
	controller: _horizontalController,            
	backgroud: Colors.cyan,
),

이어서 인디케이터의 컬러를 변경해 주도록 하자.

color 파라미터에 원하는 컬러 값을 넣어주면 된다.

Default background : Colors.black

AwesomeScrollIndicator(
	controller: _horizontalController,            
	backgroud: Colors.red,
),

background	color

Radius

인디케이터의 Radius 값을 변경하는 방법은 radius 파라미터에 원하는 값을 넣어주면 된다.

AwesomeScrollIndicator(
	controller: _horizontalController,
	radius: 4,
),

Radius : 0	Radius : 4	Default

Listener

마지막으로 살펴본 옵션 파라미터는 바로 인디케이터의 값을 수신하는 부분이다.

스크롤 포지션 값을 수신하고 싶은 경우가 있을 수도 있을 것 같아서 제공하는 기능이다.

onListener 리스너를 수신하면 된다.

onListener에서 제공되는 값은 인디케이터의 비율과 픽셀 값이다.

AwesomeScrollIndicator(
	controller: _horizontalController,
	onListener: (int ratio, double pixel) => null,
),

마무리

지금까지 awesome_indicator 사용 방법에 대해서 소개하였다.

패키지의 추가적인 기능이나 변경되어야 하는 코드가 있으면 자유롭게 의견 주시면 검토 후 반영하도록 하겠습니다.