[Flutter] 플러터 - Visibility vs Opacity 위젯 숨기기와 투명도 조절

Visibility 위젯

Visibility 위젯은 자식 위젯을 화면에서 나타내거나 숨기는데 사용됩니다. visible 프로퍼티를 통해 자식 위젯의 표시 여부를 제어할 수 있습니다.

Visibility(
  visible: true, // true면 나타나고, false면 숨김
  child: YourChildWidget(),
)

 

Opacity 위젯

Opacity 위젯은 자식 위젯을 투명하게 만듭니다. opacity 프로퍼티를 사용하여 투명도를 조절할 수 있습니다.

Opacity(
  opacity: 0.5, // 0.0에서 1.0까지의 값으로 투명도 조절
  child: YourChildWidget(),
)

 

Visibility vs Opacity

공통점

• 두 위젯 모두 자식 위젯을 화면에서 제어하는 데 사용됩니다.
• 각각의 속성을 이용하여 나타나거나 숨기는 효과를 줄 수 있습니다.

차이점 -> "공간을 차지하느냐"

• Visibility: 자식 위젯이 화면에서 사라지면 해당 영역도 사라집니다. 즉, 레이아웃에 영향을 줍니다.
• Opacity: 자식 위젯은 화면에서 사라지지 않고 투명하게만 됩니다. 따라서 레이아웃에 영향을 주지 않고 투명도만 조절합니다.