타임 테이블 헤더 행, 열 고정시키기

문제 정의

현재는 좌, 우로 스크롤 될 때 헤더 행과 열이 사라져 사용자가 중간에 있는 예약을 확인할 때 번거롭고 해당 행과 열의 정보가 무엇인지 기억하고 있어야 했다.

헤더 행과 열을 항상 표시해 사용자의 번거로움을 없애고 싶었다.

현재 내 상태는 아래 그림과 같다.

기대하는 동작은 아래와 같다.

해결 방법

첫 번째 시도 방법

Scroll controller를 2개(좌-우, 상-하) 붙여 좌-우 스크롤이 될 때는 헤더 열을 고정시키고 상-하 스크롤이 될 때는 헤더 행을 고정시켜야 겠다고 생각했고 시도해 보았다. (Positioned로 붙이는 만큼, 헤더 행과 열에는 SizedBox로 공간을 차지하게 해두어야겠다고 생각)

그런데 개발 중 생각이 바뀌었다. 하나의 헤더는 고정해 놓고 하나의 Scroll controller만 사용해도 구현이 더 쉽게 가능할 것 같아 방향을 틀어보았다.

최종적으로 마지막 생각으로 개발되었으며, 아래는 대략적인 코드를 적어두었다.

final horizontalScrollController = useScrollController();
useListenable(horizontalScrollController);
    
final hOffset = horizontalScrollController.hasClients
    ? horizontalScrollController.offset
    : 0.0;
    
    
    ... // build 내부
    // 헤더 행
    Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: _buildPinnedTableHeaderOverlay(
            ...
            hOffset,
        ),
    ),
    // 헤더 열
    Positioned(
        left: hOffset,
        top: 0,
        child: _buildPinnedTimeOverlay(),
    ),

Scroll controller를 초기화하고 useListenable hook을 붙여 Scroll controller의 offset이 변경될 때마다 리랜더링이 되도록 만들었다.

그리고 내부적으로 위젯을 수정 후, 헤더 행과 열을 떼어내어 Positioned로 offset 값을 적용해주었다.

내부 위젯을 수정하는데 시간이 생각보다 오래 걸렸지만, 기능 부착은 금방 되어 원하는 UI를 만들 수 있었다.

완성 형태

위와 같이, 내가 원하는 UI로 변경했다. 사용하시는 분들이 조금 더 편하게 사용하길 바란다,,

조금 부족한 글이라도 내 생각을 블로그에 남겨두면 좋을 것 같아 조금씩 다시 글을 작성해 보고 있다. 내 정보가 정확하고 명확한지, 가치를 주는지를 많이 따져보았었는데 일단은 공유하고 많은 사람들에게 노출하고 피드백을 받는 것도 좋은 생각 같다.