Tip1. Don’t use Opacity with Animation

• Opacity Widget을 애니메이션과 함께 사용할 경우 퍼포먼스가 감소할 수 있다.

  → Opacity 위젯은 변화하는 값에 위젯 전체가 리빌드 되기 때문.

• 투명도에 대한 Animation을 쓰겠다면 AnimatedOpacity 를 사용하자

• 만약 FadeIn 되는 이미지를 원하면 FadeImage 위젯을 사용하자

  → 사라지는 효과를 Opacity 를 이용한 투명도 보다 FadeIn/out 효과를 이용하자

• 만약 컬러에 opacity 값을 주고싶다면 Color 위젯과 함께 사용하자

Container(color: Color.fromRGBO(255, 0, 0, 0.5))

Tip2. Precache image and icons

• Flutter 내부에 precacheImage() 함수를 이용해서 이미지나 아이콘의 로딩 속도를 줄일 수 있다

• 네트워크 이미지 뿐만아니라 로컬 이미지 호출시에도 효과가 있다

• initState() or didChangeDependencies() 에서 미리 설정하면 좋다

  → Initialize 작업시에 미리 이미지들을 cache 처리 해줘야한다. 그리고 후에 기존 사용방식처럼 이미지를 호출하면된다.

  const List<CatImage> images = [
  	CatImage(width: 150, height: 150, caption: 'Watch out'),
  	CatImage(width: 150, height: 160, caption: 'Hmm'),
  	CatImage(width: 160, height: 150, caption: 'Whats up'),
  	CatImage(width: 140, height: 150, caption: 'Miaoo'),
  	CatImage(width: 130, height: 150, caption: 'Hey'),
  	CatImage(width: 155, height: 150, caption: 'Hello'),
  ];
  @override
  void didChangeDependencies() {
      super.didChangeDependencies();
      for (CatImage image in images) {
  			precacheImage(NetworkImage(image.url), context);
      }
  }
  

Package(cached_network_image) 와의 차이점?

패키지를 사용하면 문제없이 이미지를 캐싱할 수 있지만 다른점은 처음 한번은 로딩을 겪어야 한다는 것이다. 만약 처음부터 로딩을 최대한 줄이고 싶다면 precacheImage() 를 사용하여 미리 이미지를 캐시하고 사용 하면된다.

Tip3. Reduce memory consumption of ListView

• ListView 위젯 사용시 두가지 프로퍼티(addRepaintBoundary, addAutomaticKeepAlives)는 성능저하를 초래할 수 있다(메모리 사용량 증가)
• 해당 프로퍼티들은 화면에서 해당 영역이 보이지 않더라도 Iterm이 사라지지 않게하는 기능을 갖고 있다
• 리스트의 성능(사라지지 않는 아이템 → 로딩 필요없음)의 올릴 순 있지만 메모리 소모가 커지기 때문에 최적화 성능은 떨어진다
• 기본적으로 두 프로퍼티는 true 값이다. 최적화 성능을 올리고 싶으면 false 로 두자

addRepaintBoundary

• 각 자식들을 RepaintBoundary 위젯으로 감싼다. (경계를 만든다)
  • 만약 자식들의 컬러가 단순하거나 경계가 확실한 경우 오히려 이 기능을 사용하면 좋지 않을수도 있다.
• 각 자식들의 상태를 보존한다.