[Flutter] Drag & Drop으로 선택하기

근무자 앱에 이런 요구사항이 있었다.

근무 불가능 시간 선택을 편하게 하기 위해서, 시간 셀을 드래그로 선택 가능하게 하면 어때요?

좋은 아이디어였다.

---

일단 결과 먼저

구현 방법

핵심만 말하자면, GestureDetector의 onVerticalDragUpdate와 onVerticalDragStart를 이용했다.

viewModel이라는 ChangeNotifier에 각 셀 선택 여부(T/F)가 저장되어있고, dragCells 메소드는 시작 셀의 선택 여부(시작셀이 T였다면 F, F였다면 T)에 따라서 나머지 드래그된 셀들도 set해주는 방식이다.

// 생략
GestureDetector(
	onTap: () {
    	viewModel.toggleCell(cell);
    	log('시간 탭, cell = ${cell.isSelected}');
    },
    
    onVerticalDragStart: (details) {
    	int selectedRow = viewModel.selectedColumnIndex;
    	viewModel.dragState = !viewModel.grid[selectedRow][col].isSelected;
    },
    onVerticalDragUpdate: (details) {
    	var position = details.localPosition;
    	var cellSize = 45; // 셀 높이
    	int selectedRow = viewModel.selectedColumnIndex;
    	int selectedColumnIdx = (position.dy / cellSize).floor() + col;
    	if (selectedColumnIdx >= viewModel.grid[selectedRow].length) {
    		selectedColumnIdx = viewModel.grid[selectedRow].length - 1;
    	}
    	if (selectedColumnIdx < 0) {
    		selectedColumnIdx = 0;
    	}
    	viewModel.dragCells(viewModel.grid[selectedRow][col],
    	viewModel.grid[selectedRow][selectedColumnIdx]);
    },
    // 생략
}

---

출처:
https://catsbi.oopy.io/00cd03a9-6324-4fb4-8371-a26dcfbe2229
https://api.flutter.dev/flutter/widgets/GestureDetector-class.html