Flutter에서 특정 위젯 위치로 스크롤 이동하기

안녕하세요.
이번 포스팅에서는 이벤트(버튼 클릭 등) 발생 시 특정 위젯이 위치한 위치로 스크롤 이동하는 방법에 대해서 알아보겠습니다.
웹에서 url에 Fragment(#)를 이용해서 Fragment id에 해당하는 HTMLElement를 보이게 하는것과 동일한 동작이라고 보면 됩니다.

방법은 아주 간단합니다.
특정 위젯에 대한 정보를 알기 위한 key 값을 등록하고 Scrollable.ensureVisible을 이용하면 됩니다.

먼저 특정 Widget에 key를 등록해줍니다.

...
  final GlobalKey _widgetKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
      @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('테스트'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 700,
              color: Colors.blue,
              child: Center(
                child: Text('첫번째 Container'),
              ),
            ),
            Container(
              key: _widgetKey,
              width: double.infinity,
              height: 700,
              color: Colors.green,
              child: Center(
                child: Text('두번째 Container'),
              ),
            ),
            Container(
              width: double.infinity,
              height: 700,
              color: Colors.purple,
              child: Center(
                child: Text('세번째 Container'),
              ),
            ),
          ],
        ),
      ),
    );
  }
...

위와 같이 코드를 작성하고 실행을 하면 아래와 같이 보이게 됩니다.

이제 특정 버튼을 눌렀을 때 지금 key를 등록한 두번째 Container로 스크롤이 되도록 해보겠습니다.

...
  final GlobalKey _widgetKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body: SingleChildScrollView(
        child: Column(
          children: [
            FilledButton(
              onPressed: () {
                Scrollable.ensureVisible(
                  _widgetKey.currentContext!,
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  alignment: 0
                );
              },
              child: Text('두번째로 이동'),
            ),
            ...
          ],
        ),
      ),
    );
  }
...

위와 같이 버튼을 추가하고 실행을 하면 아래와 같이 보이게 됩니다.

이제 버튼을 눌러보면 아래와 같이 두번째 Container로 이동하는 것을 볼수 있습니다.

 

추가로 Scrollable.ensureVisible에 들어가는 파라미터들에 대해서 알아보겠습니다.
위의 예제에서 제일 먼저 들어간 _widgetKey.currentContext!은 보여질 Widget에 대한 context 값이 들어가게 됩니다.
두번째의 duration: Duration(milliseconds: 300)은 이동까지 걸릴 시간을 나타냅니다. 기본적으로 Duration.zero로 설정되어 있어서, 설정을 해주지 않으면 애니메이션 없이 스크롤이 이동합니다.
세번째의 curve: Curves.easeInOut 은 스크롤이 이동할때 동작하는 애니메이션에 대한 옵션입니다.
마지막의 alignment: 0은 Widget을 스크롤의 어느 위치에 보여줄지를 나타냅니다. 0의 경우 Widget이 화면의 0,0 위치에, 0.5의 경우 Widget이 화면의 중앙에 1의 경우 화면의 하단에 붙도록 위치합니다.

alignment가 0.5일 경우 버튼 클릭 시 아래와 같이 스크롤이 이동해서 보이게 됩니다.

alignment가 1일 경우 버튼 클릭 시 아래와 같이 스크롤이 이동해서 보이게 됩니다.

여기까지 부족한 글 읽어주셔서 감사합니다.
제가 잘못 작성한 내용이나 부족한 부분이 있다면 알려주시면 보완 수정하겠습니다.

감사합니다💛