수강 강의: https://url.kr/inflearn
진도: 110강 / 178강
① 일정 스케쥴러
0. 진행 상황
어제 강의를 듣고 만든 앱의 진행상황은 위와 같다.
1. 화면 구현
1-1. padLeft
입력받은 시간을 24시간제로 보이게 하려면 어떻게 해야할까?
Text('${startTime.toString().padLeft(2, '0')},),String에는 다음과 같이 Padding을 적용할 수 있다. 위와 같이 왼쪽에 적용하고 싶은 경우에는 padLeft 를 해주는데, 맨 처음 값은 최소 글자수이고, 다음 값은 최소 글자수가 되지 않을 경우에 어떤 글자로 최소 글자수를 채울 것인지 입력하면 된다.
따라서 startTime에 9가 왔다면, Text는 09로 나오게 된다.
startTime에 12가 왔다면, Text는 그대로 12로 나온다.
1-2. copyWith
지정한 스타일에서 특정 값만 바꾸려면 어떻게 해야할까?
Text('${startTime.toString().padLeft(2, '0')},
style: textStyle.copyWith(
fontSize: 10.0))이미 만들어둔 textStyle에서 특정 값만 바꾸고 싶을 때는 위와 같이 copyWith를 사용하면 된다.
1-3. IntrinsicHeight
다른 Children의 최대 크기에 맞게 자식 위젯의 크기를 정해주려면 어떻게 해야할까?
IntrinsicHeight : 자식의 크기를 자식의 고유 높이로 조정하는 위젯이다. 자식의 최대 고유 높이를 충족할 만큼 충분히 크지 않으면 자식은 그렇지 않은 경우보다 더 작은 높이를 갖게 된다.
공식 문서를 보니 O(N²)이 될 수도 있으니 가능하면 사용하지 말라고 한다.
1-4. ListView.separated
ScheduleCard를 스크롤 할 수 있도록 하려면 어떻게 해야할까?
ListView.separated를 이용한다.
itemBuilder: ListView.separated에서 itemBuilder를 itemCount번 실행한다.separatorBuilder: ListView.separated에서 itemBuilder가 실행되고 그 다음에 separatorBuilder가 실행된다. 마찬가지로 itemCount번 실행한다.
1-5. Bottomsheet
showModalBottomsheet : 사용자가 앱의 나머지 부분과 상호 작용하는 것을 방지하는 하단 시트를 표현한다.
1-6. viewInsets
TextField: 키보드를 통해 Text를 입력받을 수 있다.
그런데 문제가 있다. Bottomsheet에서 TextField가 실행되면 키보드가 올라오면서 Bottomsheet가 보이지 않게 된다. 이 경우엔 어떻게 해야할까?
가려진 화면 만큼 padding을 주면 된다.
viewInsets: 시스템에 의해 가려진 화면의 크기를 가져올 수 있다.
따라서 viewInsets로 가려진 화면의 크기를 구하고 그 값만큼 TextField에 Padding을 준다.
그런데 이렇게 하면 bottomsheet의 최대 사이즈가 디바이스의 반으로 설정되기 때문에 Padding이 원하는 만큼 되지 않는다.
따라서 isScrollControlled를 True로 바꿔준다.
=> 키보드의 사이즈를 고려한 Bottomsheet를 만들 수 있었다.
1-7. Wrap
Row를 사용하는 경우에, Row의 자식들이 화면 범위를 벗어나면 에러가 난다. 이 경우엔 어떻게 해야할까?
Row 대신 Wrap 위젯을 사용한다.
Wrap : 자식을 배치하는데 공간이 없으면 아래 줄로 내린다. Row와 Column 모두를 대체할 수 있다.
Wrap(
spacing: 8.0, // 자식의 좌우 거리
runSpacing: 4.0, // 자식의 상하 거리 (라인의 거리)
childer: [],), 위와 같이 사용할 수 있다.
1-8. FocusScope
TextField에서 키보드로 입력을 하고 빈 화면을 클릭하면 키보드가 닫히도록 하려면 어떻게 해야할까?
전체 화면을 GestureDetector로 감싸고, onTap: FocusScope.of(context).reqiestFocus(FocusNode()); 를 해주면 된다.
FocusScope를 하면 Focus 되어 있는 TextField에서 벗어날 수 있다.
1-9. inputFormatters
TextField에서 숫자만 입력받으려면 어떻게 해야할까?
inputFormatters : TextField로 입력받을 타입을 지정할 수 있다.
inputFormatters: [FilteringTextInputFormatter.digitsOnly],위와 같이 하면 숫자만 입력받을 수 있다.
1-10. maxLines
TextField에서 입력받을 때, 줄바꿈이 되도록 하려면 어떻게 해야할까?
maxLines : 1이 오면 한줄로, null이 오면 줄바꿈이 무한대로 되도록 한다.
1-11. expands
expands : TextField의 크기를 부모사이즈의 크기만큼 최대한으로 늘려준다.
2. SQL
왜 데이터가 초기화되지?
앱을 재시작하면 설정한 값들이 리셋된다. 이를 해결하기 위해 SQL을 사용해보자.
SQL : Structured Query Language
- Table : 정보를 담는 구조
- Select : 데이터 선택하기
- Update : 데이터 업데이트하기
- Delete : 데이터 삭제하기
- Join : 여러 테이블 합치기 (Many to One Relationshp)
