플러터 앱을 개발하다 보면 특정 기능을 숨기거나 보이게 만들어야 하는 경우가 있습니다. 예를 들어 검색 필터를 적용하려면, 사용자가 필터를 선택할 수 있는 옵션 버튼을 화면에 표시하고, 필터가 활성화되었을 때 추가적인 입력 필드를 보여줘야 합니다. 이러한 기능을 구현하기 위해서는 Visibility 위젯을 사용하여 UI 요소를 동적으로 표시하거나 숨길 수 있습니다.

Visibility 위젯

Visibility 위젯은 자식 위젯을 현재 화면에 표시할지 여부를 제어하는 데 사용됩니다. 이 위젯은 visible 또는 invisible 여부를 설정하여 자식 위젯을 화면에 보이거나 숨길 수 있습니다.

아래는 Visibility 위젯을 사용하여 검색 필터를 제어하는 예제 코드입니다.

Visibility(
  visible: isFilterVisible,
  child: Column(
    children: [
      // 필터를 나타내는 UI 요소들
      TextField(
        // 추가적인 입력 필드
      ),
      // 다른 필터 UI 요소들
    ],
  ),
)

위의 예제 코드에서 isFilterVisible는 필터가 현재 화면에 표시되어야 하는지를 나타내는 불리언 변수입니다. Visibility 위젯은 이 변수의 값에 따라 자식 위젯을 화면에 표시할지 여부를 결정합니다.

예제

아래 예제는 switch 위젯을 사용하여 필터의 가시성을 제어하는 방법을 보여줍니다.

bool isFilterVisible = false;

Column(
  children: [
    Switch(
      value: isFilterVisible,
      onChanged: (value) {
        setState(() {
          isFilterVisible = value;
        });
      },
    ),
    Visibility(
      visible: isFilterVisible,
      child: Column(
        children: [
          // 필터를 나타내는 UI 요소들
          TextField(
            // 추가적인 입력 필드
          ),
          // 다른 필터 UI 요소들
        ],
      ),
    ),
  ],
)

위의 코드에서 Switch 위젯은 isFilterVisible 변수를 토글하여 필터의 가시성을 제어합니다. 변경된 값에 따라 Visibility 위젯이 자식 위젯을 화면에 표시하거나 숨깁니다.

결론

플러터에서 Visibility 위젯을 이용하면 원하는 조건에 따라 UI 요소를 동적으로 표시하거나 숨길 수 있습니다. 이를 활용하여 검색 필터와 같은 기능을 구현할 때, 사용자 경험을 향상시키고 불필요한 정보를 감추는 데 도움이 됩니다. 이러한 기능을 구현함으로써 사용자는 필요할 때 필터를 사용하고, 필요하지 않을 때는 숨길 수 있어 편리함을 누릴 수 있습니다.

참고: Flutter - Visibility class