[Flutter] 원하는 위치로 Scroll 하기

 

안녕하십니까, 민트입니다 😈

이번 포스팅은 Flutter 작업을 하며 있었던 일입니다. Swift와 다르게, Flutter는 특정 item으로 Scroll을 해주는 내장 함수가 존재하지는 않더라고요. 때문에 하나의 item 높이를 곱한 오프셋으로 Scroll하는 방식을 사용해 보았습니다. 이때 아래와 같은 두 가지 문제가 있었어요. 

📚 작업
- SalaryCap 초과해서 구매가 안되는 선수는 skip하고 스크롤해서 구매 가능 선수부터 보여주기

1. 다시 돌아가는 Scroll

몸값이 낮거나 같은 첫번째 선수의 인덱스를 찾아, player item 하나의 높이를 곱한 오프셋으로 scroll하였습니다. 이때 `shrinkWrap: true`, `NeverScrollableScrollPhysics()`로 인해 스크롤 영역이 부모 위젯이나 레이아웃이 재구성되며 다시 원래 위치로 원상복구되는 문제가 발생했습니다. 

때문에 `shrinkWrap: true`, `NeverScrollableScrollPhysics()` 를 제거하고, 독립적으로 ListView가 scroll할 수 있게 변경하였습니다. 

2. 높이 맞추기

하지만 이렇게 변경한 후에도 문제가 생겼는데, ListView의 높이나 제약조건이 없어서 이를 설정해주어야 했습니다. 고민하다 전체 높이에서 각 위와 아래에 있는 고정된 네비바들의 높이만 제해주면 될 것 같아서, SizedBox를 활용했습니다. 

// 상단의 높이? 80(포지션 + 남은 금액) + 56(AppBarDefault) + 50(Week 설명)
// 하단의 only home nav 높이 80
final double screenHeight = MediaQuery.of(context).size.height;
final double listHeight = screenHeight - 266;

    return SelectLineupScaffold(
      title: "select_a_position".tr(args: [widget.position]),
      weekStr: weekStr,
      child: isProcessing
          ? Center(
              child: CircularProgressIndicator(
                color: Colors.red[900],
              ),
            )
          : SizedBox(
              height: listHeight,
              child: ListView.separated(
                   //코드 생략
              ),
          );
    }