플러터(Flutter) 애플리케이션을 개발하다 보면 웹뷰를 관리해야 하는 경우가 있습니다. 예를 들어 특정 조건에 따라 웹뷰를 숨기거나 보여줘야 하는 경우가 그 예입니다. 플러터에서는 Visibility 속성을 이용하여 이를 쉽게 관리할 수 있습니다.

Visibility 속성

Visibility 위젯은 자식 위젯의 가시성을 제어하는 데 사용됩니다. 현재 화면에 표시할지 여부를 설정할 수 있으며, 이를 통해 조건에 따라 웹뷰를 관리할 수 있습니다.

여기에는 visible과 invisible 상태가 있습니다. visible는 자식 위젯을 표시하고, invisible는 자식 위젯을 화면에 표시하지 않습니다.

Visibility(
  visible: _isWebViewVisible,
  child: WebView(
    initialUrl: 'https://example.com',
    javascriptMode: JavascriptMode.unrestricted,
  ),
),

위 예제에서 _isWebViewVisible는 웹뷰의 가시성을 제어하는 상태를 나타내며, 이에 따라 웹뷰를 화면에 표시하거나 숨길 수 있습니다.

예제

다음은 Visibility 속성을 이용하여 간단한 웹뷰를 화면에 표시하는 예제입니다. 이 예제에서는 버튼을 클릭함에 따라 웹뷰를 숨기고 보여주는 동작을 구현하였습니다.

bool _isWebViewVisible = true;

Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      ElevatedButton(
        onPressed: () {
          setState(() {
            _isWebViewVisible = !_isWebViewVisible;
          });
        },
        child: Text(_isWebViewVisible ? 'Hide WebView' : 'Show WebView'),
      ),
      Visibility(
        visible: _isWebViewVisible,
        child: WebView(
          initialUrl: 'https://example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    ],
  );
}

위의 예제에서는 ElevatedButton을 통해 웹뷰의 가시성을 제어하는 버튼을 생성하고, 클릭 이벤트에 따라 _isWebViewVisible 상태를 변경하여 웹뷰의 가시성을 조절합니다.

위와 같이 Visibility 속성을 이용하면 웹뷰를 쉽게 숨기고 보여줄 수 있으며, 화면의 가시성을 동적으로 관리할 수 있습니다. 이는 플러터 개발에서 유용하게 활용될 수 있는 기능입니다.

마무리

플러터에서 Visibility 속성을 이용하여 웹뷰를 관리하는 방법에 대해 알아보았습니다. 이를 통해 화면 요소의 동적인 가시성 제어가 가능해지며, 더 나아가 사용자 경험을 향상시킬 수 있는 다양한 기능을 구현할 수 있습니다.