✨ 스크롤 시 프로필 카드 10개씩 업데이트 기능 구현 #1
Conversation
| try { | ||
| final response = await _dio.get('${StringConstants.baseUrl}/home'); | ||
| final response = | ||
| await _dio.get('${StringConstants.baseUrl}/home?page=$page'); |
There was a problem hiding this comment.
서버에서 page 별로 10개의 멤버 객체를 받을 수 있다고 해서
- 쿼리 문자열 파라미터로 page를 추가
- 동적으로 다음 page의 멤버 객체를 받아올 수 있도록 인자로 page 변수를 추가했습니다.
| Future<void> _initializeMemberData() async { | ||
| await getMembersBuilder(page: _page); | ||
| } | ||
|
|
There was a problem hiding this comment.
- ScrollController
- 화면의 끝에 닿을 시 이를 감지하는 객체하는 객체입니다.
- State 객체가 만들어질 때 컨트롤러를 초기화하고 _scrollListener 라는 함수를 listen하도록 하였습니다.
- _initializeMemberData
- iniState에서는 비동기 처리를 하지 않기를 권장하기에 직접적으로 비동기를 처리하지 않도록 함수 안에 넣어줬습니다!
| } | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Expanded( | ||
| child: FutureBuilder<List<MemberModel>>( |
There was a problem hiding this comment.
FutureBuilder로 해당 기능을 구현하려고 할 시,
리스트의 끝에 도달할 때마다 전체 화면이 다시 그려지게 돼서
유저의 스크롤 포인트가 화면 제일 위로 초기화되는 문제가 있어 이를 해결하기 위해 ListView.builder 위젯을 사용했습니다.
There was a problem hiding this comment.
다만 비동기 객체라 1) 로딩 2) 에러 시 분기 처리를 해줘야할 것 같습니다..!
| void _scrollListener() { | ||
| // 리스트의 맨 아래에 도달했을 때 | ||
| if (_scrollController.position.pixels == | ||
| _scrollController.position.maxScrollExtent) { | ||
| //서버에서 받아온 멤버 객체가 10의 배수일 때만 서버의 다음 페이지에 대한 멤버 정보를 받아옴. | ||
| if (_allMembers.length % 10 == 0) { | ||
| _page++; | ||
| getMembersBuilder(page: _page); | ||
| } |
There was a problem hiding this comment.
창환님 궁금한 점이 있어 질문 드립니다!
-
10의 배수일 때 다음 페이지에 대한 정보를 받아오신다고 하셨는데, 10의 배수가 아닌 경우(11, 12, 13 ... ) 의 경우에는 다음 페이지를 불러오지 않는 걸까요?
-
딱 10개인 경우 다음 페이지가 없을 거 같은데 이 경우에도 호출하는 걸까요?
There was a problem hiding this comment.
답변 드립니다!
- 맞습니다! 10의 배수가 아닌 경우에는 다음 페이지에 대한 요청을 하지 않도록 조건을 걸어놨어요.
- 10개인 경우에는 다음 페이지에 쿼리를 하되 멤버 객체가 없으면 똑같이 아래 로직을 따라가도록 설정하려고 했어요!
There was a problem hiding this comment.
서버 응답 필드 중 hasNext는 다음 페이지의 여부 값이 담겨있는데요!
혹시 사용하시지 않고 직접 개수를 체크하시는 이유가 있을까요?
There was a problem hiding this comment.
앗 그 여부를 놓쳤네요..! 피드백 감사합니다! 수정하겠습니당 👍
Title
스크롤 시 프로필 카드 10개씩 업데이트 기능 구현
What type of PR is this?
Description
자세한 사항은 변경된 코드에 작성해놓겠습니다!
Related Issue number and link
Mobile & Desktop Screenshots/Recordings
-.10.mp4
Checklist:
To Reviewers
아직 스크롤 시 ProgressIndicator는 추가하지 않은 상태입니다! 이 부분은 추후 논의 후 추가하도록 하겠습니다~!