[flutter] 플러터에서 Visibility를 이용한 투명한 위젯 구성하기

18 Dec 2023

flutter

플러터(Flutter)에서는 Visibility 위젯을 사용하여 화면에 위젯을 보이거나 감출 수 있습니다. 이 기능을 활용하면 사용자의 상호작용에 따라 동적으로 위젯을 표시하거나 숨길 수 있습니다. 여기서는 Visibility를 이용하여 투명한 위젯을 구성하는 방법에 대해 알아보겠습니다.

Visibility 위젯

Visibility 위젯은 visible, invisible, gone 세 가지 모드로 설정할 수 있습니다.

visible: 위젯을 표시합니다.
invisible: 위젯을 투명하게 만들어 공간은 유지하지만 보이지 않습니다.
gone: 위젯을 숨깁니다.

이러한 모드를 이용하여 화면에 동적으로 위젯을 제어할 수 있습니다.

Visibility(
  visible: _isVisible,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

위 예제에서 _isVisible는 bool 타입의 변수로, 해당 변수의 값에 따라 위젯이 보이거나 숨겨집니다.

투명한 위젯 만들기

Visibility 위젯을 투명하게 만들기 위해서는 visible 모드 대신 invisible 모드를 사용하면 됩니다.

Visibility(
  maintainState: true,
  maintainAnimation: true,
  maintainSize: true,
  maintainSemantics: true,
  maintainInteractivity: true,
  maintainSemantics: true,
  maintainAccessibility: true,
  visible: _isVisible,
  maintainSemanticsOrder: true,
  child: Opacity(
    opacity: 0.5, // 0.0(완전 투명) ~ 1.0(불투명)
    child: Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
  ),
)

위 예시에서 Opacity 위젯을 사용하여 투명도를 설정하고, visible 대신에 invisible 모드를 사용하여 투명한 위젯을 만들었습니다.

이처럼 Visibility와 Opacity를 조합하여 플러터 앱에서 투명한 위젯을 만들 수 있습니다. 동적으로 위젯을 제어하면서 사용자에게 보다 나은 UI/UX를 제공할 수 있습니다.

플러터의 Visibility와 Opacity 위젯에 대한 더 자세한 정보는 공식 문서를 참고하시기 바랍니다.