BottomSheet를 둥글게 Shape을 설정하다
하얀 배경에 하얀 색을 입히니 제대로 표시 안 되는 문제가 발생.
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.vertical(top: Radius.circular(15),
),
),
clipBehavior: Clip.antiAliasWithSaveLayer,
...
)다음과 같이 ClipBehavior를 설정 해주어야 함.
- 요약
Flutter는 이제 몇 가지 특수 위젯(예: ClipRect)을 제외하고 기본적으로 자르지 않습니다. 클립 없음 기본값을 재정의하려면 위젯 구성에서 clipBehavior를 명시적으로 설정하십시오.
Clip은 Flutter의 속도 저하의 한 요인이며, saveLayer를 각각의 Clip에 호출함으로(간단한 직사각형임에도 불구하고) offscreen render target을 생성하고 렌더 타켓 전환에 약 1ms가 소요 될 수 있기에 특히 구형 장치에서 비용이 많이 발생 됨.
saveLayer 호출을 제외하고도 클립은 복원 될 때까지 모든 후속 그리기에 적용되기 때문에 지속적인 비용을 증가 시킴. 따라서 단일 클립은 수백번의 그리기 작업에서 성능을 저하시킴.
또한 성능적 문제 이외에도 Flutter는 Clip이 한 곳에서 관리 되지 않아 정확한 위치에 saveLayer가 삽입되지 못하고 아무런 bleeding edge artifacs를 고치지 못한채 비용만 증가시킴.
따라서 이 문제를 해결하고자 clipBehavior 컨트롤을 통합함.
다음 위젯을 제외하고 성능을 절약하기 위해 대부분의 위젯에 대한 기본 ClipBehavior은 Clip.none으로 설정함.
- ClipPath defaults to Clip.antiAlias
- ClipRRect defaults to Clip.antiAlias
- ClipRect defaults to Clip.hardEdge
- Stack defaults to Clip.hardEdge
- EditableText defaults to Clip.hardEdge
- ListWheelScrollView defaults to Clip.hardEdge
- SingleChildScrollView defaults to Clip.hardEdge
- NestedScrollView defaults to Clip.hardEdge
- ShrinkWrappingViewport defaults to Clip.hardEdge적용 방식
- 콘텐츠를 자를 필요 없을 경우 그대로.
- 앱의 성능에 긍정적인 영향
- 작은 곡선이 필요하다면
Clip.hardEdge- 대부분의 일반적인 경우
- 부드러운 곡선이 필요하다면
Clip.antiAlias- 약간 높은 비용으로 더 매끈한 곡선을
- 예전과 같은 곡선이 필요하다면
Clip.antiAliasWithSaveLayer- 가장 많은 비용이 듬. 거의 사용할 일 없음.
- 이미지가 매우 다른 배경색에 오버레이 된 경우 정도..?
- 그렇다면 차라리 색상이 겹치는 걸 방지할 방법을 먼저 고려하는 걸 추천.
Stackoverflow에서 가져 온 코드는 가장 많은 비용을 발생시키는 코드였다.
간단히 바텀시트로 설정페이지 띄우는 용도라 큰 비용도 그리 상관 없지만
설정 완료 후 버벅이며 내려가는 이유가 이 코드 때문 일수도 있겠다 싶었다.
조금.. 느린것 같기도..?
어차피 곡선은 티 안나니 Clip.hardEdge로 설정.
끝.
