[Flutter] AlertDialog 생성하기, 팝업 또는 알림창 띄우기

개발 환경

---------------------------------

OS : Mac

개발 툴 : android studio

개발 언어 : dart

---------------------------------

 

 

안녕하세요 이번 포스팅에서는 flutter에서 alert창을 띄워보겠습니다.

 

dialog

 

먼저 alert창을 띄우기 위해 ShowDialog, AlertDialog 두가지 위젯을 사용해야합니다.

 

showDialog의 필수 요소는 

• context
• builder
• barrierDismissible

위 세가지가 있습니다.

 

context는 여기 위치가 어디냐 ! 에 대한 답변을 해주고

builder는 dialog의 title, message, action을 생성합니다.

barrierDismissible은  alert창 외의 영역을 클릭할 수 있는지 없는지에 대한 여부입니다. 없을경우 false 입니다.

void dialog(BuildContext context) async {
  return showDialog<void>(
    context: context,
    barrierDismissible: true, // user must tap button!
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('소원'),
        content: SingleChildScrollView(
          child: ListBody(
            children: const <Widget>[
              Text('강아지 키우고 싶다'),
              Text('감자튀김 먹고싶다'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('확인'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

 

action영역을 보면 배열로 넣습니다.

버튼을 자유롭게 넣을 수 있다는거죠!

 

일단 한개 넣어보겠습니다.

 

actions: <Widget>[
  TextButton(
    child: const Text('확인'),
    onPressed: () {
      Navigator.of(context).pop();
    },
  ),
],

 

default로 오른쪽 하단에 버튼이 박히네요.

그럼 버튼을 가운데로 옮겨볼거에요.

 

actions: <Widget>[
  Center(
    child: TextButton(
      child: const Text('확인'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  )

 

잘 옮겨지는군요

 

 

그럼 세로로 두개...

 

actions: <Widget>[
  Center(
    child: Column(
      children: [
        TextButton(
          child: const Text('취소'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: const Text('확인'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    ),
  )
],

 

맘에 듭니다.

 

 

 

이상입니다