Flutter

Obscured fields cannot be multiline

해니01_15 2024. 3. 28. 15:18

flutter 에 TextField 라는 위젯이 있다. 

이 위젯은 html의 input 같은 개념으로 사용 되는 것이다 .

 

html의 <input type="passowrod"> 라는 값이 있는데 오른쪽에 보이는 것 처럼 비밀번호 입력시에 안보이게 해주는 용도로 사용 되는 input tag 이다. 

 

 

이 값은 flutter 에서  obscureText 라는 값이 password 의 효과와 같다.  아래의 코드에서 확인 가능하다  

title: Text('비밀번호 입력'),
          content: TextField(
            controller: enteredPasswordController, // 컨트롤러 지정
            obscureText: true,
            onChanged: (value) {
              enteredPassword = value;
            },
            decoration: InputDecoration(hintText: '비밀번호를 입력하세요'),
          ),

 

 

[문제] 

Text를 잘 만들고 실행을 시켜보니 아래와 같은 두개의 오류가 뜨는 것이다. 

The following assertion was thrown building HtmlParser-[GlobalKey#08a13](dirty, dependencies: [MediaQuery, _InheritedTheme, _LocalizationsScope-[GlobalKey#7c05d]]):
minLines and maxLines must be null when expands is true.
'package:flutter/src/material/text_field.dart':
Failed assertion: line 324 pos 10: '!expands || (maxLines == null && minLines == null)'
The following assertion was thrown building HtmlParser-[GlobalKey#d945f](dirty, dependencies: [MediaQuery, _InheritedTheme, _LocalizationsScope-[GlobalKey#b7174]]):
Obscured fields cannot be multiline.
'package:flutter/src/material/text_field.dart':
Failed assertion: line 327 pos 15: '!obscureText || maxLines == 1'

 

[첫 번째 오류]

이 오류는 Flutter의 TextField 위젯에서 발생한 것으로, minLines 및 maxLines 속성이 expands가 true일 때는 null이어야 한다는 뜻이다. 

 

[두 번째 오류] 

이 오류는 Flutter의 TextField 위젯에서 발생한 것으로, 비밀번호 입력 필드인데 여러 줄을 지원하려고 시도했기 때문이다.  비밀번호 입력 필드는 한 줄에만 입력할 수 있으므로 maxLines 속성을 1로 설정해야 한다. 

 

나는 input type 이 password 인지 아닌지를 판단 후 아니면 expands 도 쓰고싶고, password 면 비밀번호 표시도 해주고 싶어서 코드를 한번에 다 우겨 넣으니까 발생 된 오류 였다. 

 

이런 식으로 고쳐주니까 오류가 고쳐졌다~

 TextField(
        obscureText : typePassword ? true : false,
        keyboardType: TextInputType.multiline,
        textAlignVertical: maxLength != null ? TextAlignVertical.top : null,
        expands: typePassword ? false : true,
        minLines: typePassword ? 1 : null,
        maxLines: typePassword ? 1 : null,
        maxLength: maxLength != null ? maxLength : null,
        style: fontSize != null ? TextStyle(fontSize: fontSize) : null,
        decoration: InputDecoration(
          alignLabelWithHint: true,
          border: OutlineInputBorder(
            borderRadius: borderRadius != null
                ? BorderRadius.circular(borderRadius)
                : BorderRadius.circular(0),
          ),
          hintText: placeholder,
// labelText: placeholder,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          contentPadding: paddingValue != null
              ? EdgeInsets.fromLTRB(
            double.tryParse(paddingValue['left'] ?? '0') ?? 12,
            double.tryParse(paddingValue['top'] ?? '0') ?? 20,
            double.tryParse(paddingValue['right'] ?? '0') ?? 12,
            double.tryParse(paddingValue['bottom'] ?? '0') ?? 12,
          )
              : null,
        ),
      )