플러터에서 AlertDialog 위젯 사용법과 주요 옵션 완벽 정리

 

Flutter에서 사용자에게 중요한 메시지나 확인 요청을 전달할 때 가장 많이 사용되는 UI 요소 중 하나가 AlertDialog입니다.

이 포스트에서는 AlertDialog 위젯이 무엇인지, 어떻게 사용하는지, 그리고 주요 옵션들을 통해 다양한 방식으로 커스터마이징하는 방법을 알아보겠습니다.

1. AlertDialog 위젯이란?

AlertDialog 위젯은 Flutter에서 사용자에게 경고 메시지, 정보 또는 결정을 요청하는 팝업 창을 만드는 데 사용됩니다.

이 위젯은 화면 중앙에 나타나며, 사용자가 조치를 취할 때까지 상호작용을 제한하는 모달 다이얼로그로 작동합니다.

AlertDialog 위젯의 주요 특징

• 중요한 정보 전달: 사용자에게 즉시 주의를 요하는 메시지를 전달할 수 있습니다.
• 사용자 결정 요청: 예/아니오, 확인/취소 등의 버튼을 통해 사용자의 결정을 요구할 수 있습니다.
• 커스터마이징 가능: 제목, 내용, 버튼 등을 쉽게 커스터마이징할 수 있습니다.

2. AlertDialog 위젯 기본 사용법

AlertDialog를 표시하려면 showDialog 함수를 사용해야 합니다.

이 함수는 비동기적으로 작동하며, 다이얼로그가 닫힐 때까지 다른 UI 요소와의 상호작용을 차단합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AlertDialog 예제'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('알림'),
                    content: Text('이것은 알림 다이얼로그입니다.'),
                    actions: <Widget>[
                      TextButton(
                        child: Text('확인'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: Text('AlertDialog 열기'),
          ),
        ),
      ),
    );
  }
}

코드 설명

• showDialog: 이 함수는 다이얼로그를 화면에 띄우는 역할을 합니다. context와 builder를 인자로 받아 다이얼로그를 구성합니다.
• AlertDialog: 다이얼로그의 내용이 되는 위젯입니다. title, content, actions 등을 통해 다이얼로그를 구성할 수 있습니다.
• actions: 다이얼로그 하단에 표시되는 버튼들을 정의합니다. 보통 TextButton, ElevatedButton 등을 사용해 확인, 취소 등의 버튼을 추가합니다.

3. AlertDialog 위젯의 주요 옵션

AlertDialog 위젯은 다양한 옵션을 제공하여 다이얼로그의 외형과 동작을 커스터마이징할 수 있습니다.

• title: 다이얼로그의 제목을 설정합니다. 주로 Text 위젯을 사용하며, 사용자가 다이얼로그의 목적을 쉽게 이해할 수 있도록 설명합니다.
• content: 다이얼로그의 본문 내용을 설정합니다. Text뿐만 아니라 Column, Image 등의 다양한 위젯을 포함할 수 있습니다.
• actions: 다이얼로그 하단에 표시되는 버튼들로, 사용자가 다이얼로그에 응답할 수 있는 선택지를 제공합니다.
• backgroundColor: 다이얼로그의 배경색을 설정합니다.
• shape: 다이얼로그의 모양(테두리, 모서리 등)을 설정합니다.
• elevation: 다이얼로그의 그림자 깊이를 설정합니다.
• contentPadding: 다이얼로그 내부의 콘텐츠 패딩을 설정합니다.

옵션 예시

AlertDialog(
  title: Text('경고'),
  content: Text('정말로 이 작업을 수행하시겠습니까?'),
  backgroundColor: Colors.red[100],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15),
  ),
  actions: <Widget>[
    TextButton(
      child: Text('취소'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    TextButton(
      child: Text('확인'),
      onPressed: () {
        // 확인 버튼 클릭 시의 처리
        Navigator.of(context).pop();
      },
    ),
  ],
);

위 예제에서는 배경색을 red[100]으로 설정하고, 모서리가 둥근 사각형 모양으로 다이얼로그를 꾸몄습니다.

4. AlertDialog 위젯 커스터마이징

AlertDialog 위젯은 단순한 텍스트와 버튼 이외에도 다양한 위젯을 포함할 수 있어, 매우 유연하게 커스터마이징할 수 있습니다.

이미지와 입력 필드 추가

AlertDialog(
  title: Text('로그인'),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text('사용자 이름과 비밀번호를 입력하세요.'),
      TextField(
        decoration: InputDecoration(hintText: '사용자 이름'),
      ),
      TextField(
        decoration: InputDecoration(hintText: '비밀번호'),
        obscureText: true,
      ),
    ],
  ),
  actions: <Widget>[
    TextButton(
      child: Text('취소'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    TextButton(
      child: Text('로그인'),
      onPressed: () {
        // 로그인 처리
        Navigator.of(context).pop();
      },
    ),
  ],
);

위 예제에서는 TextField 위젯을 사용해 사용자 입력을 받을 수 있는 다이얼로그를 구현했습니다.

이러한 방식으로 다이얼로그를 더욱 기능적으로 확장할 수 있습니다.

 

5. 결론

AlertDialog 위젯은 Flutter에서 매우 유용한 팝업 창 기능을 제공하며, 중요한 메시지 전달 및 사용자 확인을 요청할 때 필수적으로 사용됩니다.

다양한 옵션을 활용해 다이얼로그의 외형과 기능을 커스터마이징할 수 있으므로, 여러분의 앱에 맞게 최적화된 다이얼로그를 구현해 보세요.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱