AlertDialog class
Material Design 알림 대화 상자.
알림 대화상자(기본 대화상자라고도 함)는 사용자에게 확인이 필요한 상황을 알려줍니다. 알림 대화상자에는 제목(선택 사항)과 작업 목록(선택 사항)이 있습니다. 제목은 콘텐츠 위에 표시되고 작업은 콘텐츠 아래에 표시됩니다.
공식 문서 코드
사용자에게 어떠한 것을 알리려고 하는 상황이 오기 마련이다. 이럴 때엔 토스트 메시지를 보여주는 것도 좋지만 가장 좋은 방법은 소위 팝업 창이라고 말하는 다이얼로그를 보여주는 것이다. 특히나 No/Yes 선택지가 있는 다이얼로그를 일일이 만들기에는 귀찮은 면이 있는데 그것을 아주 쉽고 빠르게 만들어줄 수 있는 위젯이 바로 AlertDialog 위젯이다.
이 AlertDialog 위젯은 사용자에게 경고 / 확인 요청 또는 간단한 메시지를 보여줄 때 사용하는 팝업 대화 상자 위젯이다. 일반적으로 사용자에게 중요한 결정을 요구하거나 정보를 전달할 때 사용하게 된다. 바로 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| icon | Widget? | null | 타이틀 위에 표시할 선택적인 아이콘 |
| iconPadding | EdgeInsetsGeometry? | 조건부 디폴트 | 아이콘 주위의 패딩 |
| iconColor | Color? | 테마에 따라 다름 | 아이콘 색상 |
| title | Widget? | null | 다이얼로그의 제목을 표시할 위젯 |
| titlePadding | EdgeInsetsGeometry? | 조건부 디폴트 | 타이틀 주위의 패딩 |
| titleTextStyle | TextStyle? | 테마에 따라 다름 | 타이틀 텍스트 스타일 |
| content | Widget? | null | 본문 내용으로 표시할 위젯 |
| contentPadding | EdgeInsetsGeometry? | 조건부 디폴트 | 내용 주위의 패딩 |
| contentTextStyle | TextStyle? | 테마에 따라 다름 | 본문 텍스트 스타일 |
| actions | List<Widget>? | null | 하단에 표시할 액션 버튼 목록 |
| actionsPadding | EdgeInsetsGeometry? | null | 액션 버튼 영역의 외부 패딩 |
| actionsAlignment | MainAxisAlignment? | MainAxisAlignment.end | 가로 정렬 방식 |
| actionsOverflowAlignment | OverflowBarAlignment? | OverflowBarAlignment.end | 세로 오버플로우 시 가로 정렬 |
| actionsOverflowDirection | VerticalDirection? | VerticalDirection.down | 오버플로우 시 위젯의 세로 정렬 방향 |
| actionsOverflowButtonSpacing | double? | null | 세로 정렬 시 버튼 간 간격 |
| buttonPadding | EdgeInsetsGeometry? | 수평 8.0 | 각 버튼 주변의 패딩 |
| backgroundColor | Color? | null | 다이얼로그의 배경 색상 |
| elevation | double? | null | 다이얼로그의 그림자 깊이 |
| shadowColor | Color? | null | 그림자 색상 |
| surfaceTintColor | Color? | null | 표면에 적용되는 틴트 색상 |
| semanticLabel | String? | null | 접근성용 다이얼로그 라벨 |
| insetPadding | EdgeInsets? | 16px all | 화면 테두리와 다이얼로그 간의 여백 |
| clipBehavior | Clip? | null | 자식 위젯 클리핑 방식 |
| shape | ShapeBorder? | null | 다이얼로그 모양 (예: 라운드) |
| alignment | AlignmentGeometry? | null | 다이얼로그 위치 정렬 |
| scrollable | bool | false | 내용이 넘칠 경우 스크롤 가능 여부 |
일단 기본적인 사용법은 이렇게 된다.
TextButton(
onPressed: () {
showDialog(context: context, builder: (context) {
return AlertDialog(
title: Text('타이틀'),
content: Text('콘텐츠'),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('No'),
),
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('Yes'),
),
],
);
},);
},
child: Text('다이얼로그'),
),다이얼로그답게 먼저 showDialog 빌더 내에서만 호출할 수 있다.
그런 다음에 그냥 바로 꺼내서 AlertDialog 꺼내서 사용하면 되는데 기본 템플릿이 굉장히 정형화되어 있어서 쉽게 사용할 수 있다.
가장 큰 장점으로는 디자인하는데 시간을 할애하지 않아도 된다는 것이다.
그냥 Dialog 를 사용해서 위 사진처럼 제작하려면 padding 먹이고~ 그 안에 Column 으로 감싸고 또 배치하고~ 세월아 네월아 코드를 적어야 하는데 그냥 AlertDialog 를 사용하면 title 딱. content 로 딱. actions 로 딱. 쉽게 위젯을 배치할 수 있게 되는 것이다.
당연하겠지만 title, content, actions 모두 Widget? 타입을 받기 때문에 (actions 는 List<Widget?>) 배치하고 싶은 거 막 써주면 된다.
이제 이 이건 머테리얼 디자인을 따르는 AlertDialog 였고 IOS 사용자라면 쿠퍼티노 디자인을 따르는 CupertinoAlertDialog 위젯을 사용해서 만들어 줄 수 도 있다.
이것도 사용법은 간단하다. 근데 당연하게도 쿠퍼티노이므로 showCupertinoDialog 를 기본으로 사용해줘야 한다.
TextButton(
onPressed: () {
showCupertinoDialog(context: context, builder: (context) {
return CupertinoAlertDialog(
title: Text('타이틀'),
content: Text('컨텐츠'),
actions: [
CupertinoDialogAction(
isDestructiveAction: true, // true 로 해주면 빨갛게 색칠된다!
onPressed: () => Navigator.of(context).pop(),
child: Text('No'),
),
CupertinoDialogAction(
onPressed: () => Navigator.of(context).pop(),
child: Text('Yes'),
),
],
);
},);
},
child: Text('다이얼로그'),
),
일단 AlertDialog 와 차이점이 있는데 바로 배경을 클릭해도 다이얼로그가 닫히지 않는다는 것이다. 그래서 닫히게 하려면 barrierDismissible 을 true 로 해놔야 한다. (세상에나 기본값이 false 라니)
showCupertinoDialog(
barrierDismissible: true,내가 공식에서 actions 안에 CupertinoDialogAction 사용해서 배치하길래 똑같이 따라 하긴 했는데 사실 그냥 아무 위젯이나 배치해 줘도 된다. TextButton 같은 거 말이다. 하지만 CupertinoDialogAction 사용해야만 이제 IOS 느낌이 나는 건 어쩔 수 없긴 하다.
암튼 이렇게 AlertDialog 와 CupertinoAlertDialog 를 알아보았다. 다이얼로그를 빠르게 제작해야 할 때 사용하기 좋으니 꼭 사용해 보고 도움이 되었길 바라며 마치겠다.
