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,
),
)
'Flutter' 카테고리의 다른 글
Flutter 빈 위젯 : SizedBox.shrink() (0) | 2024.04.02 |
---|---|
Flutter InlineSpan 에 대하여 (0) | 2024.03.29 |
html을 flutter 로 변환 할 수 있을까? (0) | 2024.03.25 |
Flutter Button을 Transform 으로 감싸면 작동이 안되는 문제 (0) | 2024.03.07 |
Flutter GestureDetector Swipe 구현하기 (0) | 2024.03.04 |