[플러터 2] UI 구조 4

Expanded, Spacer, ListView 위젯

Expanded 또는 Spacer 위젯은 화면의 남은 공간만큼 확장하는 위젯인데

ListView위젯은 스크롤 위젯으로 최대 높이는 무한이므로

Expanded 또는 Spacer 위젯을 사용할 수 없다.

그래서 SizedBox 를 사용하여 적절한 높이를 준다.

 

Column을 사용하지않고 ListView로 전체화면을 구성하는 이유

1. 방향이 세로 방향이기때문에 Column과 ListView 둘 다 사용가능

2. TextFormField를 터치하게 되면 아래에서 키보드가 올라오는데 

   이 때 화면에 그림을 그릴 수 없는 영역이 생긴다.

   이 영역을 inset 영역이라고 하는데 이 영역에 그릴 수 없어서 화면에 스크롤이 없으면

   그림을 그릴 수 있는 영역이 줄어들어서 overflow 오류가 발생한다.

   따라서 화면에 스크롤을 줘야 한다.

(*) 화면에 TextFormField 위젯이 필요하다면 전체화면에 스크롤을 담아주는게 좋다.

 

SVG를 사용하는 이유

SVG는 Vector 이미지로 화면의 크기가 변해도 깨지지 않는다.

 

TextFormField 위젯

TextField 와 유사하게 사용자 입력을 받을 수 있으면서

validator 속성을 활용하여 유효성 검사까지 가능하다.

if (_formKey.currentState!.validate()) {        // 유효성 검사
   Navigator.pushNamed(context, "/home");
}

=> Form 위젯 안에 모든 TextFormField 값이 비어있는지 확인하고

     비어있으면 false

     비어있지 않으면 true 리턴

obscureText 속성 : 비밀번호 입력 양식이면 **** 처리

 

Form 위젯

데이터 전송을 위해 여러양식의 위젯을 같이 그룹화 해주는 컨테이너 위젯이다.

사용자 입력을 받을 수 있게 여러 입력 요소들을 감싸서 한번에 데이터를 전송하게 해주거나

입력 요소들의 유효성 검사를 하는데 사용된다.