[flutter] 플러터에서 사용자 정의 Visibility 속성 설정하기

18 Dec 2023

flutter

플러터(Flutter)는 UI를 빌드하는 데 사용되는 Google의 모바일 앱 SDK입니다. 여기에서는 플러터 앱에서 사용자 정의 Visibility 속성을 설정하는 방법에 대해 알아보겠습니다.

1. 구성 요소 추가

먼저, 사용자 정의 Visibility 속성을 설정할 구성 요소를 추가해야 합니다. 예를 들어, 아래와 같이 Container를 사용하여 사용자 정의되고 동적으로 변경 가능한 Visibility를 가진 버튼을 만들어 보겠습니다.

Container(
  child: _isVisible ? ElevatedButton(
    onPressed: () {
      // 버튼이 클릭되었을 때 수행할 동작
    },
    child: Text('숨겨진 버튼'),
  ) : SizedBox.shrink(),  // 버튼을 숨김
)

위 예시에서 ElevatedButton은 해당 Visibility 속성에 따라 표시되거나 숨겨집니다.

2. Visibility 속성 제어

다음으로, 이전 예제에서 사용된 _isVisible와 같은 boolean 변수를 사용하여 Visibility를 제어합니다.

bool _isVisible = true; // 초기 값은 보임

void _toggleVisibility() {
  setState(() {
    _isVisible = !_isVisible; // 상태를 토글하여 보이거나 숨김
  });
}

위의 코드에서 _toggleVisibility 함수는 버튼을 클릭할 때 _isVisible 값을 토글하여 버튼의 가시성을 변경합니다.

3. 완성된 예제

이제 모든 구성 요소를 함께 조합하여 완성된 예제를 확인할 수 있습니다.

class MyCustomVisibilityWidget extends StatefulWidget {
  @override
  _MyCustomVisibilityWidgetState createState() =>
      _MyCustomVisibilityWidgetState();
}

class _MyCustomVisibilityWidgetState extends State<MyCustomVisibilityWidget> {
  bool _isVisible = true;

  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _isVisible
          ? ElevatedButton(
              onPressed: () {
                // 버튼이 클릭되었을 때 수행할 동작
              },
              child: Text('숨겨진 버튼'),
            )
          : SizedBox.shrink(),
    );
  }
}

결론

이제, 사용자 정의 Visibility 속성을 설정하는 방법에 대한 이해를 높일 수 있었습니다. 사용자 정의 Visibility 속성을 활용하여 앱의 동적 UI 요소를 제어하는 방법을 익혔습니다.