쏘니의 개발블로그

AlertDialog 위젯은 Flutter에서 사용자에게 중요한 정보를 알리거나 선택을 요구할 때 사용하는 팝업 창입니다. 일반적으로 제목, 본문 내용, 액션 버튼(예: 확인, 취소)을 포함합니다.

주요 속성

• title: 대화 상자의 제목을 설정합니다.

• content: 대화 상자의 본문 내용을 설정합니다.

• actions: 사용자가 선택할 수 있는 버튼 목록을 설정합니다.

• shape: 대화 상자의 모양을 설정합니다.

• backgroundColor: 대화 상자의 배경색을 설정합니다.

• elevation: 대화 상자의 그림자 깊이를 설정합니다.

예시 

body: Container(
  child: Center(
    child: TextButton(
      onPressed: () {
        showDialog(
            context: context,
            builder: (BuildContext con) {
              return AlertDialog(
                title: const Text("Dialog Title"),
                content: Container(
                  child: const Text("Dialog Content"),
                ),
                actions: [
                  TextButton(
                      onPressed: () => Navigator.of(context).pop(), 
                      child: const Text("Close")
                  )
                ],
              );
            }
        );
      },
      child: const Text("팝업 버튼"),
    ),

  ),
),

다른예시

사용자 정의 AlertDialog

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('Custom AlertDialog Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _showCustomDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Custom Alert"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("This is a custom alert dialog."),
              SizedBox(height: 20),
              FlutterLogo(size: 50),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => _showCustomDialog(context),
      child: Text('Show Custom AlertDialog'),
    );
  }
}

주요 포인트

• title: 대화 상자의 제목을 설정합니다. 일반적으로 Text 위젯을 사용합니다.

• content: 대화 상자의 본문 내용을 설정합니다. Text 위젯 또는 다른 복합 위젯을 사용할 수 있습니다.

• actions: 대화 상자의 하단에 위치하는 버튼 목록을 설정합니다. TextButton 또는 ElevatedButton 등을 사용합니다.

• showDialog: 대화 상자를 화면에 표시하는 함수입니다.

• context: 대화 상자를 표시할 컨텍스트입니다.

• builder: 대화 상자를 빌드하는 함수입니다. AlertDialog 위젯을 반환합니다.

• Navigator.of(context).pop(): 대화 상자를 닫는 함수입니다.

AlertDialog 문서

• AlertDialog 클래스 문서: AlertDialog 클래스 문서

• showDialog 함수 문서: showDialog 함수 문서