Dialog 띄우기

Flutter 앱을 개발할 때 사용자와의 상호작용을 위해 대화 상자(Dialog)를 사용하는 경우가 많다.

Flutter에서 제공하는 두 가지 주요 대화 상자 함수인 showDialog와 showCupertinoDialog에 대해 알아보고, 아이콘 버튼을 눌렀을 때 검은색 컨테이너를 보여주는 예제를 통해 이해해보겠다.

 

한 줄 요약

showCupertinoDialog 함수는 화면을 덮는 즉, 또 하나의 화면을 만들 수 있게 해준다.

• 그 화면 안에 들어갈 위젯을 build 값에 넣어주면된다.

 

 

showDialog와 showCupertinoDialog의 차이점

1. 디자인 스타일: showDialog는 Material Design을, showCupertinoDialog는 iOS 스타일을 따른다.
2. 반환 값: 두 함수 모두 Future를 반환하지만, showCupertinoDialog는 항상 Future<T?>를 반환한다.
3. 애니메이션: 두 함수의 기본 애니메이션 효과가 다르다.
4. 사용 위젯: showDialog는 주로 AlertDialog와 함께 사용되고, showCupertinoDialog는 CupertinoAlertDialog와 함께 사용된다.

여기서는 showDialog 함수보다 showCupertinoDialog 함수가 더 이쁘기 때문에, showCupertinoDialog 함수를 사용하겠다.

 

 

기본 세팅

add 아이콘을 눌렀을 때, Dialog를 띄울 것이기 때문에 add 아이콘을 중앙에 위치시키는 코드를 입력한다. 

showCupertinoDialog() 함는 context 값을 받기 때문에 build()함수 안에 파라미터로 정의된 BuildContext context 값이 필요하다. 그러기 때문에 따로 StatelessWidget으로 선언한다.

실행 화면: 

showCupertinoDialog() 함수 사용하기 

아이콘을 누르면 showCupertinoDialog 함수가 호출되도도록 onPressed 콜백 함수안에 넣어준다.  

1. showCupertinoDialog:

• 이 함수는 iOS 스타일의 대화 상자를 화면에 띄우는 역할을 한다.
• showCupertinoDialog는 Flutter의 Cupertino 라이브러리에서 제공하는 함수로, iOS 디자인 가이드라인을 따르는 대화 상자를 생성한다.

- showCupertinoDialog 매개변수:

• context: 현재 위젯 트리의 위치를 나타내는 BuildContext 객체를 전달한다. 이 context는 대화 상자가 어느 위젯 트리 위치에 표시될지를 결정하는 데 사용된다.
• builder: Dialog 상자에 표시할 위젯을 반환하는 함수이다. 이 함수는 BuildContext를 매개변수로 받아서 Dialog 상자 내부에 표시할 위젯을 구성한다.

 

2. builder: (BuildContext context):

• builder는 대화 상자에 표시할 위젯을 반환하는 함수이다.
• 이 함수는 BuildContext를 매개변수로 받아서 Dialog 상자 내부에 표시할 위젯을 구성한다.
• BuildContext는 위젯 트리의 현재 위치를 나타내며, 위젯 트리에서 부모와 자식 위젯 간의 관계를 정의하는 데 사용된다.

3. return Container(color: Colors.white,):

• Container 위젯을 반환한다.
• Container는 Flutter에서 레이아웃을 구성하는 기본적인 위젯 중 하나로, 다양한 속성을 통해 크기, 패딩, 마진, 배경색 등을 설정할 수 있다.
• 여기서는 color 속성을 Colors.blak로 설정하여 컨테이너의 배경색을 검은색으로 지정한다.
• 이 컨테이너가 Dialog 상자 내부에 표시될 위젯이다. 즉, 사용자가 버튼을 눌렀을 때 검은색 배경의 Dialog 상자가 화면에 나타난다.

 

전체적인 흐름

1. 사용자가 IconButton을 클릭한다.

2. onPressed 콜백 함수가 호출된다.

3. showCupertinoDialog 함수가 실행되어 Dialog 상자를 화면에 띄운다.

- 여기서 context는 DialogWidget의 BuildContext를 나타내며, Dialog 상자가 해당 위젯 트리의 위치에 표시된다.

4. builder 함수가 호출되어 Dialog 상자 내부에 표시할 위젯을 반환한다.
- builder 함수의 매개변수로 전달된 BuildContext context는 Dialog 상자 내부의 위젯 트리를 나타낸다.

5. Container 위젯이 반환되어 검은색 배경의 Dialog 상자가 화면에 표시된다.

이처럼 context는 위젯 트리에서의 위치를 나타내며, 대화 상자가 어느 위젯 트리의 위치에 속하는지를 결정한다.

실행 화면: 

실행 화면

showCupertinoDialog 크기

Dialog 상자의 크기를 정할 때, Container의 크기를 정하면 된다. 

Container의 높이를 300으로 정하겠다. 

실행을 해도 Container의 크기가 줄어들지 않고, 똑같이 전체 화면으로 Dialog가 띄어지는 것을 볼 수 있다. 

실행 화면

이는 Container가 실행 중인 화면에서 어디 위치에 정렬이 되어야 하는지 명시라지 않았기 때문이다. 

Container의 정렬을 정의를 해주지 않으면, Container의 높이와 너비를 지정하더라도 전체화면으로 표시된다. 

 

Align 위젯으로 감싸기

어떤 위젯을 실행 중인 앱 전체 화면에서 정렬을 하기 위해서는 Align 위젯으로 감싸주면 된다. 

Align 위젯은 alignment 파라미터를 제공하는데, 어디에 정렬할 지 다양한 값을 줄 수 있다. 

 

alignment : Alignment.topLeft  =  좌측상단 배치

alignment : Alignment.topCenter  =  중앙상단 배치
alignment : Alignment.topRight  =  우측상단 배치

alignment : Alignment.centerLeft  =  좌측중앙 배치
alignment : Alignment.center  =  중앙 배치
alignment : Alignment.centerRight  =  우측중앙 배치

 

alignment : Alignment.bottomLeft  =  좌측하단 배치
alignment : Alignment.bottomCenter  =  중앙하단 배치
alignment : Alignment.bottomRight  =  우측하단 배치

 

지금은 Dialog를 중앙에 띄울것이기 때문에, Alignment.center로 값을 지정해준다. 

그러면 실행을 했을 때, 중앙에 높이가 300인 Dialog가 띄어지는 것을 볼 수 있다. 

높이가 300인 Dialog 실행 화면

showCupertinoDialog 닫기

barrierDismissible 속성은 Dialog 외부를 터치했을 때 다이얼로그가 닫히는지 여부를 결정한다.

 

true로 설정하면 Dialog 외부를 터치했을 때 다이얼로그가 닫히고, false로 설정하면 다이얼로그 외부를 터치해도 Dialog가 닫히지 않는다.

예를 들어, 다음과 같이 barrierDismissible을 true로 설정하면 다이얼로그 외부를 터치했을 때 다이얼로그가 닫힌다:

실행 화면: