플러터(Flutter)에서 UI 요소를 화면에 렌더링할 때, 때로는 특정 조건에 따라 해당 요소를 화면에 표시하거나 숨기고 싶을 때가 있습니다. 이때 Visibility 속성을 사용하여 간단하게 이를 제어할 수 있습니다.

Visibility 속성 이해

Visibility 위젯은 자식 요소의 가시성을 제어하는 데 사용됩니다. visible, invisible, gone의 세 가지 모드를 가지고 있습니다.

• visible: 자식 요소를 보여줍니다.
• invisible: 자식 요소를 화면상에서 숨긴 채 차지한 영역을 유지합니다. 다른 요소가 그 영역을 차지할 수 있습니다.
• gone: 자식 요소를 화면에서 숨기고 차지한 영역도 해제합니다.

Visibility 속성 사용하기

아래는 Visibility 속성을 사용하여 특정 조건에 따라 요소를 보이거나 숨기는 예제입니다.

Visibility(
  visible: condition, // 특정 조건에 따라 true 또는 false로 설정
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

위 예제에서 condition은 요소를 표시할지 여부를 결정하는 조건입니다. 조건이 true이면 Container가 표시되고, false이면 숨겨집니다.

마무리

플러터에서 Visibility 속성을 사용하면 화면에 특정 요소를 동적으로 제어할 수 있습니다. 이를 통해 UI를 보다 유연하고 맞춤화된 형태로 제공할 수 있습니다.

참고 자료: Flutter Visibility Class - official documentation