[Flutter] flutter_login

1. 라우팅

2. SVG 라이브러리 설치

flutter_svg install | Flutter package

An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files.

https://pub.dev/packages/flutter_svg/install

dependencies:
  flutter_svg: ^2.1.0

3. 위젯

SvgPicture.asset

• SVG 벡터 이미지를 asset으로 불러올 때 사용하는 위젯

• flutter_svg 패키지를 통해 제공

• assetName → String type SVG 파일 경로 (assets/xxx.svg)

• width → 크기 지정, 안하면 svg 원래의 크기

• height → 크기 지정, 안하면 svg 원래의 크기

• color → 색상 덮어쓰기 (SVG 내부의 fill 색상 무시)

• fit → SVG를 박스에 어떻게 맞출지 설정 (기본 BoxFit.contain)

 

TextFormField♻

• 폼 입력에 특화된 텍스트 필드 위젯

• 사용자에게 텍스트를 입력받고, 검증(validate)하며, 폼(Form) 상태를 관리할 수 있게 해줌

• 보통은 Column, Padding, Container 등의 부모 위젯이 주는 가로 제약(maxWidth)에 따라 결정

• 기본적으로 가능한 최대 너비까지 확장
→ 예: Scaffold → body → Column 안이라면 너비 제약이 loose하므로 텍스트만큼 너비 차지

• 부모가 제약을 주면, 그 제약에 따라 너비가 결정됨
→ SizedBox(width: double.infinity), Expanded, Flexible을 쓰면 가로 최대치까지 확장 가능

• 기본 높이는 한 줄 기준이며 약 48~56px
→ InputDecoration의 padding, label 등에 따라 달라짐

• 줄 수를 지정하면 세로로 확장됨
→ maxLines, minLines 설정 시 해당 줄 수에 맞춰 자동으로 높이 늘어남

• controller → TextEditingController? | 입력값을 읽거나 조작하는 데 사용

• decoration → InputDecoration? | 입력창 디자인 (라벨, 힌트, 테두리 등)

• keyboardType → TextInputType? | 키보드 타입 (예: TextInputType.emailAddress)

• obscureText → bool | true면 비밀번호처럼 입력값 숨김

• validator → FormFieldValidator<String>? | 유효성 검사 함수

• onChanged → ValueChanged<String>? | 입력값이 변경될 때 호출

• initialValue → String? | 초기 입력값

• maxLines, minLines → int? | 표시할 줄 수 (기본은 1)

• enabled → bool | 입력 활성화 여부 (true일 때만 편집 가능)

• readOnly → bool | 읽기 전용으로 설정 가능 (기본값: false)

 

• 각각의 보더 디자인을 다르게 하는 이유
• 상태에 따라 보더를 다르게 디자인 하려면 따로 만들어야 함

Form♻

• 여러 입력 필드를 그룹으로 묶고 상태 및 유효성 검사를 관리

• 폼 전체를 제어하거나 검증할 수 있는 컨테이너 역할

• 자식 위젯 하나만 받으며, 해당 위젯(Column 등)의 정렬 방식에 따름

• 가로 → 부모 위젯이 주는 가로 제약에 따름

• 세로 → 자식 위젯 높이에 따름 (보통 Column의 높이)

• child → Widget | 폼 안에 들어갈 단일 자식 위젯 (Column, ListView 등)

• key → Key? | 보통 GlobalKey<FormState> 사용 → 상태 제어 및 검증 처리

• autovalidateMode → AutovalidateMode? | 자동 유효성 검사 모드 (disabled, always, onUserInteraction)

• onWillPop → WillPopCallback? | 뒤로 가기 시도 시 확인 동작 지정

• onChanged → VoidCallback? | 폼 내부 필드 값이 변경되었을 때 호출되는 콜백

  final _formKey = GlobalKey<FormState>();
  TextEditingController _email = TextEditingController();