[Flutter] Dialog 란 무엇인가?

Flutter에서 Dialog는 사용자와 상호작용할 수 있는 팝업 창을 제공합니다. 일반적으로 알림, 경고, 입력 등을 받을 때 사용됩니다. 이번 포스트에서는 다양한 유형의 Dialog를 사용하는 방법에 대해 알아보겠습니다.

1. AlertDialog 기본 사용법

AlertDialog는 가장 많이 사용되는 다이얼로그 중 하나입니다. 제목, 내용, 액션 버튼 등을 포함할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AlertDialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Alert Dialog'),
                  content: Text('This is a simple alert dialog.'),
                  actions: <Widget>[
                    TextButton(
                      child: Text('Cancel'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    TextButton(
                      child: Text('OK'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show AlertDialog'),
        ),
      ),
    );
  }
}

위 코드를 실행하면, 버튼을 눌렀을 때 간단한 AlertDialog가 표시됩니다.

2. SimpleDialog 사용법

SimpleDialog는 선택 항목을 제공하는 다이얼로그입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SimpleDialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return SimpleDialog(
                  title: Text('Simple Dialog'),
                  children: <Widget>[
                    SimpleDialogOption(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Option 1'),
                    ),
                    SimpleDialogOption(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Option 2'),
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show SimpleDialog'),
        ),
      ),
    );
  }
}

위 코드를 실행하면, 버튼을 눌렀을 때 선택 항목이 있는 SimpleDialog가 표시됩니다.

3. Custom Dialog 사용법

커스텀 다이얼로그는 Dialog 위젯을 사용하여 직접 구성할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Custom Dialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return Dialog(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Container(
                    height: 200,
                    padding: EdgeInsets.all(20),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          'Custom Dialog',
                          style: TextStyle(fontSize: 24),
                        ),
                        SizedBox(height: 20),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Close'),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Show Custom Dialog'),
        ),
      ),
    );
  }
}

위 코드를 실행하면, 버튼을 눌렀을 때 커스텀 디자인의 다이얼로그가 표시됩니다.

마무리
이 포스트에서는 Flutter에서 다양한 유형의 Dialog를 사용하는 방법에 대해 알아보았습니다. AlertDialog, SimpleDialog, Custom Dialog의 사용법을 살펴보았으니, 필요에 따라 적절한 다이얼로그를 사용해 보세요.