📖 오늘의 학습
개발을 하던 도중, Html을 렌더링을 해야하는 상황이 생겼다. 이 부분은 flutter_widget_from_html이라는 패키지를 이용해서 큰 힘을 들이지 않고 구현을 했으나, 문제가 하나 있었다. 바로 CustomScrollView의 Lazy Loading이다.
Lazy Loading은 화면에 보이는 영역에 가까운 위젯만 동적으로 생성하고, 화면에서 벗어난 위젯은 자동으로 폐기시킨다. 문제는 html 패키지가 html을 파싱 하고 태그에 맞게 위젯으로 변환하여 보여주는데, 거기에 있는 사진들도 새롭게 렌더링을 한다는 것이다.
사진이 몇 개나 있을 지, 그리고 사진 크기가 어떻게 될 지는 해당 패키지 입장에서 전혀 모르기 때문에, 높이는 전부 렌더링 한 뒤에 정확한 값을 갖게 된다. 그렇기에 html위젯이 화면에서 벗어나면 즉시 메모리에서 해제되고 다시 위로 스크롤 할 때 렌더링을 다시하게 되면서 높이가 바뀌어 순간이동을 하는 것 처럼 보이게 된다.
그렇기에 이를 해결하기 위해서는 비효율적이지만 html위젯의 상태를 보존해야했고, 이를 해결하기 위해AutomaticKeepAliveClientMixin
을 사용했다.
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:many_app/core/utils/custom_html_tag.dart';
class Html extends StatefulWidget {
const Html({super.key, required this.htmlData});
final String htmlData;
@override
HtmlState createState() => HtmlState();
}
class HtmlState extends State<Html> with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context);
return HtmlWidget(
widget.htmlData,
factoryBuilder: () =>
CustomHtmlTag(screenWidth: MediaQuery.of(context).size.width),
//이미지들을 사이즈 상관없이 기기 화면 너비만큼 확장시켜주는 클래스
customStylesBuilder: (element) {
switch (element.localName) {
case 'p':
return {
'font-size': '16px',
'font-family': 'HelveticaNeue',
'font-weight': '400',
'line-height': '1.2',
};
case 'h1':
return {
'font-size': '32px',
'font-weight': 'bold',
};
case 'h2':
return {
'font-size': '24px',
'font-weight': '600',
};
default:
return null;
}
},
);
}
@override
bool get wantKeepAlive => true;
}
Stateless
에서 Stateful
로 변환되긴 하지만, 이는 해당 위젯 자체의 상태를 보존하기 위함이기에 재사용은 충분히 가능하다.
🤔 오늘의 회고
배울게 산더미다...
오늘의 문제 역시도 코드가 달라지는게 하나도 없는 문제. 정말 거짓말 안하고 각 문제들의 해답은 한 줄 밖에 차이가 안나거나 한, 두 글자 차이다. 'DP가 다 그렇지 뭐~' 라고 해도 다른 문제들 정말 많은데 이렇게 한 이유가 있었는지 궁금하다.
'TIL' 카테고리의 다른 글
[TIL] 99클럽 코테 스터디 33일차 TIL : Flutter 괴랄한 JSON 파싱 (0) | 2024.11.29 |
---|---|
[TIL] 99클럽 코테 스터디 32일차 TIL : 구글 맵 (0) | 2024.11.28 |
[TIL] 99클럽 코테 스터디 30일차 TIL : 팀을 위한 RestAPI 규칙 (0) | 2024.11.26 |
[TIL] 99클럽 코테 스터디 29일차 TIL : View 레벨 상태관리 (0) | 2024.11.25 |
[TIL] 99클럽 코테 스터디 28일차 TIL : Flutter 개발 (0) | 2024.11.24 |