[Flutter] AlertDialog 를 활용하여 팝업창 띄우기

다양한 디바이스에서 우리는 팝업창을 자주 마주치게 된다.
스마트폰 앱에서 뒤로가기를 누르면 'OO을 종료하시겠습니까?' 가 대표적인 예다.
그 외에도 어떤 데이터를 삭제한다던지 등에도 팝업창이 뜬다.

이 팝업창은 되돌릴 수 없거나 중요한 결정을 하기 전에 주의를 환기시키고 한번 더 확인받는 과정에서 자주 사용된다.

Flutter 역시 이러한 작업을 할 수 있는 기능을 제공한다.
AlertDialog가 그 예시중 하나다.

이제 Flutter의 AlertDialog를 어떻게 사용할 수 있는지 살펴보자.
우선 아무것도 없는 빈 StatelessWidget을 만들었다.
그리고 내부에 IconButton을 만들었다.

import 'package:flutter/material.dart';

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

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

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IconButton(
          onPressed: () {
            myDialog(context);
          },
          icon: const Icon(Icons.bubble_chart_outlined),
        ),
      ),
    );
  }
}

아마 myDialog(context); 에서 에러가 날 것이다.
이제 붙인 소스 끝에 아래 소스를 붙여넣자.

void myDialog(context) {
  showDialog(
    context: context,
    builder: (context) {
      return Dialog(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("팝업이다."),
            IconButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              icon: const Icon(Icons.close),
            )
          ],
        ),
      );
    },
  );
}

이제 에러가 사라지고 정상적으로 동작함을 알 수 있다.

가운데의 버블 모양을 클릭하면?
아래와 같이 팝업이 뜬다.

Dialog는 화면 바깥의 빈 공간을 클릭해도 닫힌다.
하지만 유저 입장에서는 직관적이지 못하니까 닫힘 버튼을 만들어주는 것이 좋다.

Navigator.of(context).pop();

정도를 활용하면 간단하게 구현할 수 있다.

Dialog를 전체 화면으로 보고싶다면 Dialog를 호출할 때 속성값으로 fullscreen을 붙여주면 된다.

return Dialog( 생략
--> return Dialog.fullscreen( 생략

자세한 내용은 여기서 더 알아보자.
Flutter Dialog 공식 문서

아래 소스는 flutter에서 제공하는 해당 기능을 살펴볼 수 있는 전체 예제다.
해당 소스를 복붙하여 살펴보면 조금 더 이해가 잘 될지도 모르겠다.

import 'package:flutter/material.dart';

/// Flutter code sample for [Dialog].

void main() => runApp(const DialogExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Dialog Sample')),
        body: const Center(
          child: DialogExample(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text('This is a typical dialog.'),
                    const SizedBox(height: 15),
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: const Text('Close'),
                    ),
                  ],
                ),
              ),
            ),
          ),
          child: const Text('Show Dialog'),
        ),
        const SizedBox(height: 10),
        TextButton(
          onPressed: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => Dialog.fullscreen(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('This is a fullscreen dialog.'),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Close'),
                  ),
                ],
              ),
            ),
          ),
          child: const Text('Show Fullscreen Dialog'),
        ),
      ],
    );
  }
}