패스트캠퍼스 챌린지 5일차

# 강의 제목 : 누적다운로드 120만+ 1인 개발자와 함께하는 앱 개발 입문 Online

# 강의 목표 : 기초부터 운영까지 앱 개발의 전체 프로세스를 이해한다. 
                  내 이름으로 된 앱을 최대 10개까지 만들어 출시할 수 있다. 
                  앱 개발자로 성장할 수 있는 초석을 다진다. 
                  반응 얻는 앱의 특징과 노하우를 알아간다. 
                  향후 강의 없이도 나만의 앱을 개발할수 있는 실력을 가진다. 

# 강의 요약 : 프로그램 설치부터 기본 문법, 광고 다는 법, 클론코딩을 진행하며 필수 지식을 학습한다. 
                 총 10개의 다른 주제로 실제 사용화 가능한 수준의 앱을 만들어본다.
                 나의 앱을 세상에 선보이기 위한 개발자 등록 및 배포를 진행한다. 
                 강사님의 리뷰/클레임 대응사례 등 앱 성공 포인트를 참고해 1인 개발자로서의 입지를 다진다. 

 # 강의 목차 : Flutter, Android Studio 설치 및 설정 
                   변수, 변수타입, 리스트, 맵 개념 및 사용 
                   조건문, 반복문, 클래스, 함수 개념 및 사용 
                   위젯 넣어보기(MaterialApp, Scaffold, Text, Icon, Image)
                   UI 만들어보기 (앱의 타이틀, 화면에 표시되는 텍스트 표현 등)
                   여러 위젯 같이 써보기(가로, 세로로 다양한 위젯 배치) (5일차)
                   Stateless, Stateful 위젯 넣어보기 (5일차)
                   Firebase, Admob(앱 광고) 사용해보기 
                   기능 종합해서 간단한 어플 만들어보기 (숫자카운트어플)
                   앱 기획 궁금증 해소 및 앱 제작 꿀팁

# 강의 화면 :  

# 강의 내용 : 플로터 배우기 (여러 위젯 같이 써보기)
                  - 가로, 세로로 다양한 위젯 배치, Stateless, Stateful 위젯 넣어보기

1. Row, Column
 - Row : 가로로 여러 위젯을 배치할 때 사용하는 위젯 
 - Column : 세로로 여러 위젯을 배치할 때 사용하는 위젯
 - Expanded : Column, Row 위젯 안에서 영역을 전체로 확장할 때 사용하는 위젯 

# Row 출력하기

# Row 출력하기 (spaceBetween)

2. ListView, ListTile
- ListView : 여러 위젯을 나열할 때 사용하는 위젯,
               Column과 Row와 달리 스크롤이 가능한 위젯 스크롤 방향을 설정할수 있음
- ListTile : ListView 에서 사용하는 기본 위젯

# ListView 출력하기

3. GridView 
- 여러 위젯을 나열할 때 사용하는 위젯, Column과 Row를 포함한 스크롤 가능한 위젯 
- 휴대폰 갤러리 UI와 같은 Grid Layout 위젯 

4. lnkWell, GestrueDetector
- lnkWell : 위젯을 클릭 가능하도록 만드는 위젯
- GestureDetector : 위젯을 클릭 가능하도록 만드는 위젯 

클릭(onTap), 길게 클릭(onLongPress)사용 가능, 버튼이 아닌 다른 위젯을 클릭 가능하도록 감싸는 위젯

# InkWell 클릭 테스트

5. margin, padding 
- Margin : 위젯 외부 여백 
- Padding : 위젯 내부 여백
- EdgeInsets : 여백 추가 위젯 

# Margin 테스트

# Padding 테스트

6. 여러 위젯 같이 써보기 
- Stateful 위젯 (동적) : 현재 상태를 가지고 있는 위젯, 상태에 따라 UI가 변경될 때 Stateful 위젯을 사용,
                              StatefulWidget과 State 2개의 클래스로 사용

- Sateless 위젯 (정적) : 상태를 가지고 있지 않는 위젯, 상태에 따라 UI가 변경되지 않을 때 SateLess 위젯을 사용

7. Stateful
- createState() : Stateful 위젯을 생성하는 메소드 
- initSate() : Sateful 위젯이 처음 생성될 때 호출되는 메소드 데이터를 초기화 할 때 사용
- setState() : 위젯의 상태 변경을 호출하는 메소드 
- dispose() : 위젯이 제거될때 사용 

# 클릭시 레드로 변경되도록 setState()사용

# 처음 상태를 그린으로 시작하기 

# 새로운 페이지 띄우기

8. 페이지 이동하기 
- Navigator : 플러터에서 화면을 관리하는 클래스, Stack(LIFO-Last First-OUT)으로 화면을 쌓는 구조 
                 Navigator.push 새로운 페이지로 이동, Navigator.pop 페이지 종료/뒤로가기
- MaterialPageRoute : 플로터에서 화면을 추가하는 클래스 

# 교육 소감

오늘은 flutter 위젯에 대해서 공부하였다. 위젯에는 현재 상태를 가지고 있는 위젯과 상태를 가지고 있지 않는 위젯이 있다. 현재 상태를 가지고 있는 Stateful에는 4가지 주요 함수를 가지고 있는데, 위젯을 생성하는 함수 createState() 그리고 Stateful 위젯이 처음 생성될때 호출되는 메소드 initState(),위젯의 상태 변경을 호출하는 메소드 setState(), 위젯이 제거될때 사용되는 dispose() 함수가 있다. 클릭시 파란색에서 빨간색 컬러로 변경하는 앱을 테스트 했는데, 이때, 클릭을 할수 있는 위젯인 InkWell 위젯이 사용되며, 변경된 상태를 알리기 위해 setState()함수를 사용해야 한다. initState() 함수는 홈페이지가 맨처음 실행될 때, 사용되는 함수이므로, 처음에 만들어질때 그린으로 만들어주기 위해 color = Colors.green; 으로 그린으로 셋팅 해두면 된다. 페이지 이동하기를 구현하기 위해서는 플러터 화면을 관리하는 클래스 Navigator 에 대해서 이해를 해야한다. 플러터의 화면구조는 Stack 형태로 되어있어, 제일 마지막으로 띄운 화면이 제일 위에 위치하게 된다. 페이지 이동을 위해서는 MaterialPageRoute 함수를 사용해야 한다. 금일은 실제적으로 앱을 띄우고, 페이지를 이동시키고 화면을 동작시키는 방법을 배웠다. 매우 많은 함수들을 배워서, 충분히 활용할수 있도록 기본기를 다지는게 좋을 것 같다. 

# 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스