login_app 프로젝트 생성
MyApp 설정
routes 메뉴로 url 요청을 분기 처리한다.
람다식 사용
Text를 Center로 감싸면 정중앙 정렬이 된다.
HomPage위젯
HomPage 위젯은 ElevatedButton을 넣어 준다.
ElevatedButton을 Align으로 감싸고 topCenter설정해준다
정중앙에 정렬된다.
onPressed 설정 내부에 Navigator 설정
라이브러리
플러터 svg이미지 가져오기
readme로 대략적으로 사용법을 보고 installing으로 사용해본다.
라이브러리 추가방법
1.
CLI 로 추가하기
2.
의존성 주입으로 pub get 하기
라인 잘 맞춰야 된다.
import 'package:flutter_svg/flutter_svg.dart';
JavaScript
복사
점 찍어서 자동완성 안될수도 있으니, import를 하는 방법도 추가
svg 추가하기
구조는 만들어 졌다.
디자인도 이렇게 완성하자
Logo로 위젯으로 따로 뺀다.
Listview로 바꾸자.
Logo
따로 빼준 로고 생성자를 선언해서 title를 받아서 다른 유형들로 쓸수 있도록 컴폰넌트 화 해준다. title변수가 들어가야 되는 곳은 ${ 변수 } 로 쓰면 된다.
이렇게 Logo에 title를 주입해서 사용하는 방식으로 쓰면 컴포넌트로 재사용이 가능하다.
Size.dart 생성
갭을 위한 파일 생성
파일명 말고는, 카멜표기법을 사용하자.
갭의 일관성을 이렇게 정한다.
SizedBox에 ctrl + space를 누르면 이렇게 자동완성으로 사용가능하다.
TextFormField
음.. 맘에 안든다.
애를 컴포넌트화 할 것이다.
decoration도 해줘야 된다.
이렇게 두번 설정해줘야지 포커스를 가졌을때 형태 변경이 없다.
에러가 났을때 사용하는 문법이다.
hintText는 placeholder랑 비슷한 기능이다.
폼태그는 무조건 따로 빼야된다.
이렇게 관리한다.
??
TextEdit컨트롤러에서 email을 받아서 controller에 넣어줘야 된다.
Validator
유효성 검사 툴
여기 formkey는 폼태그의 상태를 분석한다.
formkey로 submit이 가능해진다.
그래서 버튼 (로그인버튼)이 클릭이 될때 액션이 발동하는데, validator가 호출이 된다.
여기 validator 함수가 호출 된다.
이렇게 유효성 검사를 한다. 만약 항목이 비있으면 아래에 빨간글씨가 뜬다.
정상일 때는 null 처리
생성자의 설정을 선택적 매개변수로, controller와 text를 받아야 재사용이 가능한 컴포넌트가 된다.
너무 붙어있으니까 패딩을 주자.
입력값을 시큐어모드로 바꿔주는 함수 obscureText/zhf
플러터는 함수를 전달 할 수 있다.
NavigationPushname하면 덮어쓰는 언어