[flutter] 플러터에서 Visibility 설정을 이용한 동적 UI 구성하기

18 Dec 2023

flutter

플러터에서는 Visibility 위젯을 사용하여 UI 요소를 동적으로 보이거나 숨길 수 있습니다. 이를 활용하여 사용자 상호작용에 따라 화면을 동적으로 변경할 수 있습니다. 이번 포스트에서는 Visibility를 설정하여 동적 UI를 만드는 방법을 살펴보겠습니다.

Visibility 위젯

Visibility 위젯은 하위 자식 위젯을 숨기거나 보이게 할 수 있는 유용한 위젯입니다. Visibility 위젯은 일반적으로 visible 또는 invisible 상태로 설정할 수 있습니다.

동적 UI 구성하기

예를 들어, 사용자가 버튼을 클릭할 때, 특정 위젯을 보이거나 숨기고 싶은 경우에는 Visibility 위젯을 사용하여 UI를 동적으로 변경할 수 있습니다. 아래는 Visibility를 사용하여 동적 UI를 구성하는 예시입니다.

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;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic UI with Visibility'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Visibility(
                visible: _isVisible,
                child: Text(
                  'Hello, Flutter!',
                  style: TextStyle(fontSize: 24),
                ),
              ),
              ElevatedButton(
                onPressed: _toggleVisibility,
                child: Text(_isVisible ? 'Hide' : 'Show'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위의 예시에서는 Visibility 위젯을 사용하여 ‘Hello, Flutter!’ 텍스트를 보이거나 숨기는 동적 UI를 만들었습니다.

마무리

플러터에서 Visibility 위젯을 활용하여 동적 UI를 구성하는 방법에 대해 알아보았습니다. 이를 응용하여 사용자 경험을 향상시키는 동적 UI를 구현할 수 있을 것입니다. 필요에 따라 Visibility 외에도 다양한 플러터 위젯을 조합하여 동적 UI를 설계할 수 있습니다.