플러터는 객체 기반 언어

커스텀 위젯도 모두 클래스로 구현

stful, stless로 불러쓸 수 있음

사용 예시

 

개발환경 구성은 아래 링크

https://www.youtube.com/watch?v=usE9IKaogDU&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C 

 

초보때는 린트 꺼주는게 나을 수도?

analysis_options.yaml 파일에 rules에 추가하기

rules:
  prefer_typing_uninitialized_variables : false
  prefer_const_constructors : false
  prefer_const_constructors_in_immutables : false
  prefer_const_literals_to_create_immutables : false
  avoid_print : false

 

애셋 폴더 경로지정(이미지 같은거 사용)

- 이미지 저장용 assets폴더 만들기

- 이미지, 아이콘 등 폴더에 넣기

- 이미지 등록하기 pubspec.yaml 파일에

- 아래 이미지처럼 써주기

 - 사용할 때는 image.assets('경로')

 

 

5강 플렉서블, 익스팬디드

 

1. 플렉서블(비율적으로 배치)

2. 익스팬디드(플렉스 1과 같음) - 나머지 꽉 채울 때

 

 

4강

 

텍스트 다루기

 

 

버튼 3종류

 

앱바 아이콘 텍스트 배치

 

 

박스 다루기

 

 

박스에 패딩, 마진, 테두리(decoration사용) 효과주기

 

 

정렬, 박스 꽉 채우기

 

가로세로 배치하는 법과 Scaffold

** ctrl + space로 자동완성 잘써라.. 외우지말고

 

1. 기본 앱의 구성 (Top, Body, Bottom)

 

2. 위젯 가로 배치

 

3. 위젯 세로 배치  : Row -> Column으로 변경

 

4. 정렬

  가로기준 가운데 정렬 :

mainAxisAlignment: MainAxisAlignment.center,

  가로기준 가운데 정렬 1줄 꽉 차게 퍼뜨려서 배치

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

  가로기준에서 세로 정렬?

crossAxisAlignment: CrossAxisAlignment.center,

 

! 숙제 코드

'플로터(Flutter) > 기본' 카테고리의 다른 글

코딩애플 Flutter 0강 (세팅)  (0) 2022.12.27
코딩애플 Flutter 5강  (0) 2022.12.21
코딩애플 Flutter4강  (0) 2022.12.21
코딩애플 Flutter 3강(박스 다루기)  (0) 2022.12.21
코딩애플 Flutter 1강  (0) 2022.12.21

 

4가지 위젯

1. 텍스트 위젯

Text('Hello')

 

2. 아이콘 위젯

Icon(Icons.shop)

 

3. 이미지 위젯

  가. 이미지 보관용 assets폴도 만들기

  나. pubspec.yaml에서 assets폴더 등록하기

  다. Image.asset('경로')     예) Image.asset('flower.png')

 

4. 박스 위젯

  가. Container()

  나. SizedBox()

  다. Center()

  라. 스타일은 width, height는 단위가 LP로 50LP는 1.2cm를 의미 // color: Colors.blue

 

참고강의: https://www.youtube.com/watch?v=mLQ-ehf3d6Y&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C&index=3

 

+ Recent posts