[Flutter] TextField

좌측 상단에 label표시 되는 것을 floatingLabelBehavior라고 한다.

계속해서 표시되는 것을 원하는 경우

  TextField(
    decoration: InputDecoration(
      labelText: "label text",
      hintText: "hint text",
      helperText: "helper text",
      floatingLabelBehavior: FloatingLabelBehavior.always,
      border: OutlineInputBorder(),
    ),
  )

 

LineBreak 줄바꿈이 자동으로 일어나도록 하고 싶은 경우

maxLines: null,

 

텍스트 위치와 높이(Height)을 조정하고 싶은 경우

isCollapsed: true

  decoration: const InputDecoration(
    isCollapsed: true,

 

밑 줄을 없애고 싶은 경우

decoration: InputDecoration.collapsed(border: InputBorder.none)

 

텍스트 밑 줄 없애기 (Text's underline)

  child: TextField(
    style: TextStyle(
      fontSize: 12.0,
      decorationThickness: 0.0,
    ),

 

자동으로 줄바꿈 하고 싶은 경우

maxLines: null,

 

텍스트를 가운데로 정렬하고 싶은 경우 

expends를 true로 설정

  Expanded(
    child: TextField(
      expands: true,
      textAlign: TextAlign.center,
      textAlignVertical: TextAlignVertical.center,
      decoration: InputDecoration(
        border: InputBorder.none,
      ),
      maxLines: null,
    ),
  ),

 

 

소프트 키보드 표출시 사이즈 문제 해결

return Scaffold(
  resizeToAvoidBottomInset: false,  // softkeyboard overflowed

 

TextField(
  decoration: InputDecoration(
    labelText: 'ID',
    border: OutlineInputBorder()
  ),
),

 

 

주의할 점은 냅다 TextField를 넣으면 hasSize라는 에러를 만날 수 있다.

UI 구조에 대한 이해가 부족하면 겪을 수 있는 문제이니 너무 답답해 하지 말고,

 

Flexible 또는 Expanded 위젯을 사용해서 크기 문제를 해결하자.

천천히 왜 안될까 UI를 보면서 이해하면 금방 해결된다.

 

입력하는 텍스트의 스타일 : InputType

: keyboardType 에 넣는다

keyboardType: TextInputType.text,

 

입력 값 전달

: TextEditController생성

final _tfControllerID = TextEditingController();
final _tfControllerPW = TextEditingController();

 

 

입력한 텍스트 값

: _ifControllerID.text

clickListener.onClick(_tfControllerID.text, _tfControllerPW.text);

 

 

 

소프트 키보드 입력 스타일

keyboardType: TextInputType.text,

 

 

비밀번호 창 스타일 #암호

- bool값으로 처리함 

obscureText: true,

 

 

우측 아이콘 넣기

- decoration, InputDecoration의 'suffixIcon'에 IconButton생성

decoration: InputDecoration(
  hintText: '비밀번호를 입력하세요',
  enabledBorder: customInputBorder(borderColor: Colors.grey),
  focusedBorder: customInputBorder(borderColor: Colors.black),
  suffixIcon: IconButton(
    icon: const Icon(Icons.visibility),
    onPressed: () {

    },
  )
),

 

 

TextField가 두 개인 경우 소프트 키보드로 '다음' TextField로 넘어가도록 하는 방법

textInputAction: TextInputAction.next,

 

 

키보드 버튼을 누른 뒤 액션

: 다음 TextField를 명시하려면?

: nextFocus (다음)

: done (완료)

onSubmitted: (value) => FocusScope.of(context).nextFocus(),

 

 

구글엔 다들 이런식으로 do ~ while돌려서 widget이 EditTable인것을 찾으라 하지만 이건 정말 

말도 안되는 방법이다.

가끔 이런 방법을 올리는 사람을 recommanded하는 이유에 어벙하다.

 

무튼 명시를 정확히한다.

FocusNode사용

final _tfFocusNodeID = FocusNode();
final _tfFocusNodePW = FocusNode();

 

그리고 각 TextField에 FocusNode인스턴스를 입혀준다.

child: TextField(
  controller: _tfControllerID,
  focusNode: _tfFocusNodeID,

child: TextField(
  controller: _tfControllerPW,
  focusNode: _tfFocusNodePW,

 

 

그리고 키보드에서 다음을 누르면 onSubmitted함수가 리스닝되고,

그 안에 패스워드쪽 TextField의 FocusNode를 requestFocus()한다.

onSubmitted: (value) {
  // FocusScope.of(context).nextFocus();
  _tfFocusNodePW.requestFocus();
},

 

 

 

입력 창 외에 클릭

- 키보드 창 닫기

onTapOutside: (event) {
  FocusManager.instance.primaryFocus?.unfocus();
},

 

 

---

2024-02-27-화

텍스트를 입력하면 우측에 x close IconButton이 표출되고,

해당 버튼을 누르면 입력 중인 텍스트가 clear되도록 함

 

타이핑 Listener

widget._textEditingController.addListener(textFieldTypingListener);

// remove
widget._textEditingController.removeListener(textFieldTypingListener);

  void textFieldTypingListener() {
    setState(() {
      
    });
  }

  decoration: InputDecoration(
      hintText: widget.hintText,
      enabledBorder: customInputBorder(borderColor: Colors.grey),
      focusedBorder: customInputBorder(borderColor: Colors.black),
      suffixIcon: FittedBox(
        fit: BoxFit.none,
        child: Row(
          children:[
            Visibility(
              visible: widget._textEditingController.text.isNotEmpty,
              child: IconButton(icon:const Icon(Icons.close), onPressed: () { widget._textEditingController.clear();}, color: Colors.grey.withOpacity(0.8),)
            ),
            !widget._isPassword ? const SizedBox(width: double.minPositive, height: double.minPositive,) : passwordIconButton
          ],
        ),
      ),
  ),

 

  InputBorder customInputBorder({required Color borderColor}) => OutlineInputBorder(
    borderRadius: BorderRadius.circular(8),
    borderSide: BorderSide(
      width: 1,
      color: borderColor,
    ),
  );

 

FittedBox에서 SizedBox를 사용하면 크기를 꼭 지정해주어야 한다.

width, height을 지정해주지 않으면 hasSize error가 발생한다.

 

 

minLine: 1, maxLength: 1 설정시 우측 하단에 '0/1' 없애기

counterText : '' 설정

TextField(
  textAlign: TextAlign.center,
  textAlignVertical: TextAlignVertical.center,
  maxLength: 1,
  maxLines: 1,
  decoration: InputDecoration(
    counterText: '',
    border: InputBorder.none
  ),
)

 

 

 

TextField터치 글자 맨 우측에 커서가 자동으로 가도록 만들기

onTap: () {
  editingController.selection = TextSelection.fromPosition(
    TextPosition(offset: editingController.text.length)
  );
},

 

 

 

 

글자 간격

letterSpacing

style: TextStyle(fontSize: passwordTextSize, letterSpacing: 5.0),

 

 

custom TextField

TextField(
  onTapOutside: (event) {
    FocusManager.instance.primaryFocus?.unfocus();
  },
  maxLines: null,
  controller: nameController,
  keyboardType: TextInputType.text,
  style: const TextStyle(fontSize: 18.0),
  decoration: InputDecoration(
    labelText: "바코드 이름",
    hintText: "바코드 이름을 입력해주세요",
    labelStyle: const TextStyle(fontSize: 21.0),
    hintStyle: TextStyle(color: Colors.grey.withOpacity(0.9)),
    floatingLabelBehavior: FloatingLabelBehavior.always,
    border: const OutlineInputBorder(),
  ),
)