[flutter] 리스트 스크롤 위치 이동하기

플러터 리스트 스크롤 위치 이동하기

상황에 따라 리스트의 스크롤 위치를 특정 위치로 이동시켜주는 기능이 필요해요.

 

예를 들어 검색 화면에서 검색어가 변경될 때마다 스크롤 위치를 맨 위로 이동시키거나, 채팅 화면에서 가장 최근 대화한 위치로 스크롤을 이동시키는 버튼을 추가해서, 사용자가 다음 작업을 조금 더 편하게 진행할 수 있도록 도울 수 있거든요.

 

플러터나 리액트 네이티브의 경우, 상태가 변경되었을 때만 해당 위젯이나 컴포넌트를 업데이트하기 때문에 리스트에 내용이 변경되더라도 스크롤 위치는 그대로인 것을 경험하신 적 있을 거예요.

 

그러면 플러터에서는 리스트 스크롤 위치를 어떻게 이동시키는지 구현해보도록 할게요. 

import 'package:flutter/material.dart';

class PostList extends StatefulWidget {
  const PostList({Key? key}) : super(key: key);
  
  @override
  _PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {
  // 스크롤 제어를 위한 컨트롤러를 선언합니다.
  final ScrollController _scrollController = ScrollController();
  
  // 스크롤 위치를 맨위로 이동시킵니다.
  void _scrollToTop() {
    setState(() {
      _scrollController.jumpTo(0);
    });
  }
  
  @override
  void dispose() {
    super.dispost();
    _scrollController.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ...,
      body: SafeArea(
        child: Column(
          Expanded(
            child: Scrollbar(
              controller: _scrollController, // 스크롤 컨트롤러
              child: ListView.builder(
                controller: _scrollController, // 스크롤 컨트롤러
                scrollDirection: Axis.vertical, // 리스트 스크롤 방향
                physics: const AlwaysScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return ...
                },
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 스크롤 위치 맨위로 이동
          _scrollToTop();
        },
        child: const Icon(
          Icons.expand_less,
        ),
      ),
    );
  }
}

 

코드에서 가장 핵심이 되는 부분은 ScrollController 선언과 Scrollbar, ListView controller 값에 선언한 스크롤 컨트롤러를 작성해주는 것이에요. 

 

참고로 저도 작동 원리에 대해 깊이 있게 알지 못하는 부분이 많아요. 그러다 보니 원리 설명보다는 기능을 구현하는 과정에 대해 초점을 둔 점 양해 부탁드릴게요~🙏🏻

 

그래도 궁금하신게 있으시면 댓글 남겨주세요! 😊