[flutter] 플러그인을 활용한 화면 슬라이더 만들기

필요한 플러그인

carousel_slider

dots_indicator

 

GetX 없이 진행 한다면 Statefulwidget 을 활용하여 위의 두 플러그인이 동인한 index값을 가지게 세팅해주면 된다.

class Slider extends StatefulWidget {
	@override
    _Slider createState() => _Slider();
}

class _Slider extends State<Slider>{
	int index = 0;
    .
    .
    CarouselSlider(
    	option: (
        	onPageChangeed: (idx){
        		setState(idx){
            		index = idx; // state 값을 변경하면서 Reload 시킴
            	}
        	}
        )
    ),
    DotsIndicator(
    	position: index.toDiuble(), // 값이 변경되어 Reload 되면서 동일한 인덱스 적용
    )
}

위 예시는 간결하게 인덱스를 공유하는 방식을 적은 예시 임으로 복붙하여 사용하면 에러발생.

어떤식으로 사용되어지는지 이해가 필요함.

 

GetX 를 사용한다면 Controller에 index 값을 .obs로 만들고 값을 변경 할때 GetX의 update() 메소드를 사용하여 인덱스를 없데이트 해주면 동일하게 사용이 가능하다.

class Controller extends GetxController {
	int index = 0.obs;
    
    void changeIndex(int idx){
   		index.value = idx;
        update();
    }
}

class Slider extends GetView<Controller> {
	.
    .
    CarouselSlider(
    	option: CarouselOption(
        	onPageChange(idx){
            	controller.changeIndex(idx);
            }
        )
    ),
    DotsSlider(
    	position: controller.index.value.toDouble(),
    )
}

조금 더 정확하게 설명 하자면 index 값은 실시간으로 변경되기 때문에 실시간 데이터를 적용하려면 

DotsIndicator을 Obx( () => DotsIndicator()) 형식으로 감싸주어야 한다