# 다이얼로그 (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 스타일의 다이얼로그, 시간 선택, 날짜 선택 및 날짜 범위 선택 다이얼로그 등 다양한 유형의 다이얼로그를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다. 다이얼로그 위젯은 앱의 상황에 따라 다양한 상호 작용 및 정보 전달에 활용됩니다. 이러한 예제를 사용하여 다이얼로그를 효과적으로 활용하여 사용자와의 상호 작용을 개선해보세요. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developer.aliothx.net/start/uiux/ui-ux/dialog.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.