overview.
ios의 경고창인 CupertinoDialog 에 대해 알아봅니다.
- flutter Cupertino Alert Dialog
- Cupertino 경고 대화 상자 생성
- 예제
1. Flutter Cupertino Alert Dialog란?
Cupertino 경고 대화 상자는 iOS 스타일 경고 대화 상자를 표시하는 데 사용되는 Flutter의 위젯입니다. 작업을 수행하는 동안 사용자로부터 확인을 받는 데 이를 사용합니다. 예를 들어 파일을 삭제하는 동안 작업을 삭제할지 취소할지 확인하는 메시지가 표시됩니다. 경고 대화 상자에는 제목, 내용, 작업의 세 가지 속성이 있습니다. 상단에는 제목이 표시되고 이어서 콘텐츠와 작업이 표시됩니다. 이러한 속성은 선택 사항이지만 대화 상자의 기본 사항이므로 사용해야 합니다.
2. Cupertino 경고 대화 상자 생성
Flutter에서 cupertino 경고 대화 상자를 만들려면 CupertinoAlertDialog 클래스의 생성자를 호출하고 필수 속성을 제공해야 합니다. Cupertino 경고 대화 상자에는 필수 속성이 없으므로 원하는 속성을 사용할 수 있습니다. 일반적으로 경고 대화 상자를 완성하는 제목과 작업을 사용합니다. 제목과 내용에는 텍스트 위젯을 사용하겠습니다 . 작업에는 CupertinoDialogAction 위젯을 사용합니다 .
CupertinoAlertDialog(
{Key? key,
Widget? title,
Widget? content,
List<Widget> actions,
ScrollController? scrollController,
ScrollController? actionScrollController,
Duration insetAnimationDuration,
Curve insetAnimationCurve}
)
제목
예시 )
CupertinoAlertDialog(
title: Text("Delete File"),
);
콘텐츠
Cupertino 경고 대화 상자에서 사용자에게 메시지를 추가하기 위해 콘텐츠 속성을 사용합니다. 또한 텍스트 위젯을 값으로 사용합니다.
CupertinoAlertDialog(
title: Text("Delete File"),
content: Text("Are you sure you want to delete the file?"),
);
행위
cupertino 경고 대화 상자에 작업을 추가하기 위해 콘텐츠 속성을 사용합니다. 일반적으로 작업에는 CupertinoDialogAction 위젯을 사용합니다.
CupertinoAlertDialog(
title: Text("Delete File"),
content: Text("Are you sure you want to delete the file?"),
actions: [
CupertinoDialogAction(
child: Text("YES"),
onPressed: ()
{
Navigator.of(context).pop();
}
),
CupertinoDialogAction(
child: Text("NO"),
onPressed: (){
Navigator.of(context).pop();
}
)
],
);
사용자가 작업을 선택하지 않은 경우에도 대화 상자를 닫으려면 showCupertionDialog의 BarrierDismissible 속성을 true로 설정하세요. 기본적으로 이 값은 false입니다.
showCupertinoDialog(
context:context,
builder:(){
CupertinoAlertDialog();
}
barrierDiamissible: true,
)
3. 예제
사용할 showCupertinoDialog는 함수입니다. 해당 함수를 호출하게 되면 CupertinoAlertDialog 위젯이 화면에 팝업됩니다.
플러터는 MaterialApp에서 iOS의 디자인을 그릴 수 있습니다. 그 이유는 Skia 엔진 덕분입니다.
팝업을 사라지게 하려면 Navigator.pop() 함수를 이용하여 Stack에서 제거하면 됩니다
Widget _buildDetailButton(BuildContext context) {
return Align(
child: TextButton(
onPressed: () {
showCupertinoDialog(
context: context,
builder: (context) => CupertinoAlertDialog(
title: Text("장바구니에 담으시겠습니까?"),
actions: [
CupertinoDialogAction(
child: Text("확인"),
onPressed: () {
Navigator.pop(context);
},
),
],
),
); // end of showCupertinoDialog
},
//...생략
※ 문서
https://codesinsider.com/flutter-cupertino-alert-dialog-example/
'flutter & dart' 카테고리의 다른 글
flutter & dart - 콜백 (callback) 함수 (0) | 2024.03.13 |
---|---|
flutter & dart - InkWell (0) | 2024.03.13 |
flutter & dart - Stack 위젯과 Positioned 위젯 (0) | 2024.02.28 |
flutter & dart - StatefulWidget 과 StatelessWidget (2) | 2024.02.27 |
flutter & dart - Navigator (0) | 2024.02.27 |