플러터 Visibility 위젯 사용법 및 옵션: 초보자를 위한 완벽 가이드[위젯 숨기기]

 

Flutter의 Visibility 위젯은 특정 위젯을 조건에 따라 보이거나 숨길 때 유용하게 사용할 수 있는 도구입니다.

이 위젯을 활용하면 UI의 동적 변화를 쉽게 관리할 수 있으며, 복잡한 상태 관리 로직을 간단하게 처리할 수 있습니다.

이 블로그 포스트에서는 Visibility 위젯의 기본 사용법과 다양한 옵션을 자세히 설명하여 초보자들도 쉽게 이해하고 활용할 수 있도록 돕겠습니다.

Visibility 위젯이란?

 

Visibility 위젯은 자식 위젯의 표시 여부를 제어할 수 있는 위젯입니다.

특정 조건에 따라 위젯을 화면에 표시하거나 숨길 수 있으며, UI의 가독성을 높이고 사용자의 상호작용을 효율적으로 관리할 수 있습니다.

Visibility 위젯은 visible, maintainState, maintainSize, maintainAnimation 등 여러 가지 속성을 통해 세밀한 조정이 가능합니다.

Visibility 기본 사용법

Visibility 위젯의 기본 사용법은 매우 직관적입니다.

아래 예제에서는 Visibility를 사용하여 버튼을 조건에 따라 표시하거나 숨기는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Visibility Example')),
        body: Center(child: VisibilityDemo()),
      ),
    );
  }
}

class VisibilityDemo extends StatefulWidget {
  @override
  _VisibilityDemoState createState() => _VisibilityDemoState();
}

class _VisibilityDemoState extends State<VisibilityDemo> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Visibility(
          visible: _isVisible,
          child: ElevatedButton(
            onPressed: () {},
            child: Text('I am visible'),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _isVisible = !_isVisible;
            });
          },
          child: Text(_isVisible ? 'Hide Button' : 'Show Button'),
        ),
      ],
    );
  }
}

위 코드에서 Visibility 위젯을 사용하여 버튼의 표시 여부를 제어합니다.

_isVisible 상태 변수를 사용하여 버튼의 표시 상태를 변경하고, 다른 버튼을 클릭하여 상태를 토글합니다.

Visibility 주요 옵션

1. visible

• 설명: 자식 위젯의 표시 여부를 결정합니다. true일 경우 위젯이 화면에 보이며, false일 경우 숨겨집니다. 숨겨진 위젯은 여전히 공간을 차지하지만 화면에 표시되지 않습니다.

2. maintainState

• 설명: 위젯의 상태를 유지할지 여부를 결정합니다. true로 설정하면 위젯이 숨겨져 있어도 상태가 유지됩니다. 예를 들어, 텍스트 입력 필드의 내용이나 스크롤 위치가 유지됩니다. 기본값은 false입니다.

3. maintainSize

• 설명: 숨겨진 위젯의 크기를 유지할지 여부를 결정합니다. true로 설정하면 위젯이 숨겨져도 해당 공간이 차지됩니다. 기본값은 false입니다.

4. maintainAnimation

• 설명: 위젯이 숨겨져 있을 때 애니메이션을 유지할지 여부를 결정합니다. true로 설정하면 애니메이션이 유지되고, 위젯이 다시 나타날 때 애니메이션이 재생됩니다. 기본값은 false입니다.

사용 예제

다음 예제는 Visibility 위젯의 모든 옵션을 활용하여 다양한 방식으로 위젯의 표시 상태를 제어하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Visibility Options Example')),
        body: VisibilityOptionsDemo(),
      ),
    );
  }
}

class VisibilityOptionsDemo extends StatefulWidget {
  @override
  _VisibilityOptionsDemoState createState() => _VisibilityOptionsDemoState();
}

class _VisibilityOptionsDemoState extends State<VisibilityOptionsDemo> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Visibility(
          visible: _isVisible,
          maintainState: true,
          maintainSize: true,
          maintainAnimation: true,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            child: Center(child: Text('I am visible')),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _isVisible = !_isVisible;
            });
          },
          child: Text(_isVisible ? 'Hide Container' : 'Show Container'),
        ),
      ],
    );
  }
}

이 예제에서는 Visibility 위젯의 다양한 옵션을 설정하여 위젯의 표시 상태를 조정하고, 위젯이 숨겨져 있을 때도 상태와 크기, 애니메이션이 유지되도록 합니다.

 

 

Visibility 위젯은 Flutter에서 위젯의 표시 여부를 효율적으로 제어할 수 있는 강력한 도구입니다.

기본적인 사용법과 다양한 옵션을 활용하여 UI를 동적으로 조정하는 방법을 살펴보았습니다.

이 가이드가 여러분의 Flutter 개발에 도움이 되기를 바랍니다.

 

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱