플러터(Flutter) 앱을 개발할 때 모달 창을 표시하거나 숨기는 기능은 매우 중요합니다. 이 포스트에서는 Visibility 위젯을 사용하여 모달 창을 표시하고 제어하는 방법을 알아보겠습니다.

모달 창 생성하기

먼저, 모달 창을 생성하는 방법부터 알아보겠습니다. 모달 창은 일반적으로 다이얼로그로 표현되며, 사용자와 상호 작용할 때 주로 사용됩니다.

ElevatedButton(
  onPressed: () {
    setState(() {
      _isModalVisible = true;
    });
  },
  child: Text('모달 창 열기'),
),
Visibility(
  visible: _isModalVisible,
  child: AlertDialog(
    title: Text('제목'),
    content: Text('내용'),
    actions: [
      TextButton(
        onPressed: () {
          setState(() {
            _isModalVisible = false;
          });
        },
        child: Text('닫기'),
      ),
    ],
  ),
)

위의 코드에서는 ElevatedButton을 사용하여 모달 창을 열고, Visibility 위젯을 사용하여 _isModalVisible 값에 따라 모달 창을 표시하고 숨깁니다. 모달 창은 AlertDialog를 사용하여 구현되었으며, 닫기 버튼을 클릭하면 _isModalVisible 값을 변경하여 모달 창을 닫습니다.

결론

이렇게 Visibility 설정을 이용하여 플러터 앱에서 모달 창을 제어할 수 있습니다. 모달 창은 사용자와의 상호 작용을 통해 정보를 제공하거나 추가 작업을 유도하는 데 유용하게 활용될 수 있습니다. 이를 통해 앱의 사용자 경험을 개선할 수 있습니다.