[Flutter] showDialog_0

YOUN·2023년 8월 22일
0

Flutter

목록 보기
7/12

대게 앱에서 로그아웃 버튼을 누를 경우 뜨는 창에 대해서 메모!
일반 Android에서의 Material 디자인(showDialog)과 iOS의 디자인(showCupertinoDialog)에 대해서 메모한다.

  1. showDialog
    builder로 AlertDialog를 사용하여 Material디자인의 네모난 창을 띄운다. title과 content에 창에서 띄울 메시지를 적고 action에 버튼을 만든다. 꼭 TextButton을 사용하지 않아도 된다.
    창이 띄워졌을 때 배경을 눌러도 창이 꺼지지 않으니 임시?로 pop()을 호출하여 창을 벗어 날 수 있도록 작성!
          ListTile(
            title: const Text('Log out (Android)'),
            textColor: Colors.red,
            onTap: () {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: const Text('Are you sure?'),
                  content: const Text('run away!'),
                  actions: [
                    TextButton(
                      child: const Text('No'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    TextButton(
                      child: const Text('Yes'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
              );
            },
          ),
  1. showCupertinoDialog
    iOS 디자인의 창을 띄운다. showDialog와 전체적으로 비슷한데 builder로 CupertinoAlertDialog를 사용하고 actions에 CupertinoDialogAction을 사용 하는 점이 조금 다르다.
    CupertinoDialogAction에서 isDestructiveAction 값을 true로 하면 해당 글자가 빨간색으로 강조되며 isDefaultAction 값을 true로 하면 볼드체가 된다.
          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('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(),
                    ),
                  ],
                ),
              );
            },
          ),
profile
SugarFree

0개의 댓글