[ Flutter ] Alert Dialog

---

삭제 기능을 구현하기 위해 alert을 사용

AlertDialog

alertDialog는 다른 삭제 부분에서 사용 가능성을 고려하여 컴포넌트화 시킴

class CustomAlertDialog extends StatelessWidget {
  const CustomAlertDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
      backgroundColor: boxColor,
      title: Text(
        '정말루?!',
        style: TextStyle(color: textColor),
      ),
      content: Text(
        '정말로 삭제하시겠습니까?',
        style: TextStyle(color: textColor),
      ),
      actions: [
        ElevatedButton(
            onPressed: () => Navigator.of(context).pop(true),
            style: ElevatedButton.styleFrom(
                backgroundColor: buttonColor, elevation: 0),
            child: Text(
              '확인',
              style: TextStyle(color: textColor),
            )),
        ElevatedButton(
            onPressed: () => Navigator.of(context).pop(false),
            style: buttonStyle(),
            child: Text(
              '취소',
              style: TextStyle(color: textColor),
            )),
      ],
    );
  }
}

 

삭제 기능을 구현할 것이므로 확인 혹은 취소 버튼에 return 값을 true 와 false값을 return 하도록 설정

 

이후 다른 버튼을 만들때 같은 스타일을 적용시키기위해 스타일을 따로 만들어서 적용

ButtonStyle buttonStyle() {
  return ElevatedButton.styleFrom(
    backgroundColor: boxColor,
    elevation: 0,
    shadowColor: Colors.transparent,
  );
}

---

Use

이전에 만든 삭제 버튼에서 onPressed 부분에 눌렀을시 다이얼로그를 표시

이후 return 값을 받아 그 값에 따라서 삭제 true일때만 삭제를 진행

Container(
            width: buttonSize,
            height: buttonSize,
            child: ElevatedButton(
              onPressed: () async {
                bool result = await showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return CustomAlertDialog();
                  },
                );
                if (result) {
                  fixSaveProvider.delete(cost);
                }
              },
              style: ElevatedButton.styleFrom(
                  backgroundColor: boxColor,
                  elevation: 0,
                  padding: const EdgeInsets.all(0.0),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(4.0))),
              child: SvgPicture.asset(
                'assets/icons/trash.svg',
                color: red,
                width: buttonSize * 0.6,
                height: buttonSize * 0.6,
              ),
            ),
          ),