[flutter] 플러터에서 Visibility를 이용한 확대/축소 컨트롤 제어하기

18 Dec 2023

flutter

이번 포스팅에서는 플러터에서 화면 상의 위젯을 확대/축소할 수 있는 방법에 대해 알아보겠습니다. 특히, Visibility 위젯을 활용하여 화면 중앙에 위치한 버튼을 터치할 때 확대/축소 여부를 제어하는 방법에 대해 배워보겠습니다.

확대/축소 제어하기

먼저, 플러터에서 확대/축소 제어를 위해 transform과 Scale 위젯을 활용할 수 있습니다. 이를 통해 버튼의 사이즈를 조절하거나 배율을 조절할 수 있습니다. 그러나 화면에 버튼을 표시하지 않고 싶은 경우 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(
        body: Center(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _isVisible = !_isVisible;
              });
            },
            child: _isVisible ? _buildButton() : Container(),
          ),
        ),
      ),
    );
  }

  bool _isVisible = true;

  Widget _buildButton() {
    return SizedBox(
      width: 100,
      height: 50,
      child: ElevatedButton(
        onPressed: () {
          // 실행할 동작 정의
        },
        child: Text('버튼'),
      ),
    );
  }
}

위의 코드에서는 Visibility 위젯을 이용하여 화면에 버튼을 보이거나 감출 수 있도록 했습니다. GestureDetector를 통해 화면 터치에 반응하도록 하고, onTap 이벤트에서 setState 함수를 이용하여 _isVisible 변수를 토글합니다.

이렇게 함으로써 플러터 앱에서 Visibility를 이용하여 화면 상의 위젯을 확대/축소할 수 있게 되었습니다.

마치며

이번 포스팅에서는 플러터에서 화면 상의 위젯을 확대/축소하는 방법에 대해 알아보았습니다. Visibility 위젯을 활용하여 편리하게 화면을 제어할 수 있게 되었습니다. 이를 응용하여 다양한 상황에 맞게 화면 컨트롤을 할 수 있을 것입니다.

참고문헌: Flutter 공식 문서