Visibility 뭐야

Visibility는 Flutter의 UI 프레임워크에서 사용되는 위젯입니다. 이 위젯은 자식 위젯의 가시성을 제어할 수 있는 방법을 제공합니다. Visibility 위젯은 주로 다음 세 가지 속성을 사용하여 자식 위젯의 가시성을 조절합니다.

visible: 이 속성은 true 또는 false 값으로 설정됩니다. true로 설정하면 자식 위젯이 화면에 표시되고, false로 설정하면 자식 위젯이 숨겨집니다.
replacement: 이 속성은 visible이 false일 때 표시할 위젯을 지정합니다. 기본값은 const SizedBox.shrink()입니다. 이렇게 하면 자식 위젯이 화면에서 제거되고 공간도 차지하지 않게 됩니다.
maintainState: 이 속성은 true 또는 false 값으로 설정됩니다. true로 설정하면 자식 위젯의 상태를 유지하며, false로 설정하면 가시성이 변경될 때 위젯의 상태가 소멸됩니다. 기본값은 false입니다.
예를 들어, Visibility 위젯을 사용하여 특정 조건에 따라 텍스트 위젯을 표시하거나 숨기는 방법은 다음과 같습니다.

Visibility(
  visible: _isVisible, // _isVisible 변수에 따라 위젯의 가시성이 결정됩니다.
  child: Text("Hello, World!"),
)

여기서 _isVisible는 bool 타입의 변수로, true 또는 false 값을 가질 수 있습니다. 이 값에 따라 텍스트 위젯이 표시되거나 숨겨집니다.
Visibility 위젯을 사용하는 다른 예를 살펴봅시다. 이 예제에서는 'Show/Hide' 버튼을 사용하여 텍스트 위젯의 가시성을 전환합니다.

먼저, Flutter 앱의 기본 구조를 생성합니다.

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: MyHomePage(),
      ),
    );
  }
}

다음으로, StatefulWidget을 사용하여 MyHomePage 클래스를 정의하고, _isVisible 변수와 showHideText() 함수를 추가합니다. 이 함수는 'Show/Hide' 버튼이 클릭될 때 호출되어 텍스트 위젯의 가시성을 전환합니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isVisible = true;

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

그런 다음, build 메서드에서 Column 위젯을 사용하여 'Show/Hide' 버튼과 Visibility 위젯을 구성합니다.

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Visibility(
            visible: _isVisible,
            child: Text("This text can be hidden or shown."),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: showHideText,
            child: Text("Show/Hide"),
          ),
        ],
      ),
    );
  }
}

이제 앱을 실행하면 'Show/Hide' 버튼을 사용하여 텍스트 위젯의 가시성을 전환할 수 있습니다. 이렇게 하면 사용자와 상호 작용하면서 동적으로 위젯의 가시성을 제어할 수 있습니다.

코드 전체는 다음과 같습니다.

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: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isVisible = true;

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Visibility(
            visible: _isVisible,
            child: Text("This text can be hidden or shown."),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: showHideText,
            child: Text("Show/Hide"),
          ),
        ],
      ),
    );
  }
}