오늘 Blog앱을 만들면서 배운 것은
ListView 사용시 Column,Row 안에 있다면 사이즈를 필수로 정해줘야 한다.
저번 책 만들기 앱에서 사용했던 TextField와 비슷한 TextFormField는 사용법은 같지만 유효성 검사를 편하게 해주는 위젯이다.
TextFormField(
controller: writeController,
textInputAction: TextInputAction.done, // 키보드 완료버튼쪽을 수정하는 속성
decoration: InputDecoration(hintText: '작성자'), // 아무 텍스트도 없을 때 떠 있는 텍스트
validator: (value) {
// trim : 문자열 앞 뒤로 공백 제거
if (value?.trim().isEmpty ?? true) { // 조건이 충족 되어있지 않다면 '작성자를 입력해주세요'가 뜸
return '작성자를 입력해 주세요';
}
// 유효성 검사 성공
return null;
},
위에 코드로 유효성 검사를 할 수 있게 한 후 아래의 코드처럼
쓰면 사용자가 "완료" 버튼을 탭을 하면 onTap이 실행되고, 폼의 입력값들이 유효한지 검사한다. 그리고 결과(유효성 검사 결과)를 result 변수에 저장한다.
한마디로 이 코드는 "완료" 버튼을 만들어서, 폼 입력값이 올바른지 확인하는 역할을 한다
GestureDetector(
onTap: () {
final result = formKey.currentState?.validate() ?? false;
},
child: Container(
width: 50,
height: 50,
color: Colors.transparent,
alignment: Alignment.center,
child: Text(
'완료',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
Container 속성중 오늘 하나 배운게 있다
alignment 속성이고 컨테이너 정중앙에 위치하게 해주는 속성이다.
이 책 만들기 앱에서도 사용하였던 코드이다
TextEditingController writeController = TextEditingController();
TextEditingController titleController = TextEditingController();
TextEditingController contentController = TextEditingController();
텍스트를 입력하게하기 위해 키보드를 내려주는 코드이다
writeController
작성자(누가 썼는지)의 텍스트를 관리.
이름을 입력하면 writeController를 통해 이 값을 가져올 수 있음
titleController
제목(글의 제목)을 관리.
제목을 입력하면 이걸 가져오거나 수정할 수 있음
contentController
내용(글의 본문)을 관리.
내용을 가져오거나 수정할 수 있음
책 만들기에서 말했지만
빈 여백을 클릭 하였을 때 키보드가 없어지게 만들어 주는 dispose를 필수적으로 사용 해야한다 .
void dispose() {
writeController.dispose();
titleController.dispose();
contentController.dispose();
반드시 dispose를 써줘야한다.