[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
iOS 앱과 Android 앱을 코드 한번만 작성해서 모두 제작한다! 코드팩토리의 Flutter 초보 탈출 강의! 디테일한 이론과 흥미로운 프로젝트를 진행하며 탄탄한 기본기 쌓기!
![Thumbnail](https://cdn.inflearn.com/public/courses/328329/cover/6f45774a-a1a6-422a-addc-6612321b0b8e/328329.png?w=736)
초급자를 위해 준비한
[모바일 앱 개발] 강의입니다.
이런 걸
배워요!
Dart언어 마스터하기
Flutter로 예쁜 UI 제작하기
SQLite 데이터베이스 활용하기
동영상 플레이어 앱 제작하기
영상통화 앱 제작하기
구글지도 사용하기
위치서비스 사용하기
10개의 프로젝트를 내 손으로! 💁♀️💁♂️
이론을 토대로 배우고, 다양한 기능 구현방법을 배워요.
교보문고 2023 상반기 베스트셀러 저자가 직접 가르쳐주는 강의
컴퓨터/IT 부문 23위 TOP30 이내 유일한 앱 개발 서적
플러터만으로 2022년 슈퍼루키 달성!
2023년 인프런 베스트 셀러!
대기업에서도 찾는 강의! 리뷰가 증명하는 최고의 강의 보장해드립니다!
⏰ Flutter 초급 강의's 타임라인
- 2022년 7월 18일 : Flutter 3.0 버전 100% 대응완료
- 2023년 5월 10일 : Flutter 3.10 버전 100% 대응완료
- 2023년 12월 4일 : 최신 환경에 맞춰 환경설정 강의 재촬영 완료
- 2024년 04월 22일 : 최신 플러터 및 플러그인 버전 기반으로 본 강의전면 재촬영 완료 (2024년 08년 31일에 구버전 강의는 삭제됩니다)
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 전자액자
![6.5-inch Screenshot 1.jpg](https://cdn.inflearn.com/public/files/courses/328329/8fbeab6f-dc20-4b7b-94c7-196cf22b7b4e/6.5-inch Screenshot 1.jpg)
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/a5779638-0c27-4993-818e-5d1f56e2eda3/6.5-inch Screenshot 2.jpg)
![6.5-inch Screenshot 4.jpg](https://cdn.inflearn.com/public/files/courses/328329/05d03b96-4381-46af-9f55-0a9cd50e6cf8/6.5-inch Screenshot 4.jpg)
![6.5-inch Screenshot 5.jpg](https://cdn.inflearn.com/public/files/courses/328329/14460e5b-0c3d-4356-8057-36cc14cbc07b/6.5-inch Screenshot 5.jpg)
가만히 두면 자동으로 롤링되고 직접 스와이핑이 가능한 전자액자 제작
- Page View 위젯 사용하기
- Timer 클래스로 주기적으로 함수 실행하기
- Stateful Widget 실전에 사용해보기
#5 우리 처음 만난 날 U&I
![6.5-inch Screenshot 1.jpg](https://cdn.inflearn.com/public/files/courses/328329/c16d51b5-bb0e-41ec-814e-3c2092a0e792/6.5-inch Screenshot 1.jpg)
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/60b206e9-efdd-4302-888a-5f179404a4ed/6.5-inch Screenshot 2.jpg)
연인과 함께 사용할 수 있는 디데이 어플 제작
- Font 적용하기
- Date Picker 사용하기
- Date Time 클래스 실전 사용
- Flutter에서 테마 사용법
- Cupertino Dialog 활용하기
#6 랜덤숫자 생성기
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/e2f25e29-e802-4fec-9cd1-bf17c3ff6675/6.5-inch Screenshot 2.jpg)
버튼을 누를 때마다, 지정한 숫자 이하의 랜덤 숫자 3개가 생성되는 어플 제작
- 난수 생성
- 간단한 Navigation 및 데이터 송수신
- Slider 위젯 사용하기
- Functional 프로그래밍을 활용한 위젯 렌더링 및 코드정리
#7 동영상 플레이어
![6.5-inch Screenshot 1.jpg](https://cdn.inflearn.com/public/files/courses/328329/1a97ab95-5dc0-4399-b9d6-a0834e6e9b88/6.5-inch Screenshot 1.jpg)
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/ceb4173b-e7ea-4b4a-9d0b-7c7c04da0b87/6.5-inch Screenshot 2.jpg)
동영상을 재생하는 어플 제작
- Stack 위젯 사용하기
- Image Picker 라이브러리 사용하기
- Video Player 라이브러리 사용하기
- 재생, 정지, 3초 뒤로 돌리기, 3초 앞으로 돌리기 동영상 컨트롤 제작하기
#8 오늘도 출근
![6.5-inch Screenshot 1.jpg](https://cdn.inflearn.com/public/files/courses/328329/9105604f-ca95-4c47-b834-e863c44f4c62/6.5-inch Screenshot 1.jpg)
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/1fbe7483-ec2c-4a54-8882-7af1afa3a10b/6.5-inch Screenshot 2.jpg)
구글지도를 사용하여 간단한 위치기반 서비스 제작
- 구글지도 세팅하고 사용하기
- 위치서비스를 이용해서 내 위치 지도에 표시하기
- 특정 위치간의 거리 구하기
- 지도에 마커 표시하기
- 지도에 원 표시하기
- 특정 위치로 카메라 이동시키기
- Material Dialog 활용하기
#9 LIVE- 영상통화
![6.5-inch Screenshot 1.jpg](https://cdn.inflearn.com/public/files/courses/328329/e66a7336-b019-4033-a061-145fc8130541/6.5-inch Screenshot 1.jpg)
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/a5e11d15-9b53-4128-8877-28c6624c31fb/6.5-inch Screenshot 2.jpg)
Agora API를 이용한 영상통화 앱 제작
- Agora API를 이용해서 영상통화 기능 제작하기
- Box Shadow 사용해보기
#10 캘린더 스케줄러
![6.5-inch Screenshot 1.jpg](https://cdn.inflearn.com/public/files/courses/328329/fa36f8b9-52a4-458c-8a65-3ffb97a24c03/6.5-inch Screenshot 1.jpg)
![6.5-inch Screenshot 2.jpg](https://cdn.inflearn.com/public/files/courses/328329/966b60bf-be8a-4093-ae13-593163b12ee6/6.5-inch Screenshot 2.jpg)
데이터를 장기적으로 저장할 수 있는 달력 스케줄러 앱 제작
- Drift 패키지를 활용한 SQ Lite 사용하기
- 간단한 SQL문 배워보기 (select, insert, update, delete, join)
- Bottom Sheet 활용하기
- Wrap 위젯 사용하기
- Table Calendar 패키지 사용하기
- Dismissible 위젯으로 삭제 애니메이션 구현하기
- Stream을 통해 데이터의 변화 자동으로 감지하기
#11 미세먼지 앱
![screen_1_iphone13blue_portrait.png](https://cdn.inflearn.com/public/files/courses/328329/79587b3f-bb4c-4b9e-a448-5be9c009af9c/screen_1_iphone13blue_portrait.png)
![screen_2_iphone13blue_portrait.png](https://cdn.inflearn.com/public/files/courses/328329/7644b7e9-16b9-44ad-9d70-7be398448328/screen_2_iphone13blue_portrait.png)
![screen_3_iphone13blue_portrait.png](https://cdn.inflearn.com/public/files/courses/328329/6aad846d-a958-49aa-870c-0ecfc0f88e4b/screen_3_iphone13blue_portrait.png)
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에서 스크롤을 가능하게해주는 위젯들에대해 배워봐요!
Flutter 프레임워크를 이용해
간단한 앱을 스스로 제작해보기 📖
Flutter vs React Native Google Trends
Flutter는 벌써 수많은 기업들이 주력으로 사용하고 있는 강력한 크로스플랫폼 프레임워크 중 하나입니다. 차트에서도 볼 수 있듯, 오랜 시간 동안 최강자였던 React Native을 제치고 급격하게 성장 중입니다.
본 강의는 초보자들에게 가볍고 친근하게 다가갈 수 있는 프로젝트들과 이론을 적절히 섞어 흥미와 지식의 깊이를 모두 잡을 수 있도록 제작되었습니다. 실제적인 상황을 설계하여, 프로젝트를 진행하며 이 지식이 왜 습득해야하는지 이래를 통해 더욱 깊은 이론을 파볼 수 있는 형태로 구성했습니다.
수강후기를 모았어요 📜
개발 입문자도, Flutter 초보도 이 강의를 듣고나면 Flutter에 대한 자신감이 생겨서 혼자서도 단순한 앱을 개발하고 스스로 초급 이상의 지식을 깨우칠 수 있는 수준까지 다다를 수 있습니다.
🏭 코드팩토리 유튜브 에도 많은 컨텐츠들이 있습니다!
최고의 커뮤니케이션 🧑🏼🏫
매주 유튜브 라이브를 통해 질의응답을 받으며 학생들과 소통합니다!
유튜브 라이브 푸쉬알림을 받고싶으시면 아래 코드팩토리 유튜브 채널을 구독해주세요!
코드팩토리 집필 서적
Must Have 코드팩토리의 플러터 프로그래밍 서적은 제가 오랜 기간 투자해서 직접 집필한 책입니다!
초급 강의와 곂치는 내용도 있고 초급강의에는 없는 Firebase 및 광고등에대한 강의도 있습니다!
EBook이나 실물 서적을 좋아하시는 분들에게 추천드립니다!
서적은 교보문고, Yes24, 알라딘등 메이저 서점에서 만나 볼 수 있습니다!
아래 이미지를 클릭해서 이동해주세요!
기타 사항 ✔️
예상 질문에 미리 답해드립니다 💬
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 앱 출시하기
기타 사항 ✔️
(1) 도움받고 배울 수 있는 다른 채널들!
🏭 코드팩토리 유튜브
🔥 코드팩토리 Discord
💬 코드팩토리 카카오 오픈톡
(2) 강의용으로 공유되는 이미지
강의에서 제가 제공해드리는 이미지들은 유료로 직접 구매한 이미지들이예요. 저는 창작물을 만들어 배포해드릴 수 있는 권리를 구매했지만 여러분들은 절대로 다른 사람 또는 인터넷에 이미지를 배포하시면 안돼요! 저작권 위반으로 법적 문제가 생길 수 있으니 공부하는 용도 외로 이미지들을 사용하지 마세요.
(3) 질문하는 법
프로그래밍을 배우면서 정말 빠르게 실력을 늘릴 수 있는 법은 올바르게 정확한 질문을 하는 법을 깨우치는거예요. 프로그래밍의 특성상 코드의 전체를 다 봐주기 어려워요. 그러니 문제가 되는 위젯의 코드를 통째로 올린 후 "이거 안돼요!" 하시면 제가 답변을 해드리기 어려워요.
질문을 하실 때는, 밑의 3단계로 잘 정리해서 전달해주시면 훨씬 빠르게 소통하고 답변을 드릴 수 있어요!
1️⃣ 내가 생각했을때 어떤 식으로 작동이 되어야 하는지
2️⃣ 현재 어떻게 작동되는지
3️⃣ 정확한 코드의 위치와 어떤 문제가 생기는지 (예제까지 있으면👏)
(4) 추가 확정된 강의
- 정부 API를 이용한 미세먼지 측정 앱 (완료)
- Provider 패키지를 이용한 상태관리 (코드팩토리 중급강의 Riverpod 참고 [Provider 100% 호환])
- Hive 데이터베이스 사용하기 (완료)
지식공유자를 소개합니다 ✒️
- 🏭 코드팩토리 유튜브
- 현) 주식회사 코드팩토리 대표
- 전) Milliman Software Engineer
- 영국 Imperial College 학사
오프라인 강의 경험
- 밀리의서재 개발자대상 Flutter 교육 강사
- 서울디지텍고등학교 Flutter 특강 강사
이런 분들께
추천드려요!
학습 대상은
누구일까요?
앱 개발자가 되고싶은 분
프로그래밍 초보
소통하며 도움받는 걸 중요하게 생각하는 분
코드를 한 번만 작성해서 Android와 iOS앱을 모두 제작하고 싶으신 분
선수 지식,
필요할까요?
개발에 대한 지식이 있으면 좋지만 필수는 아닙니다.
안녕하세요
코드팩토리입니다.
안녕하세요 프로그래밍 강사 코드팩토리입니다!
코드팩토리 통합 링크
https://links.codefactory.ai
🏭 코드팩토리 유튜브 바로가기
🔥 코드팩토리 Discord 바로가기
💬 코드팩토리 카카오 오픈톡 바로가기
💼 주식회사 코드팩토리 대표
🏆 2023년 인프런 베스트셀러 수상
🏆 <<Must Have 코드팩토리의 플러터 프로그래밍>> 서적 2023 상반기 교보문고 컴퓨터/IT 부문 베스트셀러 23위
🏆 AWS Certified Developer Associate
🏆 AWS Certified Solutions Architect
커리큘럼
전체
269개 ∙ 33시간 13분
마지막 업데이트일: 2024년 09월 02일