플러터 앱을 개발하다 보면 사용자 인터페이스의 특정 요소를 조건에 따라 표시하거나 숨기는 기능이 필요할 때가 있습니다. 이때 Visibility 위젯을 사용하여 간단하게 조건부 레이아웃을 구성할 수 있습니다.

Visibility 속성 소개

Visibility 위젯은 visible 및 invisible로 설정하여 해당 요소를 화면에 표시할지 여부를 결정합니다. 또한 maintainSize, maintainAnimation, maintainState 등의 속성을 설정하여 표시 여부 외에도 요소가 차지하는 공간, 애니메이션 및 상태를 유지할지 여부를 지정할 수 있습니다.

조건부 레이아웃 구성하기

예를 들어, 특정 버튼을 눌렀을 때 이미지가 화면에 보이게 하려면 다음과 같이 Visibility 위젯을 활용할 수 있습니다.

bool isVisible = false;

Widget build(BuildContext context) {
  return Column(
    children: [
      ElevatedButton(
        onPressed: () {
          setState(() {
            isVisible = !isVisible;
          });
        },
        child: Text('Toggle Image'),
      ),
      Visibility(
        visible: isVisible,
        maintainSize: true,
        maintainAnimation: true,
        maintainState: true,
        child: Image.asset('assets/image.png'),
      ),
    ],
  );
}

위의 예제에서는 isVisible 변수를 사용하여 이미지의 표시 여부를 결정하고, Visibility 위젯의 visible 속성에 해당 변수를 바인딩하여 조건에 따라 이미지를 화면에 표시하거나 숨길 수 있습니다.

마무리

Visibility 위젯을 활용하여 플러터 앱에서 조건에 따라 레이아웃을 동적으로 조절할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 필요에 따라 요소를 유연하게 제어할 수 있습니다.

위의 예제를 참고하여 Visibility 위젯을 사용하여 플러터 앱에서 조건부 레이아웃을 구성해 보세요.