Flutter - 페이지 이동 시 특정 위젯으로 자동 스크롤하기

페이지, 탭 이동 시 내가 원하는 위젯으로 자동으로 스크롤 되는 기능

 

동작 방식 :

1. 탭 이동 시 scrollFromMyTap 이라는 값을 true로 변경

2. 다른 페이지에서 build할 때 scrollFromMyTap를 확인

3. true라면 scroll함수 실행

 

페이지 클릭 함수

- 특정 페이지에서 이동시에만 스크롤을 하기 위해서 변수를 추가.

- ViewModel : scrollToWidget

/// View1에 대한 코드

// ViewModel에 작성된 로직
void scrollToWidget(bool isMyWidgetTap) {
  if (isMyWidgetTap) {
    scrollFromMyTap = true;
  } else {
    scrollFromMyTap = false;
  }
  notifyListeners();
}


// View
Widget _button(){
  return TextButton(
  		onPressed:(){
        scrollToWidget(true);
        },
        child: Text("버튼 클릭"),
  	);

}

 

 

페이지 이동 후 스크롤 함수 

/// View2에 대한 코드 

final ScrollController _scrollController = ScrollController();
final GlobalKey _widgetKey = GlobalKey();

Widget build (){
//ViewModel의 변수가 true라면 스크롤 실행
    if (vm.scrollFromMyTap) {
      _scrollToWidget3();
    }

    return SingleChildScrollView(
      controller: _scrollController,
      child: Column(
        children: <Widget>[
          _widget1(),
          _widget2(),

          //Container로 감싸고 key를 전달
          Container(
            key: _widgetKey,
            child: _widget3,
          ),
          _widget4(),
        ],
      ),
    );
}

void _scrollToWidget3() {
  Future.delayed(const Duration(milliseconds: 300), () {
    if (_widgetKey.currentContext != null) {
      Scrollable.ensureVisible(
        _widgetKey.currentContext!,
        duration: const Duration(milliseconds: 700),
        curve: Curves.easeInOut,
      );
    }
  });
}