ShowDialog와 AlertDialog 팝업 메시지

Flutter 앱을 개발하다보면 사용자와 상호작용하기 위해 다이얼로그를 표시해야 할 때가 있습니다. 이를 위해 Flutter는 AlertDialog 위젯과 ShowDialog 함수를 제공합니다. 이 두 가지를 사용하여 앱 내에서 간단하고 효과적으로 대화 상자를 표시할 수 있습니다.

AlertDialog 

AlertDialog는 사용자에게 메시지를 표시하고 확인 또는 취소와 같은 선택지를 제공하는 Flutter 위젯입니다. 주로 경고 메시지, 정보 제공, 사용자의 확인이나 취소를 요청하는 등의 목적으로 사용됩니다.

 

 

Future<void> _showMyDialog() async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('AlertDialog Title'),
        content: const SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text('This is a demo alert dialog.'),
              Text('Would you like to approve of this message?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Approve'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

 

 

 

ShowDialog 함수

ShowDialog 함수는 AlertDialog를 표시하기 위한 메서드입니다. ShowDialog 함수는 다음과 같이 사용됩니다.

 

• barrierDismissible : 바깥 영역 터치시 닫을지 여부
• title : 제목
• center : 내용
• actions : 버튼

사용 예시

다음은 ShowDialog 함수를 사용하여 AlertDialog를 표시하는 간단한 예시입니다.

 

import 'package:flutter/material.dart';

/// Flutter code sample for [AlertDialog].

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('AlertDialog Sample')),
        body: const Center(
          child: DialogExample(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: const Text('AlertDialog Title'),
          content: const Text('AlertDialog description'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      child: const Text('Show Dialog'),
    );
  }
}

 

 

 

 

 

 

 

 

  예제 코드들은 드레그 하거나 기다리시면 안보이던 코드가 보이게 됩니다. 

 

 

 

https://youtu.be/75CsnyRXf5I

 

 

 

https://api.flutter.dev/flutter/material/AlertDialog-class.html

AlertDialog class - material library - Dart API