믹아의 개발일기

어떤 기능에 대한 코드를 아주 많이 작성하는 경우도 있다.

이게 줄이 길어질수록 한눈에 딱딱 보기가 조금 어려워진다

예전에 유니티할땐 #region ~~ 으로 묶을수가 있었는데 flutter[dart] 에서는 그런기능이 없나? 찾아봤다

https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder 

vscode의 이 extension을 쓰면 되더라.

사용법은 간단하다

vscode 에서 해당 extension 을 설치하고 코드에 #region, #endregion 만 입력해주면 끝

//#region 과 설명을 적고

//#endregion 으로 어디까지 묶을것인가 적는다

그다음 #region 왼쪽의 화살표를 누르면

이렇게 #region ~ #endregion 까지 접힌다. 굿.

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