[Flutter]TextFormField 꾸미기

지난번 포스팅때 아래와 같은 TextFormField를 구현하였습니다.

 

정상적으로 작동하긴하지만 테두리가 아래에만 있어서 내용을 담을 수 있는 칸 같지도 않고 버튼도 기본 스타일이라 별로 이쁘지 않습니다. 그래서 TextFormField의 몇가지 기능을 사용해서 화면을 꾸며보도록 하겠습니다.

---

autovalidateMode

사용자 입력 값을 onSaved() 호출할 때 validation 할지, 변경할 때마다 항상 validation을 할지 설정합합니다.

AutovalidationMode.always로 설정하면 onChange()를 별도로 처리할 필요 없이 사용자가 입력할 때마다 validation을 진행합니다.

 

maxLines

텍스트필드의  최대 줄 수를 지정해 줍니다.

 

cursorColor

cursor의 색을 지정해줍니다.

 

decoration : InputDecoration

텍스트 필드를 장식하는 데 사용되는 테두리, 레이블, 아이콘 및 스타일 등을 지정 할 수 있습니다. 저는 fillColor를 사용해 필드의 배경색을 지정해 주었습니다. 이때 filled: true 까지 같이 작성해주어야 바꾼 색상이 적용 됩니다.

 

Border

먼저 테두리를 꾸며보겠습니다. enaledBorder, focusedBorder, errorBorder, focusedErrorBorder 을 사용하였습니다.

enaledBorder는 필드를 클릭하지 않았을때의 테두리를 지정, focusedBorder는 필드를 클릭했을때의 테두리를 지정, errorBorder는 버튼 클릭 후 에러 발생시 뜨는 테두리를 지정, focusedErrorBorder는 에러 발생 상태에서 필드 클릭했을때의 테두리르 지정해줍니다. 이렇게 각각의 상황에 맞는 테두리를 다 지정해주었습니다.

 

hintText, hintStyle

hintText는 웹에서 사용하는 <textarea> 의 placeholer 같은 역할입니다. 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시해줍니다. hintStyle은 hintText를 꾸며주는 역할을 합니다.

 

errorStyle

에러와 관련된 스타일을 지정할 수 있습니다. 저는 TextStyle을 사용해 에러 시 뜨는 문구의 색을 변경해 주었습니다.

(hint와 마찬가지로 errorText도 존재하지만  제가 만든 프로그램 로직상 따로 지정해줄 필요가 없어서 뺐습니다.)

 

TextFormField(
                        autovalidateMode: AutovalidateMode.always,
                        maxLines: 13,
                        cursorColor: Colors.black,
                        decoration: InputDecoration(
                            filled: true,
                            fillColor: Colors.white,

                            errorStyle: TextStyle(
                              fontSize: 20,
                              color: Colors.blueAccent,
                            ),
                            hintText: "다녀온 리뷰를 정성껏 작성해주세요!!!",
                            hintStyle: TextStyle(
                              fontSize: 16,
                              color: Colors.grey,
                            ),

                            enabledBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(width: 2, color: Colors.grey),
                                borderRadius: BorderRadius.circular(4)),
                            focusedBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(width: 2, color: Colors.black),
                                borderRadius: BorderRadius.circular(4)),
                            errorBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(width: 2, color: Colors.grey),
                                borderRadius: BorderRadius.circular(4)),
                            focusedErrorBorder: OutlineInputBorder(
                                borderSide:
                                    BorderSide(width: 2, color: Colors.black),
                                borderRadius: BorderRadius.circular(4))),

---

버튼은 ElevatedButton.styleFrom을 사용해서 버튼 자체를 꾸며주고 내부의 Text는 TextStyle를 이용해서 꾸며주었습니다.

style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.lightBlueAccent,
                          minimumSize: Size.fromHeight(50), // 높이만 50으로 설정
                          shape: RoundedRectangleBorder(// shape : 버튼의 모양을 디자인 하는 기능
                              borderRadius: BorderRadius.circular(4.0)),
                          shadowColor: Colors.grey,
                        ),
                        child: const Text('작성 완료',style: TextStyle(fontSize: 25,color: Colors.white,fontWeight: FontWeight.bold),),

실행해보면 다음과 같은 화면을 볼 수 있습니다.