공통적으로 사용하는 rounded box form 만들어 사용하기

[call-me-bammer]

현재 이메일 및 비밀번호 폼, plainText 일정 등록 폼 등 모두 기본 bottom border만 표시되어 있는 폼을 쓰는데 아래 형식대로 바꿔서 사용할 것이다.

• 양 끝은 45도 이상, 반원 형태로 마감할 것
• drop shadow 넣을 것
• 아래 항목들은 컴포넌트화하여 사용 시 받아서 사용할 수 있도록 할 것
  • hint text 값
  • 폼 우측 내부 아이콘의 존재 여부 및 클릭 시 동작 (예를 들어, 내용 삭제 및 비밀번호 보이기), 종류

폼 우측 바깥 아이콘은 폼과 별개로 구현하고 그럴 것임.

[call-me-bammer]

기존의 AuthTextFormField에서의 변경사항 입니다. 이름은 나중에 RoundedInputBox로 바꾸겠습니다.

TextFormField를 Container로 감싸고 아래 decoration 속성을 줘서, 반원 형태로 양끝을 마감하고 drop shadow를 줍니다. 피그마에서 drop shadow에 줄 수 있는 부분과 동일해서 거의 똑같이 보입니다.

decoration: BoxDecoration(
        color: ColorPalette.GRAY_COLOR[50]!,
        borderRadius: BorderRadius.circular(45),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.25),
            blurRadius: 4,
            offset: Offset(0, 4),
          ),
        ],
      ),

TextFormField 안의 decoration, InputDecoration에서는 hintStyle, suffixIcon, onIconPressed 등을 줍니다.

InputBorder.none으로 TextFormField의 기본 하단 스트로크를 없앱니다.

decoration: InputDecoration(
          hintText: hintText,
          hintStyle: TextStyle(
            color: ColorPalette.GRAY_COLOR[400]!,
            fontSize: 14,
          ),
          counterText: '',
          /* give contentPadding to hintText align vertically center */
          contentPadding: EdgeInsets.symmetric(vertical: 12),
          /* set prefix to default IconButton size to hintText align horizontally center */
          prefix: SizedBox(width: 48),
          suffixIcon: IconButton(
            icon: Icon(
              suffixIcon,
              color: ColorPalette.GRAY_COLOR[400]!,
              size: 18,
            ),
            onPressed: () {
              onIconPressed();
            },
          ),
          enabledBorder: InputBorder.none,
          focusedBorder: InputBorder.none,
        ),

[call-me-bammer]

UI 기준 height: 36으로 맞춰야하는데, 전송 또는 음성 입력 버튼과 Row 내에서 해당 폼들이 Expanded로 묶여있어서, Container로 감싸도 너비 및 높이 조절이 당장은 불가능함. 너무 높아서 어색하다 싶으면 수정하겠음.

아무튼 RoundedInputBox으로 위젯 및 파일명 변경했고, 로그인 및 자연어, 음성 입력 동작 확인함.

참고로 최대로 입력할 수 있는 길이, maxLength에 대해서

• 이메일 40
• 비번 20
• 자연어 및 음성 300으로 제한을 두었음.