Opacity

Flutter에서 투명도 관리하기: Opacity

플러터에서 Opacity 위젯을 사용하면 자식 위젯의 투명도를 조절할 수 있습니다. 이를 통해 다양한 시각적 효과를 만들 수 있으며, UI의 동적인 인터랙션을 설계할 때 특히 유용합니다. 예를 들어, 사용자의 상호작용에 따라 위젯을 점차적으로 보이거나 숨길 수 있습니다.

주요 속성

• opacity: 위젯의 투명도를 결정하는 속성으로, 0.0에서 1.0 사이의 값을 가집니다. 0.0은 완전히 투명을 의미하며, 1.0은 완전히 불투명을 의미합니다. 불투명도가 0.0인 경우 자식 위젯이 그려지지 않으며, 1.0인 경우 자식 위젯이 즉시 그려집니다.

• alwaysIncludeSemantics: 이 속성이 true로 설정되면, 위젯이 투명해도 시맨틱 정보가 계속 포함됩니다. 접근성을 위한 설정에서 유용하게 사용될 수 있습니다.

주요 활용도

• 동적 효과 구현: 사용자의 상호작용에 따라 특정 UI 요소를 점진적으로 표시하거나 숨김으로써 동적인 사용자 경험을 제공합니다.

• 시각적 초점 조절: 중요하지 않은 요소의 투명도를 높여 사용자의 시각적 초점을 중요 요소에 맞추도록 돕습니다.

• 애니메이션과의 통합: 애니메이션 효과와 함께 사용하여 부드러운 전환 효과를 만들어낼 수 있습니다.

코드 예제

아래 예제는 사용자가 버튼을 클릭할 때마다 텍스트의 투명도를 변경하는 간단한 인터랙션을 보여줍니다.

double opacityLevel = 1.0;

void _changeOpacity() {
  setState(() {
    opacityLevel = opacityLevel == 0 ? 1.0 : 0.0;
  });
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Opacity(
        opacity: opacityLevel,
        child: Text('이 텍스트의 투명도를 조절해보세요!'),
      ),
      RaisedButton(
        onPressed: _changeOpacity,
        child: Text('투명도 변경'),
      )
    ],
  );
}

추가 팁

• 성능 고려: Opacity 위젯은 렌더링 성능에 영향을 줄 수 있으므로, 필요할 때만 사용하고, 가능한 최소한의 위젯 트리에 적용하는 것이 좋습니다.

• 애니메이션 효과 사용: AnimatedOpacity를 사용하면 Opacity를 좀 더 효과적으로 애니메이션 처리할 수 있습니다.

Opacity 위젯을 사용할 때 주의할 점은 다음과 같습니다:

• 성능 비용:
  • 불투명도 값이 0.0과 1.0이 아닌 경우, Opacity 위젯은 자식 위젯을 중간 버퍼에 그려야 하므로 성능 비용이 큽니다.
• 투명 배경의 중간 버퍼:
  • Opacity 위젯이 중간 버퍼를 사용하기 때문에, 일부 자식 위젯이 다르게 동작할 수 있습니다. 예를 들어, BackdropFilter 자식은 이 위젯과 배경 자식 사이의 내용에만 필터를 적용할 수 있으며, 원하는 결과를 얻기 위해 BackdropFilter.blendMode 속성을 조정해야 할 수도 있습니다.
• 애니메이션 성능:
  • Opacity 위젯을 직접 애니메이션화하면 해당 위젯(및 하위 트리)이 매 프레임마다 다시 빌드되므로 비효율적입니다. 대신 다음과 같은 대안 위젯을 사용하는 것이 좋습니다:
    • AnimatedOpacity: 내부적으로 애니메이션을 사용하여 불투명도를 효율적으로 애니메이션화합니다.
    • FadeTransition: 제공된 애니메이션을 사용하여 불투명도를 효율적으로 애니메이션화합니다.
• 투명 이미지 성능:
  • 단일 이미지나 색상에만 불투명도를 적용해야 하는 경우, Opacity 위젯을 사용하는 것보다 직접 사용하는 것이 훨씬 빠릅니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

    Image.network(
      '<https://raw.githubusercontent.com/flutter/assets-for-api-docs/main/packages/diagrams/assets/blend_mode_destination.jpeg>',
      color: const Color.fromRGBO(255, 255, 255, 0.5),
      colorBlendMode: BlendMode.modulate
    )
    

  • Opacity 위젯을 사용하면 비용이 많이 드는 오프스크린 버퍼가 사용될 수 있습니다.
• 히트 테스트:
  • 불투명도를 0으로 설정해도 Opacity 위젯의 자손들에 대한 히트 테스트는 적용됩니다. 이는 사용자가 아무것도 보지 못해 해당 인터페이스 영역이 비활성화되었다고 믿을 수 있어 혼란을 줄 수 있습니다.
  • IgnorePointer 위젯을 사용하여 불투명도가 0인 경우 상호작용을 방지할 수 있습니다. 예를 들어:

    Opacity(
      opacity: 0.0,
      child: IgnorePointer(
        child: ElevatedButton(
          onPressed: () {
            print("Button pressed");
          },
          child: Text("Invisible Button"),
        ),
      ),
    )
    

관련 자료

• AnimatedOpacity: Opacity 변화에 애니메이션 효과를 추가합니다.
• Visibility: 위젯을 조건부로 표시하거나 숨기는 데 사용합니다. 자식 위젯을 더 효율적으로 숨기거나 표시할 수 있는 위젯으로, 부분적인 투명도 값을 허용하는 Opacity와 달리, 완전히 숨기거나 보이는 두 가지 상태만 지원합니다. Visibility.maintain 생성자는 Opacity 위젯의 값이 0.0 또는 1.0인 경우와 동일한 효과를 냅니다.
• FadeTransition: 위젯의 투명도를 애니메이션으로 조절할 수 있습니다.
• SliverOpacity: 슬리버 컨텐츠의 투명도를 조절할 수 있는 슬리버 버전의 Opacity 위젯입니다. 리스트나 그리드 등의 스크롤 가능한 컨텐츠에서도 투명도 효과를 적용할 수 있습니다.

추가 참고 리소스

• Opacity (Flutter Widget of the Week)
• 공식 문서 - Opacity