showCupertinoDialog, CupertinoAlertDialog, CupertinoDialogAction, ShowDialogue, CupertinoActionSheetAction

ListTile(
  title: const Text("Log out (iOS)"),
  textColor: Colors.red,
  onTap: () {
    showCupertinoDialog(
      context: context,
      builder: (context) => CupertinoAlertDialog(
        title: const Text("Are you sure?"),
        content: const Text("Plx dont go"),
        actions: [
          CupertinoDialogAction(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text("No"),
          ),
          CupertinoDialogAction(
            onPressed: () => Navigator.of(context).pop(),
            isDestructiveAction: true,
            child: const Text("Yes"),
          ),
        ],
      ),
    );
  },
),

이 코드는 "Log out (iOS)"라는 제목의 ListTile을 나타냅니다. 사용자가 이를 탭하면, "Are you sure?"라는 제목과 함께 "Plx dont go"라는 내용의 CupertinoAlertDialog가 표시됩니다. 그리고 "No"와 "Yes" 두 개의 선택 버튼이 있습니다.

해당 코드는 탭하면 CupertinoAlertDialog가 나타나는 ListTile을 보여줍니다. 이 설정은 iOS 디자인 가이드라인에 따라 스타일링 되어 있으며, iOS의 고유한 느낌을 모방하려는 앱에 가장 적합합니다.

이 코드를 자세히 살펴보면:

1. ListTile:

   • title: "Log out (iOS)"라는 텍스트를 보여줍니다.
   • textColor: 텍스트의 색상을 빨간색으로 설정합니다.
   • onTap: 타일이 탭될 때 실행되는 콜백 함수입니다. 이 함수 내에서 showCupertinoDialog 함수를 호출하여 iOS 스타일의 경고 대화 상자를 표시합니다.

2. showCupertinoDialog:

   • context: 현재의 BuildContext를 참조합니다.
   • builder: 대화 상자의 UI를 구성하는 위젯을 반환하는 함수입니다.

3. CupertinoAlertDialog:

   • title: 대화 상자의 제목으로 "Are you sure?"라는 텍스트를 표시합니다.
   • content: "Plx dont go"라는 내용의 텍스트를 표시합니다.
   • actions: 대화 상자의 하단에 표시되는 버튼들을 리스트로 표시합니다. 여기에는 "No"와 "Yes"라는 두 개의 버튼이 있습니다. "Yes" 버튼에는 isDestructiveAction 속성이 true로 설정되어 있어, 누르면 데이터나 상태가 변경될 수 있음을 나타내는 빨간색으로 표시됩니다.

간단히 말해서, 이 ListTile은 사용자가 탭하면 "정말 로그아웃 하시겠습니까?"라는 경고 대화 상자를 표시하는 기능을 가지고 있습니다.

ShowDialogue

한편, ShowDialogue는 Material Design에 따릅니다.

showDialog는 Flutter에서 사용되는 함수로, 재료 디자인(Material Design) 스타일의 대화 상자를 표시하기 위한 것입니다. 이 함수는 전달된 context 내에서 새로운 MaterialPageRoute를 생성하고, 해당 경로를 현재 navigation stack의 최상단에 푸시하여 대화 상자를 표시합니다.

기본적인 showDialog의 사용법은 다음과 같습니다:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('제목'),
      content: Text('내용'),
      actions: <Widget>[
        TextButton(
          child: Text('취소'),
          onPressed: () {
            Navigator.of(context).pop(); // 대화 상자를 닫습니다.
          },
        ),
        TextButton(
          child: Text('확인'),
          onPressed: () {
            // 확인 버튼을 눌렀을 때의 동작을 여기에 작성합니다.
            Navigator.of(context).pop(); // 대화 상자를 닫습니다.
          },
        ),
      ],
    );
  },
);

• context: 현재의 BuildContext를 참조합니다.
• builder: 대화 상자의 UI를 구성하는 위젯을 반환하는 함수입니다. 주로 AlertDialog 위젯을 반환하지만 다른 커스텀 위젯도 가능합니다.

위 예제에서는 제목과 내용, 그리고 두 개의 버튼(취소, 확인)을 가진 AlertDialog를 표시합니다. 각 버튼은 눌렀을 때 대화 상자를 닫는 동작을 포함하고 있습니다.

이러한 대화 상자는 사용자에게 정보를 알리거나, 사용자의 결정을 요청하는 등 다양한 상황에서 사용됩니다.

ShowCupertinoModalPopup

showCupertinoModalPopup는 Flutter의 Cupertino (iOS 스타일) 위젯 라이브러리에서 제공하는 함수로, iOS 스타일의 모달 바텀 시트를 표시하기 위해 사용됩니다.

ShowCupertinoDialogue는 대화창 밖을 터치하여도 pop되지 않고 반드시 답변을 하도록 합니다. 그러나 ShowCupertinoModalPopup은 대화창 밖을 터치하면 pop됩니다.

이 함수는 전달된 context 내에서 바텀 시트를 표시하며, 바텀 시트의 내용은 대개 CupertinoActionSheet, CupertinoDatePicker 등의 위젯으로 구성됩니다.

showCupertinoModalPopup의 기본 사용법은 다음과 같습니다:

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) {
    return CupertinoActionSheet(
      title: Text('선택하세요'),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: Text('옵션 1'),
          onPressed: () {
            Navigator.of(context).pop(); // 모달을 닫습니다.
            // 옵션 1에 대한 처리를 여기에 작성합니다.
          },
        ),
        CupertinoActionSheetAction(
          child: Text('옵션 2'),
          onPressed: () {
            Navigator.of(context).pop(); // 모달을 닫습니다.
            // 옵션 2에 대한 처리를 여기에 작성합니다.
          },
        ),
      ],
      cancelButton: CupertinoActionSheetAction(
        child: Text('취소'),
        onPressed: () {
          Navigator.of(context).pop(); // 모달을 닫습니다.
        },
      ),
    );
  },
);

• context: 현재의 BuildContext를 참조합니다.
• builder: 모달의 UI를 구성하는 위젯을 반환하는 함수입니다. 위 예제에서는 CupertinoActionSheet를 반환합니다.

위 예제에서는 "선택하세요"라는 제목과 "옵션 1", "옵션 2", 그리고 "취소" 버튼을 포함한 CupertinoActionSheet를 표시합니다.

이러한 바텀 시트는 사용자에게 여러 옵션 중에서 선택을 요청하거나 추가적인 작업을 수행하도록 요청하는 경우에 사용될 수 있습니다.

CupertinoActionSheetAction

CupertinoActionSheetAction은 Flutter의 Cupertino (iOS 스타일) 위젯 라이브러리의 일부로, CupertinoActionSheet 내에서 사용되는 액션 버튼을 나타냅니다.

CupertinoActionSheetAction의 주요 특징 및 속성은 다음과 같습니다:

1. child: 액션 버튼의 내용을 나타내는 위젯. 대부분의 경우 Text 위젯을 사용합니다.
2. onPressed: 버튼을 탭할 때 실행될 콜백 함수.
3. isDefaultAction: true로 설정하면 텍스트 스타일에 기본 액션 스타일이 적용됩니다.
4. isDestructiveAction: true로 설정하면 텍스트 스타일에 파괴적 액션 스타일이 적용됩니다 (일반적으로 빨간색으로 표시).

예시:

CupertinoActionSheetAction(
  child: Text('삭제'),
  onPressed: () {
    // 삭제 로직 처리
    Navigator.of(context).pop(); // 액션 시트 닫기
  },
  isDestructiveAction: true, // 이로 인해 '삭제' 텍스트는 빨간색으로 표시됩니다.
),
CupertinoActionSheetAction(
  child: Text('취소'),
  onPressed: () {
    Navigator.of(context).pop(); // 액션 시트 닫기
  },
  isDefaultAction: true, // 이로 인해 '취소' 텍스트는 기본 액션 스타일로 표시됩니다.
),

위의 예시에서 "삭제" 버튼은 파괴적 액션으로 간주되기 때문에 빨간색으로 표시됩니다. 반면 "취소" 버튼은 기본 액션 스타일로 표시됩니다.

CupertinoActionSheetAction은 사용자에게 다양한 액션 중 하나를 선택하게 하거나, 특정 작업을 수행하도록 요청하는 데 사용됩니다.