TextField

TextField를 사용하면 사용자가 앱에 텍스트를 입력할 수 있다.

TextField

TextField는 가장 일반적으로 사용하는 텍스트 입력 위젯

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),
),

---

TextFormField

TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username',
  ),
),

---

입력 값 받기

TextEditingController사용
사용이 끝나면 꼭 리소스를 삭제해 줘야한다.

final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }
  
  TextField(
  	controller: myController,
  )
  
  Text(myController.text)

---

꾸미기

Hint

필드가 비어있는 경우에 표시
hintText 속성으로 설정하고 hintStyle로 스타일 지정
hintMaxLines으로 max line 설정(default는 single line)

TextField(
  decoration: InputDecoration(
    hintText: 'Hello Rabbit',
    hintStyle: TextStyle(
      color: Colors.amber,
      fontWeight: FontWeight.bold,                    
    ),
  ),
),

Label

입력 필드를 설명, Unfocused일 경우 입력 필드에, focused일 경우 상단에 표시
labelText 속성으로 설정, labelStyle로 스타일 지정
labelText는 String이 들어가지만 원한다면 Widget도 가능

TextField(                
  decoration: InputDecoration(
    labelText: 'Rabbit',
    labelStyle: TextStyle(
      color: Colors.purple,
      fontWeight: FontWeight.bold,                    
    ),
  ),
),

helperText, prefixText, suffixText

helperText는 입력박스 아래에 prefixText는 입력박스 앞에 suffixText는 입력박스 뒤에 표시

TextField(                
  decoration: InputDecoration(
    helperText: 'Rabbit Helper!',
    helperStyle: TextStyle(color: Colors.lightGreen),
  ),              
),

No border

기본적으로 underline 이 있지만 InputBorder.none을 할 경우 밑줄이 제거 됨

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: InputBorder.none,
  ),              
),

Outline border

OutLineInputBorder() 를 사용하면 TextField를 테두리로 감싸 줌.
borderRadius로 테두리 설정 가능

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),              
),

테두리 꾸미기

focusedBorder, enabledBorder, disabledBorder, errorBorder, focusedErrorBorder 사용

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.amber, width: 4),
      borderRadius: BorderRadius.circular(12),                  
    ),
  ),              
),

background color

filled 값을 true로 주고 fillColor 설정

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    filled: true,
    fillColor: Colors.amber,
  ),              
),

Icon

Icon을 사용하면 입력필드 바깥에 아이콘 생성

TextField(                
  decoration: InputDecoration(                            
    icon: Icon(Icons.add_reaction_rounded),                
  ),              
),

Prefix Icon, Suffix Icon

Prefix Icon은 입력박스 앞에, Suffix Icon은 입력박스 뒤에 아이콘 생성

TextField(                
  decoration: InputDecoration(                            
    prefixIcon: Icon(Icons.add_reaction_rounded),                
  ),              
),

참조
flutter.dev
Medium