[Flutter] Widget(1) - Dialog, Alert Dialog, Simple Dialog, Show Dialog

 

Dialog Widget

• Dialog위젯은 Flutter에서 Modal을 표현할 때 사용하는 가장 기본적인 widget이다.
• 이 widget을 사용하면 앱의 현재 내용 위에 대화상자가 표시된다. 이 대화상자는 확인 및 취소 기능을 가지고 있으며, 모달 barrier를 클릭할 시 dialog가 종료된다.
• dialog widget은 dialog 대화상자에 대한 어떠한 옵션도 없기 때문에, 이 widget을 바로 사용하는 것보다 AlertDialog 혹은 SimpleDialog를 사용하는 것이 더욱 유용하다 

 

Dialog 예제

 

• 코드

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 MaterialApp(
      home: Sample(),
    );
  }
}

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return 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'),
    );
  }
}

 

• 실행화면

 

Alert Dialog 예제

 

• 코드

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 MaterialApp(
        home: Sample(),
      );
    }
  }

  class Sample extends StatelessWidget {
    const Sample({Key? key}) : super(key: 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'),
      );
    }
  }

 

• 실행화면

 

Simple Dialog 예제

 

• 코드

import 'package:flutter/material.dart';

enum Department {
  treasury,
  state,
}

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 MaterialApp(
      home: Sample(),
    );
  }
}

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () async {
          await askedToLead(context);
        },
        child: Text('Select Department'),
      ),
    );
  }

  Future<void> askedToLead(BuildContext context) async {
    switch (await showDialog(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog(
            title: const Text('Select assignment'),
            children: <Widget>[
              SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(context, Department.treasury);
                },
                child: const Text('Treasury department'),
              ),
              SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(context, Department.state);
                },
                child: const Text('State department'),
              ),
            ],
          );
        })) {
      case Department.treasury:
        print("Click treasury");
        break;
      case Department.state:
        // ...
        print("Click state");
        break;
      case null:
        print("Click outside");
        // dialog dismissed
        break;
    }
  }
}

 

• 실행화면

클릭 후 콘솔 화면

 

 

 

Dialog 종류별 특징

 

• Dialog
  • 기본적인 Material Design dialog이다.
  • dialog 컨텐츠와 관련된 옵션이 전무하기 때문에 공식문서에서도 사용을 추천하지 않는다. ( Alert dialog나 Simple dialog의 사용을 추천)
• Alert Dialog
  • 메시지와 버튼을 갖는 dialog이다.
  • title, content, actions로 구성되어있다.
  • 일반적으로 확인 및 취소의 bool값이 필요하거나 dialog 내용 확인만 필요한 경우 쓰인다.
• Simple Dialog
  • 여러 가지 옵션을 갖는 dialog로 옵션 선택에 따른 값을 return 받을 때 쓰인다.

 

 

showDialog

 

• showDialog 함수는 앱의 현재 내용 위에 Material dialog를 표현하며 dialog는 확인 및 취소, Modal Barrier 동작, Modal Barrier 색상 등의 옵션을 제공한다.
• 이 함수는 일반적으로 Dialog Widget을 만드는 builder를 가지며, dialog 뒤쪽의 영역은 ModalBarrier에 의해 가려지게 된다. builder가 return한 위젯은 showDialog가 원래 호출된 위치의 컨텍스트를 공유하지 않는다.
• 때문에 dialog를 동적으로 업데이트 해야 하는 경우 StatefulBuilder나 Custom StatefulWidget을 사용해야 한다