[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! 대시보드

#1 Hello World

Android Studio와 친해지고 Flutter를 사용하여 앱의 UI를 그리는 법 알아보기

• Text 위젯 사용해보기
• 배경색깔 변경해보기
• 글자 색깔 변경해보기

#2 Splash Screen

모든 앱의 첫 번째 페이지 역할을 하는 Splash Screen 간단 제작

• Asset 이미지 사용하기
• Circular Progress Indicator 위젯 사용하기
• Column 위젯을 이용한 위젯의 배치 알아보기

#3 블로그 웹앱

Web View 기술을 사용하여 현존하는 웹사이트를 앱으로 패키징

• 오픈소스 패키지 사용하기
• 플랫폼 별 Native 세팅 변경하기
• WebView 위젯 사용하기
• Javascript 권한 열어주기
• HTTP 프로토콜 열어주기

#4 전자액자

 

 

 

가만히 두면 자동으로 롤링되고 직접 스와이핑이 가능한 전자액자 제작

• Page View 위젯 사용하기
• Timer 클래스로 주기적으로 함수 실행하기
• Stateful Widget 실전에 사용해보기

#5 우리 처음 만난 날 U&I

 

연인과 함께 사용할 수 있는 디데이 어플 제작

• Font 적용하기
• Date Picker 사용하기
• Date Time 클래스 실전 사용
• Flutter에서 테마 사용법
• Cupertino Dialog 활용하기

#6 랜덤숫자 생성기

버튼을 누를 때마다, 지정한 숫자 이하의 랜덤 숫자 3개가 생성되는 어플 제작

• 난수 생성
• 간단한 Navigation 및 데이터 송수신
• Slider 위젯 사용하기
• Functional 프로그래밍을 활용한 위젯 렌더링 및 코드정리

#7 동영상 플레이어

 

동영상을 재생하는 어플 제작

• Stack 위젯 사용하기
• Image Picker 라이브러리 사용하기
• Video Player 라이브러리 사용하기
• 재생, 정지, 3초 뒤로 돌리기, 3초 앞으로 돌리기 동영상 컨트롤 제작하기

#8 오늘도 출근

 

구글지도를 사용하여 간단한 위치기반 서비스 제작

• 구글지도 세팅하고 사용하기
• 위치서비스를 이용해서 내 위치 지도에 표시하기
• 특정 위치간의 거리 구하기
• 지도에 마커 표시하기
• 지도에 원 표시하기
• 특정 위치로 카메라 이동시키기
• Material Dialog 활용하기 

Agora API를 이용한 영상통화 앱 제작

• Agora API를 이용해서 영상통화 기능 제작하기
• Box Shadow 사용해보기

 

데이터를 장기적으로 저장할 수 있는 달력 스케줄러 앱 제작

• Drift 패키지를 활용한 SQ Lite 사용하기
• 간단한 SQL문 배워보기 (select, insert, update, delete, join)
• Bottom Sheet 활용하기
• Wrap 위젯 사용하기
• Table Calendar 패키지 사용하기
• Dismissible 위젯으로 삭제 애니메이션 구현하기
• Stream을 통해 데이터의 변화 자동으로 감지하기

 

HTTP 통신을 이용해서 네트워크 요청하는법 배우기!

• Dio 패키지를 이용한 HTTP 요청
• 정부 Open API 사용해보기
• Hive NoSQL 데이터베이스 사용하기
• 오프라인 지원 및 캐싱 맛보기
• Drawer 위젯 사용하기
• CustomScrollView 실전사용

• Stateful Widget
  
  

  

  Stateful Widget의 Life Cycle에 대해 배워보고, 각 Life Cycle에 해당되는 함수들이 언제 실행되는지 직접 실습으로 확인할 수 있습니다.

• Row and Column
  Flutter에서 위젯을 배치할때 가장 많이 사용하는 위젯인 Row와 Column 위젯의 파라미터에 대해 학습합니다.

• Date Time
  Date Time 클래스를 사용하여 날짜·시간에 관련된 데이터를 다루는 방법을 배우고, Duration으로 Date Time을 어떻게 조작할 수 있는지도 학습합니다.

• Const Constructor
  Const Constructor를 사용하여 코드를 작성할 때마다 생기던 노란 Warning 줄들을 없애보고 왜 Const Constructor를 사용하는게 Flutter 앱 퍼포먼스에 좋은지 배워봅니다.

• Buttons
  Flutter에서 기본으로 제공해주는 Elevated Button, Text Button 그리고 Outlined Button을 사용하고 꾸미는 법을 학습합니다.

• Navigation
  화면 간 이동을 할 수 있는 Navigation의 각종 기능에 대해 알아보고, 화면 간 데이터를 전송하는 법을 배웁니다.

• Stream Builder와 Future Builder
  비동기 (async) 요청의 결과값으로 화면의 UI를 결정지을 수 있는 가장 효과적이고 쉬운 방법인 Stream Builder와 Future Builder에 대해 학습합니다.

• Buy vs Build
  특정 기능에 대해 직접 제작하는 것과 유료로 구매하는 것 중 어떤 게 좋을지 판단할 수 있는 방법에 대해 배워봅니다.

• Scrollable Widgets
  Flutter에서 스크롤을 가능하게해주는 위젯들에대해 배워봐요!

Q. Flutter를 왜 배워야 하나요?

Flutter는 크로스플랫폼 앱 개발 프레임워크예요. 원래는 iOS앱과 Android 앱을 모두 다른 언어와 다른 프레임워크를 사용해서 개발해야하는데, Flutter는 하나의 소스코드로 두개의 플랫폼에 모두 출시 가능해요. 그래서 앱을 개발하는데 드는 금전적 비용과 시간적 비용을 많이 아낄 수 있어요. 추가적으로 Google이 제작한 프레임워크이면서도 요즘 Google에서 많이 밀어주고 있어서 미래가 더 기대되는 프레임워크라 배워두면 좋아요.

Q. React Native나 Native보다 Flutter를 배우는게 무조건 좋나요?

모든 프레임워크는 상황과 목적에 따라 장단점이 있기에 이런 류의 질문에 대답은 항상 'NO'예요. Flutter는 하나의 소스코드로 매우 빠르게 iOS, Android 두 플랫폼에 모두 앱을 출시할 수 있지만 Native보다 아직 라이브러리들도 많이 모자라고 완성도에서 약간 뒤쳐져요. React Native는 세상에서 가장 대중적인 언어 중 하나인 Javascript 언어를 사용한다는 장점이 있고 생긴지 오래되었으니 아직까지는 Flutter보다 대중적으로 사용되고 있어요.

Q. 프로그래밍을 한번도 배워본 적 없는데 수강 가능할까요? 비전공자인데도 괜찮을까요?

제 유튜브 영상으로 생애 첫 프로그래밍을 성공적으로 이루신 분들이 많습니다. Flutter가 아니더라도 모든 프로그래밍은 입문자에게 상당한 진입장벽이 존재하지만, 이 강의에서 저는 그 진입 장벽을 최대한 낮추기 위해 많이 노력했어요. 우선 무료로 공개해둔 Dart 언어 강의를 먼저 봐보고 난이도가 어떤지 확인해보시고, 어렵다면 코드팩토리 공식 커뮤니티에서 도움을 받으세요.

🏭 코드팩토리 유튜브
🔥 코드팩토리 Discord
💬 코드팩토리 카카오 오픈톡

Flutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 우선으로 답변해드립니다!

Q. 제작이 완료된 강의인가요?

현재는 초보탈출 목적에 부합한 강의 구성이예요. Flutter는 초급, 중급, 고급 세개의 난이도로 나누어서 강의를 제작할 계획인데 UI, 간단한 인기 라이브러리 사용법 등은 모두 강의인 초급 강의에 추가될 예정이예요. 여러분들께 전달해주고싶은 지식이 아직 많이 남아있으니 기대해주세요!

Q. 애플 맥이 있어야 하나요?

Windows 컴퓨터로도 강의를 따라올 수 있지만 iOS 앱 빌드는 불가능해요. 그 이유는 애플이 iOS 앱은 애플의 운영체제인 맥에서만 빌드가 되도록 설계했기 때문이에요. Flutter는 플랫폼 간 일관화가 매우 잘 되어있어서 Windows 컴퓨터로 안드로이드 화면을 보며 코딩을 해도 나중에 똑같은 코드를 iOS에서 빌드했을때 같은 앱이 나온다 생각하셔도 무방해요. 배포를 하고싶다면 중고로 Flutter와 호환되는 옛날 맥북이라도 구매하시는걸 추천드려요.

Q. 컴퓨터 스펙은 좋아야하나요?

아무래도 시뮬레이터/에뮬레이터를 돌리면 개발이 편하기 때문에 컴퓨터 스펙이 너무 낮으면 실행이 느릴 수 있어요. 만약에 컴퓨터 스펙이 낮으면 실제 기기를 사용해서 코딩하시는 걸 추천드려요! 필요 스펙은 매번 바뀔 수 있으니 링크로 남겨드릴게요.
windows 요구 스펙 / Mac 요구 스펙 / Linux 요구 스펙

Q. Flutter 설치가 안돼요.

좋은 개발자가 되려면 고립되어 문제를 해결하는 능력도 매우 중요하기에, 열심히 해보고 도저히 안되겠으면 💬 코드팩토리 카카오 오픈톡으로 문의주세요!

Q. 영상에 문제가 있어요.

영상 재생과 인터넷 통신에 관련된 문의는 인프런에 해주시면 됩니다. 그 외 영상의 순서가 잘못됐거나, 편집이 서툴러서 이해하기 어려운 부분이 있다면 바로 오픈톡으로 문의주세요. 절대적 1순위로 개선해서 새로 업로드를 진행하도록 할게요! 저도 여러 번 확인을 하지만 너무 많은 영상을 관리하다보니 착오가 있을 수 있어요.

Q. 수업 내용을 어느 정도 수준까지 다루나요?

Flutter에서 UI를 만들어내는데 필요한 지식들은 모두 담으려고 노력했어요. 추가적으로 간단한 프론트엔드 데이터베이스 관리, 네트워크 요청, 기본적인 상태관리 등도 포함할 계획이예요.

현재 추가 예정인 내용들

• HTTP 요청 관련 강의 (Dio와 Retrofit 사용하기)
• Hive를 사용한 데이터관리 및 간단한 캐싱
• Provider를 이용한 간단한 상태관리

Provider 패키지 외 인기 상태관리 패키지들은 중급 강의에서 다룰 예정이예요! (BloC, GetX등)
그 외, 제가 제작했으면 하는 지식·기술이 있다면 저와 소통할 수 있는 여러 채널을 통해 전달해주세요. 적극적으로 고려할게요!

Q. Play Store, App Store에 앱을 출시하는 법에 대한 강의는 없나요?

초보 강의에 추가할 예정입니다. 강의가 나오기전에 출시를 먼저 해보고싶으시면 Flutter 공식 홈페이지의 가이드를 확인해주세요.
안드로이드 앱 출시하기 / iOS 앱 출시하기

• 🏭 코드팩토리 유튜브
• 현) 주식회사 코드팩토리 대표
• 전) Milliman Software Engineer
• 영국 Imperial College 학사

오프라인 강의 경험

• 밀리의서재 개발자대상 Flutter 교육 강사
• 서울디지텍고등학교 Flutter 특강 강사