[flutter] 플러터에서 Visibility 속성을 이용한 화면 고정 기능 구현하기

18 Dec 2023

flutter

플러터 앱을 개발하다 보면 특정 상황에서 화면의 일부를 숨기거나 보이게 하고 싶을 때가 있습니다. 이를 위해 플러터에서는 Visibility 위젯을 활용할 수 있습니다.

Visibility 위젯

Visibility 위젯은 자식 위젯을 화면에 보이거나 숨기는 데 사용됩니다. 이를 통해 화면을 동적으로 조정할 수 있고, 사용자 경험을 향상시킬 수 있습니다.

예를 들어, 특정 버튼을 눌렀을 때 추가적인 설정 메뉴를 보여주고 숨기거나, 특정 조건에 따라 화면의 일부를 숨기는 경우 등에 활용할 수 있습니다.

예제

다음은 Visibility 위젯을 활용하여 버튼을 눌렀을 때 텍스트를 보이거나 숨기는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isVisible = false;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Visibility Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  _toggleVisibility();
                },
                child: Text('Toggle Visibility'),
              ),
              Visibility(
                visible: _isVisible,
                child: Container(
                  padding: EdgeInsets.all(16.0),
                  margin: EdgeInsets.all(16.0),
                  color: Colors.blue,
                  child: Text(
                    'Hello, World!',
                    style: TextStyle(
                      fontSize: 24.0,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드를 실행하면 ‘Toggle Visibility’ 버튼을 눌렀을 때 ‘Hello, World!’ 텍스트가 보이거나 숨겨지는 화면이 구현됩니다.

Visibility 위젯의 visible 속성을 조절하여 해당 자식 위젯을 보이거나 숨길 수 있습니다.

마치며

플러터의 Visibility 위젯을 활용하면 화면의 일부를 동적으로 처리하는 기능을 쉽게 구현할 수 있습니다. 이를 통해 사용자에게 편리한 경험을 제공할 수 있으며, 앱의 유저 인터페이스를 보다 유연하게 구현할 수 있습니다.