[개발] 첫 스토어 만들기

스토어 만들기에서는 아래의 내용을 배울 수 있음

• Column
• Row
• Text + Style 속성 
• SafeArea
• Spacer
• Padding
• Image
• Expanded
• SizedBox

A. 기본적인 주석을 없애고, SafeArea 를 확보하자

기본적으로 필요없는 주석을 다 지우고, 아래와 같은 환경을 먼저 만들어야 함(아래는 SafeArea 와 Text+Style 이 반영이 된 모습)

이 때, SafeArea 를 설정하는 방식은 아래와 같음**( 단축키를 외워보세용 :D)

 

오케이 위젯이랑 Scaffold 는 의무적으로 만든것도 알았고 Child 밑에 Children 배치도 확인했다

 

다시 한번더,  내 디자인이 휴대폰 기능창을 막는걸 막기 위해서, Safe Area 를 피하기 위해서 아래와 같이 코딩을 해야한다

 

B. TextStyle widget 도 사용해보자!

Text 의 속성을 바꾸려면, cmd 를 탭해서, 해당 Text 안으로 들어가야 함 (코딩의 어려운 부분은...이런거 인듯 뭐가 다 숨겨 져 있다 하하)

-> 속성은 위젯을 구성하는 방법에 대한 내용이예용

 

아래는 폰트 스타일을 바꾸는데 사용하는 문법! style: TextStyle( fontWight: FontWeight.bold,),
*** 기초 문법도 다시 학습이 필요하당 ㅎㅎ

fontWeight(글자 두께), fontSize(글자 크기), color(색상), letterSpacing(자간), height(높이) 등을 바꿀 수 있음

-> 모르면 그때 그때 사용하는 방식으로 해야해용 왜냐? 까먹으니까

아래는 Textstyle을 확인할 수 있는 URL 

https://api.flutter.dev/flutter/painting/TextStyle-class.html

TextStyle class - painting library - Dart API

 

C. Dev tool까지 사용해 보자!

>flutter dev tool open 을 해서, 아래와 같이 확인을 해보자

위의 버튼을 누르게 되면, 아래와 같이 현재 텍스트의 위치와 사이즈에 대한 정보를 알려주고 있다.

D. Padding 값을 하는 방법은?

 

E. image : 이미지를 바로 사용하는 방법은? _ 일단은 Asset 으로 바로 활용
위젯을 감싼다는 느낌으로 가야함

이 때, padding 값 아래에다가 넣어야 함! 안그러면 ROW 값과 부딫혀서 사진이 이미지에 뜨지 않는다는 에러가 뜹니다 ! :D

 

 

F. 이미지를 크게 화면에 채우고 싶다면?? Expanded 위젯!

근데 무조건 Child 위젯과 함께 와야함!

Spacer 와 마찬가지로 Flex 같이 사용되야 함

흠...그런데, 이상하게 위 아래로 화면이 차지 않는다?? 그럼 어떻게 해야하나?

이 경우 image에 있는 fit 속성을 사용해야함

 

E. 오호라! 그러니까, 전체의 widget 을 넣어서, 원하는 상태를 구현하는거구나! (+ 근데 위치가 중요한..)

위에도 나와있지만, Spacebox를 사용해서 크기 조절도 가능하다!