Opacity class
자식 위젯을 부분적으로 투명하게 만드는 위젯입니다.
이 클래스는 자식을 중간 버퍼에 칠한 다음 자식을 다시 부분적으로 투명한 장면에 혼합합니다.
불투명도 값이 0.0과 1.0이 아닌 경우, 이 클래스는 자식 요소를 중간 버퍼에 페인팅해야 하므로 상대적으로 비용이 많이 듭니다. 불투명도 값이 0.0이면 자식 요소는 전혀 페인팅되지 않습니다. 불투명도 값이 1.0이면 자식 요소는 중간 버퍼 없이 즉시 페인팅됩니다.
기본적으로 투명한 배경을 가진 중간 버퍼가 존재하면 일부 자식 위젯의 동작이 달라질 수 있습니다. 예를 들어, BackdropFilter 자식 위젯은 이 위젯과 배경 자식 위젯 사이의 콘텐츠에만 필터를 적용할 수 있으며, 원하는 결과를 얻으려면 BackdropFilter.blendMode 속성을 조정해야 할 수 있습니다.
공식 문서 코드
Opacity 위젯은 하위 위젯의 투명도를 조절하는 것을 도와주는 위젯이다. 사용은 이렇게 하는데
Opacity(
opacity: visible ? 1.0 : 0.0,
child: const Text("Now you see me, now you don't!"),
),opacity 값에다가 int 값으로 자신이 원하는 투명도를 입력해주면 되는 간단한 위젯이다.
하위 속성도 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| opacity | double | - | 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 값. 자식의 투명도를 조절함. 성능상 0이나 1이 가장 빠름. (필수) |
| alwaysIncludeSemantics | bool | false | true로 설정하면 자식 위젯이 보이지 않아도 접근성 정보가 유지됨. |
일단 공식 문서에도 나와 있다시 불투명도가 0.0~1.0 사이인 단일 이미지 나 색상 만 합성해야 하는 경우 불투명도 위젯 없이 직접 사용하는 것이 훨씬 빠르다고 한다. 그래서 예제에서도 Opacity 로 감싸지 않고 그냥 쌩으로 먹인 모습을 볼 수 있다.
color: const Color.fromRGBO(255, 255, 255, 0.5),
또한 불투명도를 0으로 설정해도 Opacity 위젯의 하위 항목에 히트 테스트가 적용되지 않는다. 이는 사용자에게 혼란을 줄 수 있는데 사용자는 아무것도 보지 못하고 Opacity 위젯이 숨겨져 있는 인터페이스 영역이 비대화형이라고 생각할 수 있기 때문이다.
이러한 문제를 방지하려면 불투명도를 0으로 설정할 때 IgnorePointer 위젯을 사용하는 것이 좋다 . 이렇게 하면 하위 트리의 자식 요소와의 상호 작용을 방지할 수 있다고 한다.
여기서 재밌는 것이 하나 있는데 하위 속성인 alwaysIncludeSemantics 이다. 이거 설명만 보면 뭔가 싶을텐데 정말 간단히 말하자면
완전히 투명해지면(opacity: 0.0), 시각적으로 안 보일 뿐 아니라 스크린 리더 같은 접근성 도구에도 안 보이게 되는데 어떤 경우에는 안 보여도 접근성 정보는 유지하고 싶을 때가 있다.
그럴 때 alwaysIncludeSemantics 을 true 로 설정하면, 투명하더라도 시각장애인을 위한 정보는 살아있게 할 수 있다.
이렇게 Opacity 에 대해서 알아보았는데 솔직히 난 그냥 withAlpha 나 withOpacity 쓸란다.
