[프로젝트] 우리 처음 만난날 U&I (2) DatePicker 사용
들어가기 앞서...
이번 게시글에는 하트 버튼을 누르면 처음 만난 날을 입력할 수 있는 다이얼로그를 만들것이다.
본문으로...
import 되어 있는 부분을 설명하겠다!
이번에 DatePicker 를 사용하면 자동적으로 import 가 되는 것을 볼 수 있는데,
cupertino.dart 는 Ios 디자인 관련해서 사용할 때 import 하는 package 이고,
material.dart 는 Andorid 디자인 관련해서 사용할 떄 import 하는 package 이다.
showCupertinaoDialog() 을 사용하면 우리가 버튼을 클릭 했을때, 다이얼로그가 나오는 위젯이다.
builder 에는 build 함수마냥 작성을 해주면 된다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
...
IconButton(
iconSize: 60.0,
onPressed: () {
showCupertinoDialog(context: context, builder: (BuildContext context){
return Container(
);
});
},
icon: Icon(
Icons.favorite,
color: Colors.red,
)),
...하트 아이콘을 클릭했더니, builder 안의 Container 가 실행된 모습이다! 아직은 아무것도 작성을 한게 없어서 뭐가 씌워진것처럼 어두워졌다!
여기서 스타일을 조금 수정을 해주자!
color: Colors.white,
height: 300.0,
하지만 결과 모습이 높이 300 이라기엔 너무나도 길게 나왔다.
그 이유는 어디에 정렬을 해야하는지 알수 없으면 플러터 프레임 워크는 최대한의 사이즈로 먹어라! 라고 되어있기 떄문이다.
그렇기에 새로운 위젯을 한번 사용해보자!
...
return Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white,
height: 300.0,
);
);
...
꿀팁💡 위젯이 갑자기 앱 전체를 덮는다? 해결방법은? 💡
위젯에 특정 사이즈를 정했는데 앱 화면 전체를 덮는다면 플러터 프레임 워크에서 위젯이 어디에 정렬해야하는지 모르기 떄문이다.
그럴때 Align () 위젯을 사용해서 child 의 위치를 지정해주면 된다!
- 이제는 닫아보자!
지금까지 하트 아이콘을 눌러서 열기만 했지, 닫는 함수는 만들지 못해서 계속 HoteRestart 만 해왔다! showCupertinoDialog() 위젯에는 barrierDismissible 이라는 파라미터가 있다 defualt 는 false 지만 true 로바꿔주면! 영상에 나오듯이 Container() 의 밖에 부분을 클릭하면 닫히는 것을 볼 수 있다!
- 날짜를 클릭할 수 있게끔 해주자!
날짜를 나오게 하려면 DatePicker 를 사용해 볼 것이다.
DatePicker 사용법은 매우 간단하다.
...
return Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white,
height: 300.0,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
onDateTimeChanged: (DateTime date) {
print(date);
},
),
),
);
...mode 에는 날짜를 고르는 것으로 해주고, 필수로 필요한 파라미터는 onDateTimeChanged이다. on 이 들어갔으니, 날짜가 바뀌었을때 라고 생각할 수있고, 함수인 것을 앓 수 있다. DateTime date 라고 첫번째 인수에 들어갈 것을 대충 짐작할 수 있다. 이걸 모르겠다면, Go to ~ 로 함수 설명을 보러 가보자!
제너릭에 DateTime 날짜가 들어가는 것을 볼 수 있다! 한번더 Go to ~해보겠다
<T> 의 값이 DateTime 이라는 것이다.
터미널에서 결과를 보자! 스크롤 할때 마다 print 되는것을 볼 수있다!
여담으로 애플의 본사 위치가 Cupertino 라고 한다.
끝으로...
- DatePicker 의 사용법을 알았고 적용할 줄 알았다!
- Cupertino 를 사용해 다이얼로그가 나오게 하였고, 백그라운드를 클릭하면 사라지게 만들줄 안다!
