Contents
커스텀 다이얼로그 만들기반납, 예약 취소 등 필요에 따라 확인 다이얼로그 창을 띄워서 재차 확인이 필요한 경우가 있다.
그럴 때 간단하게 사용할 수 있게 components로 custom_dialog.dart를 만들어 놓고 사용하면
편리할 것이다.

커스텀 다이얼로그 만들기

파일을 만들어서 필요시 커스텀 해서 사용할 수 있게 간단하게 만들어 볼 것이다.
custom_dialog.dart
import 'package:flutter/material.dart';
class CustomDialog {
final String title;
final String content;
final VoidCallback onConfirm;
CustomDialog({
required this.title,
required this.content,
required this.onConfirm,
});
void show(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(title),
content: Text(content),
actions: [
TextButton(
child: Text("확인"),
onPressed: () {
onConfirm(); // 확인 버튼 눌렀을 때 전달 받은 함수 실행
Navigator.of(context).pop(); // 다이얼로그 닫기
},
),
TextButton(
child: Text("취소"),
onPressed: () {
Navigator.of(context).pop(); // 다이얼로그 닫기
},
),
],
);
},
);
}
}
호출 방법

CustomDialog를 호출할 때 Named Parameters(선택적 매개변수)에 필수로
title
, content
, onConfirm
을 전달해서각각 제목, 내용, 확인 선택히 실행할 함수(콜백)로 사용할 수 있게 한다.
AlertDialog는
창에 띄워야 하기 때문에 객체를 생성하고 .show(context)를 붙여줘야 한다.
context는 화면을 나타내는 것이므로 .show(context)를 붙여줘야 현재 화면에 뜬다.
AlertDialog(~).show(cocntext); 이런 형태가 돼야 한다.
변수에 대응하는 부분

필요에 따라 타이틀과 내용을 바꿔서 사용하고
확인 선택시 실행해줄 함수를 원하는 코드를 전달해서 간단하게 사용하면 될 것이다.
왜 stateless도 아니고 stateful도 아닌 것인가?
CustomDialog는 StatelessWidget이나 StatefulWidget이 아니어도 된다.
showDialog는 Flutter에서 제공하는 함수로, 내부적으로 화면에 다이얼로그를 렌더링하기 때문에 CustomDialog 자체가 위젯일 필요는 없다. CustomDialog는 단순히 데이터를 저장하고, showDialog 메서드를 호출하여 다이얼로그를 표시하는 역할을 한다.
Share article