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

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

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

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

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

# 강의 화면 : 

# 강의 내용 : 플로터 배우기 (위젯 넣어보기(MaterialApp, Scaffold, Text, Icon, Image))

1. 위젯 (Widget) : Flutter 에서 기본 디자인 요소를 위젯이라고 부른다. 
                       Flutter는 위젯이 쌓여 앱을 구성한다. 

2. MaterialApp 클래스 : 머테리얼 디자인을 사용하는 어플리케이션 플러터 앱의 기본 구조 

3. Scaffold 클래스 : 플러터 앱 페이지 기초 구조 
                          AppBar, FAB(Floating Action Button), BottomNavigationBarIco

4. Text 위젯 : 글자를 표현하는 위젯

5. Icon 위젯 : 아이콘을 표현하는 위젯 

6. Image 위젯 : 이미지를 표현하는 위젯

# 텍스트 위젯과 아이콘 위젯 테스트

안드로이드 스튜디오 우측 상단에 있는 디바이스 실행 
Running Gradle task 'assembleDebug'...
꽤 오래 기다린후,  apk 파일이 생성되었다는 메시지가 보인 후, 잠시후 폰에 설치가 되었다는 메시지가 보였습니다.  

# 텍스트 버튼 클릭 하기 테스트

7. UI 만들기 :
  - AppBar : 앱 페이지 상단에 고정된 위젯, 페이지 이동 및 페이지 저장 버튼을 추가 기능 
  - FloatingActionButton : 페이지 하단에 떠있는 위젯
  - BottomNavigationBar : 다양한 페이지를 선택할 수 있는 하단 고정 위젯
  - BottomSheet : 여러 액션을 사용할 수 있는 하단 고정 위젯

# BottomNavigationBar 만들기 

# 더보기 탭 2 총 3개의 탭을 만들고, 클릭시 선택됨을 표기 

8. UI 만들기 - Cupertino : iOS 디자인 위젯

  - CupertinoActionSheet : iOS 버전 BottomSheet 위젯 
  - CupertinoSegmentedControl : 옵션 선택 가능한 위젯  
  - CupertinoAlertDialog : iOS 디자인 다이얼로그 위젯
  - CupertinoSwitch : iOS 디자인 스위치 위젯 

# 교육 소감

오늘은 플로터 앱에 실제적인 view 를 작성할수 있는 방법에 대해 학습하였다. 기본적인 디자인 요소인 위젯과 위젯을 구성하고 있는 MaterialApp클래스, Scaffold 클래스 그리고 Text를 표시할수 있는 Text 위젯, 아이콘을 보여줄수 있는 Icon 위젯, 그림들을 표시할수 있는 Image 위젯 등 이러한 디자인 요소들로 실제 앱을 디자인하고, 표시할수 있다. 또한 iOS 앱에서 흔히 볼수 있는 Cupertino, 그리고 UI 구성 요소들인 AppBar와 FloatingActionButton, BottomNavigationBar, BottomSheet 이러한 요소들로 훨씬더 동적으로 움직일수 있는 앱을 만들수 있을거라는 생각이 들었다. 그리고 간단히 BottomNavigationBar를 통하여 탭을 만들어서 앱 하단에 표시될 수 있도록 구현하고, 탭 클릭시 마다 그 상태를 표시할수 있는 setState() 함수를 사용하여 화면 상태를 알려주는 index를 추가 하였다. 실제 앱의 화면을 구성하거나 표시할수 있어서 신기했지만, 아직은 전체적인 소스구조와 함수명등이 익숙하지 않아서 어려운것 같다. 이것저것 건들면서 오류도 나고, 해석도 해보면서 점점 Dart 언어 구조에 대해서 익숙해져야겠다.  

 

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

https://bit.ly/3FVdhDa

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