flutter & dart - alert 창과 같은 Dialog

Overview. 

약간 alert 와 같은 Dialog 창을 만들어 보자

1. ShowDialog , AlertDialog
2. CupertinoAlertDialog
3. CupertinoDialogAction <모르겠음 ㅋ>

 

0. 문서

https://api.flutter.dev/flutter/material/AlertDialog-class.html

AlertDialog class - material library - Dart API

https://api.flutter.dev/flutter/cupertino/CupertinoAlertDialog-class.html

CupertinoAlertDialog class - cupertino library - Dart API

https://api.flutter.dev/flutter/cupertino/CupertinoDialogAction-class.html

CupertinoDialogAction class - cupertino library - Dart API

 

1. ShowDialog , AlertDialog 란?

 

ShowDialog

• barrierDismissible : 바깥 영역 터치시 닫을지 여부
• title : 제목
• center : 내용
• actions : 버튼

AlertDialog(다이얼로그)는 유저에게 메시지를 보여주거나, 특정 조치를 요구하거나, 일부 정보를 요청하는데 사용할 수 있는 위젯입니다.

 

라는데 뭐 그냥 한번 보시죠!

 

보면 감이 잡히죠? ㅋㅋㅋ 이것을 버튼을 눌렀을 때 창이 뜨도록 할 수 있는데 바로 showDialog 를 활용하는 것입니다.

코드로 보시죠 Navigator 활용을 위해 buildContext 를 매개변수로 잡아 주시고 뿌려주면 끝!

...

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // showDialog (alert 와 같은 느낌)
              // context : context
              // builder 빌드할 아이
              showDialog(
                context: context,
                builder: (context) => buildAlertDialog(context),
              );
            },
            child: Text("버튼"),
          ),
        ),
      ),
    );
  }

  // 함수화
  AlertDialog buildAlertDialog(BuildContext context) {
    return AlertDialog(
      title: Text("alert 다이아로그"),
      backgroundColor: Colors.white,
      // 액션을 지정할 수 있음
      actions: <Widget>[
        TextButton(
          child: const Text('닫기'),
          onPressed: () {
            // 이전 화면 빌드 (pop : stack 자료형인듯)
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }
}

 

2. CupertinoAlertDialog

좀더 예쁜(?) 다이아 로그예영 얘도 따로 메서드를 빼놨습니다.

CupertinoAlertDialog buildCupertinoAlertDialog(BuildContext context) {
  return CupertinoAlertDialog(
    title: Text("쿠퍼디노 다이아그램"),
    content: Text("내용오옹ㅇㅇㅇ"),
    actions: <Widget>[
      TextButton(onPressed: () {}, child: Text("적용")),
      TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text("닫기")),
    ],
  );
}

 

3. CupertinoDialogAction

얘는 좀 모르겠는데 커스텀? 이 가능한 얘인것 같아요 잘 안되서 그냥 skip 할 게요

// 얘는 뭐 얼캐 사용하지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
CupertinoDialogAction buildCupertinoDialogAction(BuildContext context) {
  return CupertinoDialogAction(
    child: Container(
      height: 300,
      color: Colors.white,
      child: Row(
        children: [
          Expanded(child: Text("안녕하세요오")),
          Expanded(child: Text("하하하핳")),
        ],
      ),
    ),
  );
}