[Flutter 라이브러리 소개]리스트뷰에서 스크롤 인덱스로 움직이기

Flutter에서 리스트뷰를 이용해 스크롤링 할때 ScrollController를 사용한다. 이때 특정한 아이템 위치로 이동하고 싶으면 animateTo를 사용해서 이동하지만 아이템의 크기가 가변적일 경우에는 정확한 위치로 이동하기 어렵다 이때 사용하기 좋은 라이브러리는 scroll_to_index이다.
https://pub.dev/packages/scroll_to_index

설치 방법은 다음과 같다.

터미널에서 설치 할때 
 $ flutter pub add scroll_to_index

pubspecp.yaml에 사용할때 
dependencies:
  scroll_to_index: ^3.0.1

사용 방법은 다음과 같다.

import 'package:scroll_to_index/scroll_to_index.dart';

controller = AutoScrollController()
Scaffold(
body:ListView(
  scrollDirection: scrollDirection,
  controller: controller,
  children: randomList.map<Widget>((data) {
  	final index = data[0];
  	final height = data[1];
    return AutoScrollTag(
      key: ValueKey(index),
      controller: controller,
      index: index,
      child: Text('index: $index, height: $height'),
      highlightColor: Colors.black.withOpacity(0.1),
    );
  }).toList(),
),
floatingActionButton: FloatingActionButton(
        onPressed: () async {
               await controller.scrollToIndex(index,   // 여기에 특정 인덱스를 입력하면 특정하는 아이템 위치로 이동한다. 
                  preferPosition: AutoScrollPosition.begin);
              controller.highlight(counter); 스크롤 후 혹은 특정 아이템에 하이라이트 효과를 줄수 있다. 
  		},
        tooltip: 'Increment',
        child: Text(counter.toString()),
      ),
)
  

다만 이 라이브러리를 사용할 때 카톡처럼 특정 아이템의 색이 하이라이트 되는것이 아니라 에니메이션 효과를 주고 싶을 수 있다. 그렇다면
scroll_to_index.dart의 buildHighlightTransition의 위젯을 변경해주면 된다. 자세한 방법은 아래 링크의 파일을 참고해서 적용하면 좋다.
https://github.com/ironfactory8684/scroll_to_index/tree/main