[flutter] 플러터에서 Visibility 설정을 이용한 튜토리얼 화면 구성하기

18 Dec 2023

flutter

플러터에서 화면을 구성할 때, Visibility 위젯은 사용자에게 표시할 위젯을 손쉽게 조절할 수 있는 강력한 도구입니다. 이번 튜토리얼에서는 Visibility를 활용하여 화면을 동적으로 제어하는 방법에 대해 알아보겠습니다.

Visibility 위젯

Visibility 위젯은 자식 위젯의 가시성(visibility)을 제어할 수 있는 위젯입니다. 자식 위젯을 화면에 표시하거나 감출 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.

Visibility 위젯의 중요한 속성으로는:

visible: 자식 위젯을 표시할지 여부를 나타내는 불리언 값
child: 표시할 자식 위젯

예를 들어, 버튼을 클릭할 때마다 텍스트가 표시되거나 감춰지도록 만들 수 있습니다.

예제

아래는 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 = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Visibility 예제'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Visibility(
                visible: _isVisible,
                child: Text(
                  '텍스트가 표시됩니다.',
                ),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _isVisible = !_isVisible;
                  });
                },
                child: Text(
                  _isVisible ? '감추기' : '표시하기',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 사용자가 버튼을 클릭할 때마다 텍스트를 표시하거나 감추는 간단한 앱을 구현한 예제입니다.

결론

Visibility를 활용하면 화면을 동적으로 제어하는 것이 간단해집니다. 사용자에게 필요한 정보만 표시하여 앱의 사용성을 높일 수 있습니다. Visibility 위젯을 잘 활용하여 사용자 경험을 향상시키는 플러터 앱을 만들어보세요.