Flutter 팝업창 (Dialog) 띄우기 (feat.IOS 스타일)

웹이나 앱이나 언제나 등장하는 것이 팝업창이다. 팝업창을 (Dialog라고 한다)

예를 들면 에러를 표시할 때나, 아니면 [뭐뭐뭐 하시겠습니까?]와 같이 물어볼 때 Dialog를 띄운다

Flutter에서도 한번 Dialog를 표시해보자

 

 

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text(
            "Dlalog 표시하기!!",
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

간단하게 버튼을 하나 만들었다. 여기서 버튼을 클릭했을 때, onPressed라는 함수가 동작을 하게 될 텐데

동작할 때, Dialog를 표시하도록 하면 된다

기본 코드 실행 화면

 

 

2. showCupertinoDialog

showCupertinoDialog는 IOS형태의 팝업창이다. 흔히 Iphone에서 자주 볼 수 있는데, 나는 Iphone을 쓰기 때문에 아주 익숙한 디자인이다

practice_page.dart

showCupertinoDialog(
  context: context,
  builder: (context) => CupertinoAlertDialog(
    title: Text("Dialog 표시하기 성공!"),
    actions: [
      CupertinoDialogAction(
        child: Text("확인"),
        onPressed: () {},
      )
    ],
  ),
);

onPressed 안에 아래의 코드를 삽입하였다

Dialog도 결국에는 화면을 화면으로 씌우는 거라고 생각하면 된다

context: context는 필수로 들어간다. 어떤 위젯인지 알려주는 거 같다

title을 팝업창의 메시지 내용을 뜻한다

actions은 팝업창의 [네, 아니요]나 [확인, 취소] 같은 버튼이 들어갈 곳이다

 

 

 

3. Navigator.pop()

위의 상태에서 확인버튼을 100번 1000번눌러도 꺼지지 않을 것이다.

왜냐하면 CupertionoDialogAction에서 onPressed가 있는데

그 함수에서 아무 처리도 하지 않았기 때문이다. 확인을 눌렀을 때 그게 하는 것을 만들어 보자

화면을 덮어씌운 것을 없앨 때는 Navigator.pop()을 사용하면 된다

onPressed: () {
  Navigator.pop(context);
},

이렇게 사용하면 된다

버튼을 클릭했더니 팝업창이 사라졌다

※혹시 팝업창이 사라지지 않는다면, 프로그램을 정지했다가 재실행하면 동작한다

 

 

4. Action 추가

확인버튼 하나만 있으니 조금 외로운 느낌이 들었다. 그래서 하나씩 더 추가해 보도록 하겠다

똑같은 코드를 밑에다가 삽입한 다음, 텍스트만 바꿔보도록 한다

그리고 실행

둘이 있으면 또 셋이 있고 싶기 마련이다. 묻고 하나 더 간다

하나 더 생겼더니 디자인이 새로로 변했다. 

※바로 변경이 안되기 때문에, 팝업창을 끄고 다시 버튼을 눌러주자

이렇게 Dialog창을 표시하는 법을 배웠다