무한 스크롤하기

철웅·2023년 3월 13일
0

Flutter_Tips

목록 보기
4/10
post-thumbnail

전체적인 순서
1. ListView에 ScrollController() 부착하기
2. 스크롤위치 계속 감시해주는 Listener 부착하기
3. 맨 밑까지 스크롤하면 서버에 게시물 더 달라고 Get 요청
4. 데이터 가져오면 기존 data를 저장해두었던 state에 추가해주기


1. ListView에 ScrollController() 부착하기

var scroll = ScrollController(); 	// stateful 위젯에다가 해야함 

...


return ListView.builder(
	itemCount: 3,
    controller: scroll,

...
  • stateless 위젯이면 ScrollController를 사용하지 못하기 때문에 반드시 stateful로 바꾸고 사용하자
  • ListView에 controller 라는 옵션이 새로 하나 생긴다.

2. 스크롤위치 계속 감시해주는 Listener 부착하기


  void initState() {
    super.initState();
    scroll.addListener(() {
    // 유저가 스크롤할 때마다 코드 실행
    }
  • initState 안에 스크롤컨트롤러를 부착한 변수에 리스너를 달아준다.

3. 맨 밑까지 스크롤하면 서버에 게시물 더 달라고 Get 요청

scroll.addListener(() {
 if( scroll.position.pixels == scroll.position.maxScrollExtent)
        {
          if(flag==0) {
            getMore();	// 서버에서 데이터를 추가로 받아오는 함수
          }
        };
}
  • scroll.position.pixels == scroll.position.maxScrollExtent
    현재 스크롤의 위치와 최대로 스크롤을 내린 값이 같다면
  • flag는 같은 게시물 무한스크롤 하길래 방지차원에서 만들어놨음

참고!
스크롤 위치를 다룰 때에는
import 'package:flutter/rendering.dart'; 를 사용하자
유용한 함수가 많이들어있는 기본패키지이다.


4. 데이터 가져오면 기존 data를 저장해두었던 state에 추가해주기

addData(a){
    setState(() {
      data.add(a);
    });
  }		// state에 data 추가해주는 함수

...

getMore() async {
    var moredata =  await http.get(Uri.parse('서버 url'));
    var moredatadc = jsonDecode(moredata.body);
    widget.addData(moredatadc);		// 여기서 추가
    flag = 1;
  }
  • 말 그대로 data를 추가해주면된다.
  • 위에 있는 클래스 안에 있는 것들을 사용할 때는 앞에다widget을 꼭 붙이자

0개의 댓글