기본 다이얼로그
Simple Dialog
간단한 정보 또는 단일 옵션을 제공하는 다이얼로그입니다.
Copy SimpleDialog(
title: const Text(
'Simple Dialog',
textAlign: TextAlign.center,
),
children: <Widget>[
SimpleDialogOption(
onPressed: () {},
child: const Text(
'Close',
textAlign: TextAlign.center,
),
),
],
);
Alert Dialog
중요한 정보를 표시하거나 사용자의 결정을 요구하는 다이얼로그입니다.
Copy 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
기본 알림 다이얼로그와 동일하지만 모서리가 직사각형인 다이얼로그입니다.
Copy 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
알림 다이얼로그에 텍스트 입력 필드를 추가하는 예제입니다.
Copy 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'),
),
],
);
다이얼로그 위젯은 앱에서 다양한 상황에 맞게 사용자와 소통할 수 있는 강력한 도구입니다. 이러한 예제를 사용하여 앱의 사용자 경험을 향상시킬 수 있습니다.
라디오버튼 다이얼로그
Copy 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
Copy 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
Copy 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
Copy 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
Copy 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'),
),],);
시간 & 날짜 다이얼로그
Time Picker Dialog
Copy TimePickerDialog(
initialTime:
TimeOfDay(
hour: DateTime.now().hour, minute: DateTime.now().minute),);
Date Picker Dialog
Copy DatePickerDialog(
initialDate: DateTime.now(),
firstDate: DateTime(1900),
lastDate: DateTime(2100));
Date Range Picker Dialog
Copy DateRangePickerDialog(
firstDate: DateTime(1900), lastDate: DateTime(2100));
그 외에도 다양한 다이얼로그 위젯이 있습니다. RadioButton, CheckBox, Circle Avatar, Divided, Cupertino 스타일의 다이얼로그, 시간 선택, 날짜 선택 및 날짜 범위 선택 다이얼로그 등 다양한 유형의 다이얼로그를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.
다이얼로그 위젯은 앱의 상황에 따라 다양한 상호 작용 및 정보 전달에 활용됩니다. 이러한 예제를 사용하여 다이얼로그를 효과적으로 활용하여 사용자와의 상호 작용을 개선해보세요.