> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/dialog.md). # 다이얼로그 (Dialog) ## **기본 다이얼로그** ### **Simple Dialog** ![](/files/TI3CF7WDY6qRRsXz44XK) 간단한 정보 또는 단일 옵션을 제공하는 다이얼로그입니다. ```dart SimpleDialog( title: const Text( 'Simple Dialog', textAlign: TextAlign.center, ), children: [ SimpleDialogOption( onPressed: () {}, child: const Text( 'Close', textAlign: TextAlign.center, ), ), ], ); ``` ### **Alert Dialog** ![](/files/kQvhDMcL1yyr2YjOZoO9) 중요한 정보를 표시하거나 사용자의 결정을 요구하는 다이얼로그입니다. ```dart AlertDialog( title: const Text( 'Alert Dialog', textAlign: TextAlign.center, ), content: const Text( 'description', textAlign: TextAlign.center, ), actions: [ TextButton( onPressed: () => Navigator.pop(context, 'Cancel'), child: const Text('Cancel'), ), TextButton( onPressed: () => Navigator.pop(context, 'OK'), child: const Text('OK'), ), ], ); ``` ### **Rectangle AlertDialog** ![](/files/dfqygqwbQlptTLa9dwLe) 기본 알림 다이얼로그와 동일하지만 모서리가 직사각형인 다이얼로그입니다. ```dart AlertDialog( title: const Text( 'Rectangle Alert Dialog', textAlign: TextAlign.center, ), content: const Text( 'description', textAlign: TextAlign.center, ), actions: [ 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** ### ![](/files/m3BUozrmFkJuqXu5gUJu) 알림 다이얼로그에 텍스트 입력 필드를 추가하는 예제입니다. ```dart AlertDialog( title: Text( 'TextField in Alert Dialog', textAlign: TextAlign.center, ), content: TextField( onChanged: (value) {}, decoration: InputDecoration(hintText: "add text"), ), actions: [ TextButton( onPressed: () => Navigator.pop(context, 'Cancel'), child: const Text('Cancel'), ), TextButton( onPressed: () => Navigator.pop(context, 'OK'), child: const Text('OK'), ), ], ); ``` 다이얼로그 위젯은 앱에서 다양한 상황에 맞게 사용자와 소통할 수 있는 강력한 도구입니다. 이러한 예제를 사용하여 앱의 사용자 경험을 향상시킬 수 있습니다. ## 라디오버튼 다이얼로그 ### RadioButton Dialog ![](/files/WMNtJvGYFTb82euwCTQ9) ```dart RadioButtonDialog( title: Text('RadioButton Dialog', textAlign: TextAlign.center), actions: [ 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 ![](/files/zlsuxWt6ZCDhDaS8ruV0) ```dart CheckBoxDialog( title: Text('Checkbox Dialog', textAlign: TextAlign.center), actions: [ 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 ![](/files/xm0thvci53cRqQufvqOZ) ```dart CircleAvatarDialog( title: Text('Circle Avatar Dialog', textAlign: TextAlign.center), actions: [ 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 ![](/files/ADZgLnpFAkIEKF1VQsx2) ```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 ![](/files/HWnrdbF9GoObLCR4erls) ```dart CupertinoAlertDialog( title: const Text('Cupertino Dialog'), content: const Text('description'), actions: [ CupertinoDialogAction( isDestructiveAction: true, onPressed: () { Navigator.pop(context, null);}, child: const Text('Cancel'),), CupertinoDialogAction( isDefaultAction: true, onPressed: () { Navigator.pop(context, null);}, child: const Text('OK'), ),],); ``` ## 시간 & 날짜 다이얼로그 ### Time Picker Dialog ![](/files/On9jqgZU5oyXu9RRABhO) ```dart TimePickerDialog( initialTime: TimeOfDay( hour: DateTime.now().hour, minute: DateTime.now().minute),); ``` ### Date Picker Dialog ![](/files/itFc074z2ooWtG3noAU2) ```dart DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(1900), lastDate: DateTime(2100)); ``` ### Date Range Picker Dialog ![](/files/To0Ki1zoaZ9koCiGUg76) ```dart DateRangePickerDialog( firstDate: DateTime(1900), lastDate: DateTime(2100)); ``` 그 외에도 다양한 다이얼로그 위젯이 있습니다. RadioButton, CheckBox, Circle Avatar, Divided, Cupertino 스타일의 다이얼로그, 시간 선택, 날짜 선택 및 날짜 범위 선택 다이얼로그 등 다양한 유형의 다이얼로그를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다. 다이얼로그 위젯은 앱의 상황에 따라 다양한 상호 작용 및 정보 전달에 활용됩니다. 이러한 예제를 사용하여 다이얼로그를 효과적으로 활용하여 사용자와의 상호 작용을 개선해보세요.