[flutter]무한 스크롤 구현 방법.

앱을 만들다보면 자연스럽게 무한 스크롤이 필요할때가 온다. 

무한스크롤이 이걸말하는지는 모르겠지만 itemCount만 지정히지않는다면 무한정으로 나오긴한다.

Pagenation 무한 스크롤과 관련된 글을 조만간 정리할 예정이다. 이부분은 참고만 하도록하자.

GridView.builder(
  itemCount: data.length, //최대로 표시될 갯수
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, //한줄에 표시할 갯수
  itemBuilder: (BuildContext context, int index) {//무한 스크롤에 들어갈 요소
    return new Card(
      child: new GridTile(
        footer: new Text(data[index]['name']),
        child: new Text(data[index]
            ['image']), //just for testing, will fill with image later
      ),
    );
  },
)

 

 

그리드 레이아웃 이외에도 리스트 형태로도 무한 스크롤이 가능하다

ListView.builder(
            padding: const EdgeInsets.all(16),
            itemBuilder: (BuildContext _context, int i) {
              return Container();//이자리에 무한하고싶은것을 넣으면 된다
              });

위의 코드는 개수가 없는데다가 Container안이 비어있어 굉장히 부하가 심하게 올것이다.

 

위의 두 코드를 보면 .builder가 있을것이다.이들의 특징은 현재 보이는 부분의 일정범위 안을 미리 랜더링을 하는것이다.만약 데이터 1000개가 있는 리스트뷰 빌더를 볼때 화면에 보이는 개수가 10개인 경우에 일정개수를 미리 메모리에 올려두고 나머지는 읽지않는 방식인것같다 그렇기때문에 저렇게 비어있는 Container를 넣게되면 무한정으로 뷰에 나올터이니 부하가 심하다.