[Flutter] listview 이전 아이템들 렌더링 유지하기

listview 를 사용중인데 item 에 image 가 들어간다. 문제는 이 이미지가 network 에서 받아와서 이미지의 높이를 받아오기전까지 모른다는거...

 

그래서 이미지를 받아와서 container height 를 설정해주고 있다

 

문제는 리스트뷰를 쫙~ 내리고 다시 올라올때 listview 특성상 기존 아이템들을 잠시 제거했다가 화면에 보일때 다시 렌더링한다는거... 

 

기존 아이템이 제거돼서 높이가 0이 됐다가 다시 화면에 보여 렌더링되면서 높이가 100? 200? 정도 로 설정되면서 스크롤이 갑자기 한움큼 내려가버리는 문제 발생.

 

그래서 listview 나 pageview 같은 곳에서 기존 아이템들을 살릴 수 있는 방법을 찾아봤다.

 

import 'package:flutter/material.dart';

class TestItem extends StatefulWidget {
  @override
  _TestItemState createState() => _TestItemState();
}

class _TestItemState extends State<TestItem>
    with AutomaticKeepAliveClientMixin { // <-----
  @override
  bool get wantKeepAlive => true; // <-------

  @override
  Widget build(BuildContext context) {
    super.build(context); // <------
    return Container();
  }
}

 

방법은 하위 아이템에 AutomaticKeepAliveClientMixin 을 with 해주고,

get 으로 wantKeepAlive true 로 반환하는 코드를 오버라이딩 해주면 된다.

 

이 방법은 tabbar, listview 등등 적용된다

참조 https://stackoverflow.com/questions/52541172/flutter-listview-keepalive-after-some-scroll