플러터에서는 Widget의 Visibility를 동적으로 조절하여 화면에서 보이거나 보이지 않도록 할 수 있습니다. 이를 통해 사용자 인터페이스를 동적으로 변경할 수 있는 유연한 앱을 만들 수 있습니다.

Visibility 위젯

플러터에서 Visibility 위젯은 child 속성을 통해 자식 위젯을 감싸고, visible 속성을 통해 해당 위젯의 표시 여부를 조절할 수 있습니다. true로 설정하면 자식 위젯이 화면에 표시되고, false로 설정하면 화면에 표시되지 않습니다.

Visibility(
  visible: _isVisible,
  child: Container(
    // 자식 위젯 설정
  ),
)

위 예제에서 _isVisible 변수의 값을 변경함으로써 해당 Container 위젯이 화면에 표시되거나 숨겨지도록 할 수 있습니다.

조건부 Visibility

흔히 사용되는 패턴 중 하나는 조건부 Visibility입니다. 예를 들어, 사용자가 버튼을 클릭하거나 특정 조건을 만족하는 경우에만 특정 위젯을 보이게 하고 싶을 때, 이 기능을 사용할 수 있습니다.

Visibility(
  visible: _isButtonClicked,
  child: RaisedButton(
    // 버튼 설정
  ),
)

위 코드에서 _isButtonClicked 변수가 true일 때만 RaisedButton이 화면에 표시됩니다.

토글 버튼을 통한 Visibility 조절

토글 버튼과 함께 Visibility를 사용하여, 사용자가 버튼을 토글할 때마다 특정 위젯을 보이거나 숨길 수 있습니다.

Visibility(
  visible: _isVisible,
  child: ToggleButton(
    // 토글 버튼 설정
    onPressed: () {
      setState(() {
        _isVisible = !_isVisible;
      });
    },
  ),
)

위 코드에서 _isVisible 변수를 통해 해당 위젯의 화면 표시 여부를 토글할 수 있습니다.

위와 같이 Visibility 위젯을 활용하여, 플러터 앱에서 동적으로 위젯을 보이거나 숨길 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 앱의 유연성을 높일 수 있습니다.

참고 자료

• 플러터 공식 문서 - Visibility 클래스