# 다이얼로그 (Dialog)

## **기본 다이얼로그** 

### **Simple Dialog** 

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FkllgGV6vPQi9M35uFXPF%2Fimage.png?alt=media\&token=cfbba643-c43a-47ee-ad15-91ca0b24ae7c)

간단한 정보 또는 단일 옵션을 제공하는 다이얼로그입니다.

```dart
SimpleDialog(
  title: const Text(
    'Simple Dialog',
    textAlign: TextAlign.center,
  ),
  children: <Widget>[
    SimpleDialogOption(
      onPressed: () {},
      child: const Text(
        'Close',
        textAlign: TextAlign.center,
      ),
    ),
  ],
);
```

### **Alert Dialog**&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FFAHnpsbMkaAQgKMW24dv%2Fimage.png?alt=media\&token=cd2ad579-f089-413b-800a-b579351c4a62)

중요한 정보를 표시하거나 사용자의 결정을 요구하는 다이얼로그입니다.

```dart
AlertDialog(
  title: const Text(
    'Alert Dialog',
    textAlign: TextAlign.center,
  ),
  content: const Text(
    'description',
    textAlign: TextAlign.center,
  ),
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
  ],
);
```

### **Rectangle AlertDialog**

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FolDRm66fvUg7P6ZEZgAT%2Fimage.png?alt=media\&token=60736f94-9995-4bbe-9e84-622ef6be2531)

기본 알림 다이얼로그와 동일하지만 모서리가 직사각형인 다이얼로그입니다.

```dart
AlertDialog(
  title: const Text(
    'Rectangle Alert Dialog',
    textAlign: TextAlign.center,
  ),
  content: const Text(
    'description',
    textAlign: TextAlign.center,
  ),
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
  ],
  shape: RoundedRectangleBorder(),
);
```

### **TextField in AlertDialog**

### ![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FctZtYBkFvY8HCuSj8JB0%2Fimage.png?alt=media\&token=f6b053f3-06e1-41fd-997a-d54d928e5c01)&#x20;

알림 다이얼로그에 텍스트 입력 필드를 추가하는 예제입니다.

```dart
AlertDialog(
  title: Text(
    'TextField in Alert Dialog',
    textAlign: TextAlign.center,
  ),
  content: TextField(
    onChanged: (value) {},
    decoration: InputDecoration(hintText: "add text"),
  ),
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
  ],
);
```

다이얼로그 위젯은 앱에서 다양한 상황에 맞게 사용자와 소통할 수 있는 강력한 도구입니다. 이러한 예제를 사용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

## 라디오버튼 다이얼로그

### RadioButton Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FV2Q3TbTBN5oJLtspCmvE%2Fimage.png?alt=media\&token=b61feb4a-17f7-457a-8722-ad4e4f5427ed)

```dart
RadioButtonDialog(
          title: Text('RadioButton Dialog', textAlign: TextAlign.center),
          actions: <Widget>[
            TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel')),
            TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK')),],
          itemCount: 10,
          radiobuttonlist: [...],);
```

## 체크박스 다이얼로그

### CheckBox Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Ff8hgICY4YtMSssSjBHpi%2Fimage.png?alt=media\&token=064ee519-347a-48ae-a583-a9576e90c8aa)

```dart
CheckBoxDialog(
          title: Text('Checkbox Dialog', textAlign: TextAlign.center),
          actions: <Widget>[
            TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel')),
            TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK')),],
          itemCount: 10,
          checkboxlist: {
            ...},);
```

## 커스텀 다이얼로그

### Circle Avatar Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FjgieJWpmZbeVr1gAic2u%2Fimage.png?alt=media\&token=bbcf2e2f-e20b-415e-b501-d0057e172f50)

```dart
CircleAvatarDialog(
          title: Text('Circle Avatar Dialog', textAlign: TextAlign.center),
          actions: <Widget>[
            TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel')),
            TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK')),],
          content: const Text(
            'description',
            textAlign: TextAlign.center,),
          circleForegroundColor: theme.primaryColorDark,
          circleBackgroundColor: theme.primaryColor,
          child: Icon(Icons.help),);
```

### Divided Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Fpix0fpyNMrj81MXvkPxU%2Fimage.png?alt=media\&token=948c2e0e-ec84-49fc-b21d-a5947a708457)

```dart
DividedDialog(
          title: Text(
            'Divided Dialog',
            style: TextStyle(fontWeight: FontWeight.bold),),
          buttonText: 'Close',
          topColor: Colors.white,
          bottomColor: theme.primaryColor,
          buttonColor: Colors.white,
          buttonTextColor: Colors.black,
          height: 200,
          content: const Text(
            'description',
            textAlign: TextAlign.center,),
          onPressed: () => {Navigator.of(context).pop()},);
```

## 쿠퍼티노 다이얼로그

### Cupertino Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F5VuEUUkAvhEqfEit7VNu%2Fimage.png?alt=media\&token=628e503e-8ca7-49a0-88bf-4b7a8d517ff7)

```dart
CupertinoAlertDialog(
          title: const Text('Cupertino Dialog'),
          content: const Text('description'),
          actions: <CupertinoDialogAction>[
            CupertinoDialogAction(
              isDestructiveAction: true,
              onPressed: () {
                Navigator.pop(context, null);},
              child: const Text('Cancel'),),
            CupertinoDialogAction(
              isDefaultAction: true,
              onPressed: () {
                Navigator.pop(context, null);},
              child: const Text('OK'),
            ),],);
```

## 시간 & 날짜 다이얼로그&#x20;

### Time Picker Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FyIItxHnoB6UwJPDe26Op%2Fimage.png?alt=media\&token=705152ad-e8d8-470b-a33c-7f25a572a143)

```dart
TimePickerDialog(
          initialTime:
              TimeOfDay(
                  hour: DateTime.now().hour, minute: DateTime.now().minute),);
```

### Date Picker Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FwRh9G60pAWFuWUxAGDWd%2Fimage.png?alt=media\&token=58ff7b9e-9dc9-436a-bedb-c543c16f102a)

```dart
DatePickerDialog(
            initialDate: DateTime.now(),
            firstDate: DateTime(1900),
            lastDate: DateTime(2100));
```

### Date Range Picker Dialog

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FeAA23JCN54BqNMibU7aJ%2Fimage.png?alt=media\&token=1f73b6fb-1ece-42c4-a382-55aedb579f95)

```dart
DateRangePickerDialog(
                  firstDate: DateTime(1900), lastDate: DateTime(2100));
```

그 외에도 다양한 다이얼로그 위젯이 있습니다. RadioButton, CheckBox, Circle Avatar, Divided, Cupertino 스타일의 다이얼로그, 시간 선택, 날짜 선택 및 날짜 범위 선택 다이얼로그 등 다양한 유형의 다이얼로그를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

다이얼로그 위젯은 앱의 상황에 따라 다양한 상호 작용 및 정보 전달에 활용됩니다. 이러한 예제를 사용하여 다이얼로그를 효과적으로 활용하여 사용자와의 상호 작용을 개선해보세요.