Opacity 위젯

Opacity 위젯은 자식 위젯을 부분적으로 또는 완전히 투명하게 만듭니다. 시각적 효과, 전환, 위젯 상태 표시에 유용합니다.

속성

• opacity: 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자
• child: 투명도를 적용할 위젯

일반적인 사용 사례

1. 비활성화 상태:

   Opacity({
     opacity: isEnabled ? 1.0 : 0.5,
     child: Button()
   })
   

2. 페이드 효과:

   Opacity({
     opacity: isVisible ? 1.0 : 0.0,
     child: Content()
   })
   

3. 시각적 계층:

   Column({
     children: [
       Opacity({
         opacity: 1.0,
         child: PrimaryContent()
       }),
       Opacity({
         opacity: 0.7,
         child: SecondaryContent()
       })
     ]
   })
   

모범 사례

1. 성능:

   • 투명도를 적절히 사용
   • 정적 투명도는 알파 색상값 사용 고려
   • 합성 비용 주의

2. 접근성:

   • 충분한 대비 보장
   • 비활성화 상태 고려
   • 상호작용 불가능한 투명 요소 숨기기

3. 애니메이션:

   • 부드러운 전환 사용
   • 성능 영향 고려
   • 다양한 기기에서 테스트

일반적인 패턴

1. 로딩 상태:

   Stack({
     children: [
       Content(),
       Opacity({
         opacity: isLoading ? 0.5 : 0.0,
         child: LoadingOverlay()
       })
     ]
   })
   

2. 모달 오버레이:

   Stack({
     children: [
       MainContent(),
       Opacity({
         opacity: 0.5,
         child: ModalBackground()
       }),
       ModalContent()
     ]
   })
   

3. 디버깅:

   • 다양한 투명도 값 테스트
   • 터치/클릭 영역 확인
   • 대비율 확인