1-6 로그인 페이지 만들기 A

Scaffold

Scaffold를 짓고 위젯을 그려나간다.

• body Text("Hello Flutter",style: TextStyle(fontsize: 28)
• 여기에서, fontsize는 double을 받는다. type double이란? 소수점이 들어가는 일종의 실수 자료형이다.
• 이런식으로 Text안의 요소를 바꿔 줄 수가 있다.
• 굳이 외우지 않더라도, option+esc 통해 어떤 자료형을 지원하는지 찾고 적용할 수 있다.

구성 요소

텍스트 필드? 텍스트를 입력하는 입력 칸

• 세로로 나열하는 코드 값 column widget
• 가로로 나열하는 코드 값 row widget

Refactor? 위젯을 손쉽게 다른 위젯을 감싸거나 추출할 수 있도록 도와준다.

• 전구 아이콘을 누르면 wrap with column 항목을 확인할 수 있다.
• Text 전구를 누르고 wrap with column을 누르니까, 원래 있던 Text()가 column속에 들어가서= 그것의 children에 들어갔다.
• children은 보니까 대괄호[]로 열고 닫는다.

코드 정리

오늘 완성한 로그인 페이지에 사용된 코드 정리해보자

appBar

1) android 좌측 디폴트, centerTitle: true, 적용
2) style: TextStyle로 받고, 이는 fontsize를 받으며 값은 double로 받음

body

1) Column 세로형 위젯 나열
2) TextField (decoration: InputDecoration- labelText
3) obscureText: true (암호 숨기기)
4) ElevatedButton(onPressed: (){} <- 펑션으로 받는다.
5) 펑션에, print('login button click') 입력해줌

아웃풋이 명확한 코드의 세계 

1-7 로그인 페이지 만들기 B

코드 정리

여백 및 사이징

TextField가 벽에 너무 붙어있다. 여백을 주자.

• 1-6 Column click- refactor- wrap with Padding- Edgeinsets.all 16.0

옹졸(?)한 로그인 버튼 사이즈를 키워주자.

• ElevatedButton 위젯은 width 속성이 없다.
• 대신 Container로 감싸준다. (width: double.infinity- 부모 위젯과 최대한 가까이 붙겠다는 의미)
• Container의 부모 위젯은 Column이고, Column은 Padding이 감싸고 있다.

ElevatedButton이 Column width까지만 영역 확대 붙은 것을 알 수 있다.

ElevatedButton이 Column에서 아래로 떨어지게 만들자.

• margin을 활용 (margin: EdgeInsets.only(top: 24))
• Container에 margin 속성은 Container 바깥 영역에 여백을 줄 때 사용한다.
• padding은 안쪽 여백
  1) 1개의 정사각형을 품은 2개의 정사각형이 있다.
  2) 품어진 정사각형은 컨테이너
  3) padding은 컨테이너의 보더를 기준으로 안쪽으로 여백을 들여오는게 padding
  4) margin은 컨테이너 보더를 기준으로 바깥쪽으로 여백이 나가는게 margin
  5) border가 경계선이면, padding은 안쪽 여백/margin은 바깥쪽 여백
  

이미지

이미지를 추가하자.

• 준비된 로켓 이미지를 첫 번째 텍스트 필드 상단에 넣었는데 로그인 영역에 텍스트를 입력하자, 키보드 영역이 하단에 보이게 되면서 오버플로우됨
• 단순한 내 생각? 이미지 사이즈를 줄여야 한다. (X)
• 틀렸음, 텍스트 필드가 스크롤될 수 있어야 한다. (O)
• body: padding 전체를 스크롤될 수 있게 만들어야 한다.
• padding click- wrap with widget으로 감싸주고 위젯 네임을 지정한다.
• 하나의 child가 있고, 이걸 스크롤 가능하게 스크롤러블하게 만든다.
• wrap with widget을 쓰면서 생성된 child를 SingleChildScrollView으로 위젯 네임 지정

padding 씌운 텍스트 필드 width 축소하고 로그인 화면 최종 완성