[Flutter] 팀소개 페이지 만들기

Yeon·2023년 7월 12일
0

Flutter

목록 보기
1/1
post-thumbnail

첫번째 팀 프로젝트 주제는 팀소개 페이지!
파트 분배를 해서 프로필 추가 페이지 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일 이상 걸렸을텐데 팀원들이 많이 도와줘서 진짜 다행이었다😭

0개의 댓글