Overview.
약간 alert 와 같은 Dialog 창을 만들어 보자
- ShowDialog , AlertDialog
- CupertinoAlertDialog
- CupertinoDialogAction <모르겠음 ㅋ>
0. 문서
https://api.flutter.dev/flutter/material/AlertDialog-class.html
https://api.flutter.dev/flutter/cupertino/CupertinoAlertDialog-class.html
https://api.flutter.dev/flutter/cupertino/CupertinoDialogAction-class.html
1. ShowDialog , AlertDialog 란?
ShowDialog
- barrierDismissible : 바깥 영역 터치시 닫을지 여부
- title : 제목
- center : 내용
- actions : 버튼
AlertDialog(다이얼로그)는 유저에게 메시지를 보여주거나, 특정 조치를 요구하거나, 일부 정보를 요청하는데 사용할 수 있는 위젯입니다.
라는데 뭐 그냥 한번 보시죠!
보면 감이 잡히죠? ㅋㅋㅋ 이것을 버튼을 눌렀을 때 창이 뜨도록 할 수 있는데 바로 showDialog 를 활용하는 것입니다.
코드로 보시죠 Navigator 활용을 위해 buildContext 를 매개변수로 잡아 주시고 뿌려주면 끝!
...
class _Home extends StatelessWidget {
const _Home({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
// showDialog (alert 와 같은 느낌)
// context : context
// builder 빌드할 아이
showDialog(
context: context,
builder: (context) => buildAlertDialog(context),
);
},
child: Text("버튼"),
),
),
),
);
}
// 함수화
AlertDialog buildAlertDialog(BuildContext context) {
return AlertDialog(
title: Text("alert 다이아로그"),
backgroundColor: Colors.white,
// 액션을 지정할 수 있음
actions: <Widget>[
TextButton(
child: const Text('닫기'),
onPressed: () {
// 이전 화면 빌드 (pop : stack 자료형인듯)
Navigator.of(context).pop();
},
),
],
);
}
}
2. CupertinoAlertDialog
좀더 예쁜(?) 다이아 로그예영 얘도 따로 메서드를 빼놨습니다.
CupertinoAlertDialog buildCupertinoAlertDialog(BuildContext context) {
return CupertinoAlertDialog(
title: Text("쿠퍼디노 다이아그램"),
content: Text("내용오옹ㅇㅇㅇ"),
actions: <Widget>[
TextButton(onPressed: () {}, child: Text("적용")),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("닫기")),
],
);
}
3. CupertinoDialogAction
얘는 좀 모르겠는데 커스텀? 이 가능한 얘인것 같아요 잘 안되서 그냥 skip 할 게요
// 얘는 뭐 얼캐 사용하지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
CupertinoDialogAction buildCupertinoDialogAction(BuildContext context) {
return CupertinoDialogAction(
child: Container(
height: 300,
color: Colors.white,
child: Row(
children: [
Expanded(child: Text("안녕하세요오")),
Expanded(child: Text("하하하핳")),
],
),
),
);
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - Align 위젯 (0) | 2024.04.01 |
---|---|
flutter & dart - hero animation (0) | 2024.04.01 |
flutter & dart - 버튼 활성화와 비활성화 AbsorbPointer (0) | 2024.04.01 |
flutter & dart - 도형을 만드는 ClipRRect , ClipOval , ClipPath (0) | 2024.04.01 |
flutter & dart - ListTile 위젯 (0) | 2024.04.01 |