피드로 돌아가기
Dev.toFrontend
원문 읽기
CustomPaint와 ScrollController 동기화를 통한 Flutter Web 기반 고성능 Gantt Chart 구현
Building an MS Project-Style Gantt Chart in Flutter Web — CustomPaint with Synchronized Scrolling
AI 요약
Context
기존 Widget 기반 레이아웃으로는 복잡한 WBS(Work Breakdown Structure) 시각화와 타임라인 동기화 구현에 한계 존재. 대량의 데이터 렌더링 시 발생하는 성능 저하와 좌우 패널 간의 수직 스크롤 일치 필요성 대두.
Technical Solution
- CustomPaint를 통한 Low-level 렌더링으로 복잡한 그리드 레이아웃 및 간트바 직접 드로잉 제어
- 두 개의 ScrollController에 상호 리스너를 부착하여 좌측 Task List와 우측 Timeline 간의 Vertical Scroll 동기화 구현
- startDate와 dayWidth 상수를 부모 위젯에서 관리하여 헤더 날짜 표시와 바 위치 간의 좌표 정렬 일관성 확보
- shouldRepaint 메서드 내 데이터 변경 여부를 검증하여 불필요한 프레임 재그리기를 방지하는 최적화 적용
- Supabase를 활용한 정규화된 스키마 설계로 Task 간 Dependency 및 진행률 데이터 관리 효율화
실천 포인트
- 대량의 커스텀 그래픽 렌더링 시 shouldRepaint 조건 최적화를 통한 불필요한 리페인트 제거 검토 - 서로 다른 스크롤 영역 간의 동기화가 필요할 경우 ScrollController 리스너를 통한 offset 강제 일치 방식 적용 - 좌표 기반의 렌더링 시스템 설계 시 기준점(startDate)과 단위 길이(dayWidth)를 단일 소스에서 관리하여 정렬 오류 방지