첫번째 팀 프로젝트 주제는 팀소개 페이지!
파트 분배를 해서 프로필 추가 페이지 UI와 약간의 기능 구현을 맡게 되었다.
프로필 추가 페이지에 필요한 UI
- 상단에 무슨 페이지인지 알려주는 AppBar
- 정보를 입력할 수 있는 TextField
- 정보를 저장할 때 누르는 ElevatedButton
TextField와 TextFormField
- 두 위젯 모두 사용자로부터 텍스트 입력을 받을 수 있음
- TextField: 단순한 텍스트 입력 필드를 제공
- TextFormField는 Form과 유효성 검사, 자동 스타일링, 텍스트 입력 관리 등과 같은 고급 기능을 제공
AppBar
에뮬레이터에 실행했을때 뒤로가기 버튼이 있길래 구현되어있는 줄 알았는데 그냥 자동으로 생기는 기종이었던거...
팀장님이 추가해줬당. 뒤로가기 버튼이 자동으로 생기는 휴대폰이 있고 아닌 것도 있어서 꼭 구현을 해줘야 한다고 한다.
// flutter
appBar: AppBar(
centerTitle: true, // AppBar 타이틀 중앙정렬
backgroundColor: Colors.black,
title: Text(
'Add Profile',
style: TextStyle(
fontFamily: 'abar',
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
// AppBar 왼쪽에 뒤로가기 버튼
leading: IconButton(
onPressed: () {
bartenderService.removeItem(index: index);
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back),
),TextField
TextFormField로 작성했다가 다른 기능을 추가하려는데 계속 오류가 나서 TextField로 바꿔줬다.
처음부터 TextField로 할껄...ㅎㅎ
TextField(
style: TextStyle( // 사용자가 입력한 글의 스타일
color: Colors.white,
fontFamily: 'abar',
),
controller: NameController,
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next, // Keyboard Enter키 속성 - 다음 필드로 넘어감
maxLines: null, // 여러줄 작성
decoration: InputDecoration(
label: Text(
'Name',
style: TextStyle( // 라벨 글 스타일
color: Colors.white,
fontFamily: 'abar',
),
),
hintText: 'Enter Your Name',
hintStyle: TextStyle( // 힌트텍스트 글 스타일
color: Colors.grey,
fontFamily: 'abar',
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white), // Text Field 언더바색상
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.amber, // Text Field 포커스 잡혔을때 테두리 색상
),
),
),
),
SizedBox(height: 10), // 위아래 텍스트 필드 겹침 방지ElevatedButton
기능 구현이 어려웠던 ElevatedButton😭
조건문부터 showDialog, updateItem까지 팀원들 없었으면 며칠밤 새야 됐을 수도...
ElevatedButton(
onPressed: () {
if (NameController.text.isEmpty ||
AgeController.text.isEmpty ||
MBTIController.text.isEmpty ||
ADController.text.isEmpty ||
BlogController.text.isEmpty ||
StyleController.text.isEmpty) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('빈칸이 존재합니다!'),
content: Text('빈칸을 채워주세요!'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(); // Close the dialog
},
child: Text('OK'),
),
],
);
},
);
} else {
bartenderService.updateItem(
index: index,
btName: NameController.text,
btMbti: MBTIController.text,
btAge: AgeController.text,
btAdvantage: ADController.text,
btBlog: BlogController.text,
btStyle: StyleController.text
);
Navigator.of(context).pop();
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber,
),
child: const Text(
'Submit',
style: TextStyle(
fontFamily: 'abar',
fontWeight: FontWeight.bold,
),
),
),코드는 전체 중 일부만 써보았다.
난 거의 틀만 잡았고 ElevatedButton을 눌렀을때 다른 페이지와 연동되는 코드는 팀원들이 해줬다. 진짜 우리팀 쵝오...
처음에 TextField가 아닌 TextFormField로 작성해서 다른 페이지와 merge할 때 에러가 나서 팀장님이 일일이 수정해줬다ㅠㅠㅜㅠ그냥 처음부터 TextField로 할껄....감당하지도 못하는거 유효성 검사 그거에 혹해서 팀원들만 번거롭게 했다.
솔직히 혼자했으면 적어도 3일 이상 걸렸을텐데 팀원들이 많이 도와줘서 진짜 다행이었다😭
