18. 새로 알게 된 flutter 지식 모음(11/02)

1. ListView.builder 내의 속성 - cacheExtent

 Widget widgetList(){
 	return ListView.builder(
    		itemCount : 10,
    		itemBuilder : (ctx,i) => Card(),
    		itemExtent: 100,
    		cacheExtent : 100,
    	);
    }

ListView.builder를 통해 listview를 만들때 다음과 같이 위젯 속성들을 정해준다.
itemCount,itemBuilder,itemExtent까지는 내가 자주 사용하던 것들이기에 익숙했다.
하지만 새로 알게 된 것은 cacheExtent이다.
cacheExtent에 대해 검색을 하다 발견한 영문 설명은 다음과 같다

---

You can call items outside of the visible portion by adding the cacheExtent which is measured in pixels NOT items. So a cacheExtent: 1000 means a thousand pixels will be loaded and rendered off the screen. This essentially “pre-loads” the data so that you’re not stuck waiting on data loading into the ListView.

---

위의 설명은 다음과 같다. 보통 listView.builder를 통해 listview를 그리면 해당 index의 아이템이 화면에 나타났을 때(사용자에게 보여졌을 때) build가 된다. 하지만 cacheExtent의 값을 지정해주면 화면 밖에서 해당 값만큼의 픽셀들을 통해 아이템들을 화면 밖에서 "미리" 빌드를 해 놓는다. 그렇기 때문에 listview를 로딩하는 순간을 기다리지 않아도 된다.

2. list 관련 함수

• where

  • 사용법 : List evenNumbers = list.where((element) {retrun element % 2 == 0;});
  • 사용 결과 : 전체 리스트중 where 조건절 안에 조건에 성립하는 element를 가지고 있는 list를 반환한다.
  • 사용 예시

  List numbers = [1,2,3,4,5,6];
  List evenNumbers = numbers.where((element) {retrun element % 2 == 0;});
  print(evenNumbers); // [2,4,6];

  
  - takeWhile - 사용법 : List numsTo2 = numsFrom0To5.takeWhile((int n) => n <= 2); - 사용 결과 : 0번째 element부터 조건문을 확인하여 조건문을 통과하지 못하는 직전의 element까지를 포함한 list를 반환
  - 사용 예시

  List numbers = [0,1,2,3,4,5];
  List numsTo2 = numbers.takeWhile((int n) => n <= 2);
  print(evenNumbers); // [0,1,2];

  
  - removeRange - 사용법 : numbers.list(a,b); - 사용 결과 : 해당 list에서 a번째 element부터 b번째의 element까지의 element들을 제거하는것이다.
  - 사용 예시

   final numsFrom0To5 = [0, 1, 2, 3, 4, 5];
   numsFrom0To5.removeRange(0,3);
   print(numsFrom0To5); //[3,4,5]

  
  3. extension - IDE에서 코드 완성을 사용하는 경우 일반 메서드와 함께 확장 메서드를 제안하는 것이다.
  쉽게 말해 본인이 필요로 하는 속성을 추가로 만들어 사용할 수 있게 해주는 것이다.
  - 사용 예시

    extension on DateTime{
    	String get humanize{
        	return "${this.day}/${this.month}";        
    
    void main(){
      final DateTime now = DateTime.now();
      print(now.humanzie); // "03/11";
   	}

DateTime 타입에 기존에 없던 humanize라는 속성을 정의하여 사용할 수 있게 되었다.