[Flutter] showCupertinoModalPopup_0

showCupertinoDialog와 비슷한데 조금 다른 showCupertinoModalPopup에 대해 메모!
Dialog는 화면 가운데에 띠용 하고 창(Dialog)이 나타나며 배경을 터치해도 창이 없어지지 않는다. ModalPopup은 아래에서 위로(또는 위에서 아래로) 창이 등장하며 배경을 터치하면 창이 사라진다.
showCupertinoModalPopup은 아래에서 위로(또는 위에서 아래로) 창이 등장하는 효과이며, iOS 디자인의 창(CupertinoAlertDialog)과 Android의 Material 디자인의 창(AlertDialog) 중 원하는 것을 사용하면 된다. 그리고 화면 아랫쪽에 표시되는 CupertinoActionSheetAction도 있다.

1. CupertinoAlertDialog
   iOS 디자인의 창(Dialog)을 띄운다. 기본적으로 배경을 터치하면 창에서 벗어날 수 있다. isDestructiveAction의 값을 true로 하면 해당 글자가 빨간색으로 강조된다.

          ListTile(
            title: const Text('Log out (iOS / Botton)'),
            textColor: Colors.red,
            onTap: () {
              showCupertinoModalPopup(
                context: context,
                builder: (context) => CupertinoAlertDialog(
                  title: const Text('Are you sure?'),
                  content: const Text('run away!'),
                  actions: [
                    CupertinoDialogAction(
                      child: const Text('No'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    CupertinoDialogAction(
                      isDestructiveAction: true,
                      child: const Text('Yes'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
              );
            },
          ),

2. AlertDialog
   Material 디자인의 네모난 창(Dialog)를 띄운다. 마찬가지로 isDestructiveAction의 값을 true로 하면 해당 글자가 빨간색으로 강조된다.

          ListTile(
            title: const Text('Log out (Android / Botton)'),
            textColor: Colors.red,
            onTap: () {
              showCupertinoModalPopup(
                context: context,
                builder: (context) => AlertDialog(
                  title: const Text('Are you sure?'),
                  content: const Text('run away!'),
                  actions: [
                    CupertinoDialogAction(
                      child: const Text('No'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    CupertinoDialogAction(
                      isDestructiveAction: true,
                      child: const Text('Yes'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
              );
            },
          ),

3. CupertinoActionSheetAction
   showCupertinoModalPopup의 builder로 CupertinoActionSheet을 사용한다. actions에 CupertinoActionSheetAction을 이용하여 버튼은 만든다. 전체적으로 전부 비슷!

          ListTile(
            title: const Text('Log out (iOS / ActionSheet)'),
            textColor: Colors.red,
            onTap: () {
              showCupertinoModalPopup(
                context: context,
                builder: (context) => CupertinoActionSheet(
                  title: const Text('Are you sure?'),
                  message: const Text('run away!'),
                  actions: [
                    CupertinoActionSheetAction(
                      isDefaultAction: true,
                      child: const Text('No'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    CupertinoActionSheetAction(
                      isDestructiveAction: true,
                      child: const Text('Yes'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
              );
            },
          ),