Flutter로 만드는 iOS, Android 앱
Flutter 라이브러리를 사용하면 하나의 코드베이스로 iOS, Android 앱을 만들 수 있습니다.
- React Native보다 빠른 네이티브급 성능과 느낌을 기대할 수 있고
- 커스텀 디자인 넣기도 매우 쉽고
- 구글이 계속 밀어주고 업데이트 주기도 잦기 때문에
요즘 신규 앱개발을 해야하는데 시간과 자원이 부족하다면 Flutter가 탁월한 선택입니다.
이미 Stadia, BMW, Google 신규 앱은 플러터로 만들어서 사용중입니다.
우리도 실제 프로덕션 레벨의 앱들을 만들어보도록 합시다.
그냥 선생님 코드 따라하기 식으로 배우면 정말 그것 밖에 못만들기 때문에
혼자 코드짤 수 있게 Flutter 사용법과 문법의 용도를 많이 알려드리는 강의입니다.
Dart 라는 언어의 장벽을 느끼는 분들이 있는데
자바스크립트 하던 분들에게 맞춰 쉽게 진행합니다.
실은 Dart 문법은 그냥 자바스크립트랑 거의 똑같습니다. 자바스크립트 열화버전
[배울 내용]
프로젝트 : 연락처 관리 앱 만들기
프로젝트 : 인스타그램 앱 만들기
기본 레이아웃 디자인
커스터마이징
혼자서도 앱 레이아웃 잘짜는 법
state와 state 관리법
서버와 통신기능
전환 애니메이션
네비게이션, 탭 등 필수 UI
연락처, 사진 등 폰 데이터 사용하는 법
서버없어도 서버역할 해주는 Firebase 약간
로컬 데이터 저장
notification 알림 팝업
iOS, Android 앱 발행
[필요한 사전 지식]
- JavaScript 기초 (var, function, if else, for, array, object)
- 혹은 다른 프로그래밍 언어 기초 (var, function, if else, for)
- 코드 짜는게 처음이라면 JavaScript 기초강의 선행 추천드립니다.
[업데이트 내용]
플러터 3.X 셋팅방법
연락처 패키지 flutter_contacts로 변경
local_notification 신버전 내용 추가
커리큘럼
| Part 1 : 연락처앱 만들기 | |||
| 요즘 새로운 앱개발은 플러터로도 충분 | 무료 | 00:05:00 | |
| Flutter 설치와 개발환경 셋팅 2025 (윈도우 / 맥) | 무료 | 00:09:00 | |
| 플러터 기본 위젯 넣는 법 | 무료 | 00:13:00 | |
| 플러터 기본 앱 레이아웃 만드는 법 (Scaffold) | 무료 | 00:11:00 | |
| Flutter에서 박스디자인하는 법 (margin, padding, 정렬) | 무료 | 00:12:00 | |
| 플러터 Typography & 알아서 레이아웃 잘짜려면 | 00:11:00 | ||
| Expanded, Flexible & 상품 레이아웃 숙제 | 00:12:00 | ||
| 코드가 길어지면 커스텀 위젯만드세요 | 00:11:00 | ||
| 목록 많이 만들 땐 ListView.builder, 버튼에 기능만들기 | 00:09:00 | ||
| StatefulWidget 만들기 | 00:12:00 | ||
| Dialog/모달창 만드는 법과 context가 뭔지 | 00:13:00 | ||
| 자식 위젯이 부모 위젯의 state를 사용하고 싶으면 | 00:10:00 | ||
| 자식 위젯이 부모 위젯의 state를 변경하고 싶으면 | 00:09:00 | ||
| 숙제 : 글작성하면 목록이 생성되어야하는데요 | 00:10:00 | ||
| Android / iOS 기기에서 플러터앱을 미리보기 띄우려면 | 무료 | 00:05:00 | |
| 유저에게 앱 권한 요청하기 | 00:13:00 | ||
| 폰에 저장된 연락처 몰래 가져오는 법 & 타입시스템 | 00:13:00 | ||
| null check 하는 법 & Android 앱으로 발행하기 | 00:12:00 | ||
| iOS 앱으로 발행하기 | 00:05:00 | ||
| 글자입력란 TextField에 스타일주는 법 | 00:05:00 | ||
| Part 2 : Instagram 만들기 | |||
| 프로젝트설치 & ThemeData로 스타일 분리하려면 | 00:11:00 | ||
| import 문법과 ThemeData 추가 내용 | 00:11:00 | ||
| 탭으로 페이지 나누는 법 | 00:13:00 | ||
| 앱이 서버와 데이터 주고받는 법 | 00:16:00 | ||
| Future 다루기 그리고 FutureBuilder | 00:12:00 | ||
| 스크롤 위치 파악하는 법과 더보기 요청 | 00:10:00 | ||
| 상세페이지 만들기 (Navigator) | 00:10:00 | ||
| 폰에 저장된 이미지 가져오려면 | 00:12:00 | ||
| 선택한 이미지와 글을 게시물로 보여주라던 숙제 | 00:12:00 | ||
| DB없이 데이터 저장하려면 shared preferences | 00:12:00 | ||
| GestureDetector & 페이지 전환 애니메이션 | 00:13:00 | ||
| 3-step으로 자꾸 보내는거 싫으면 Provider 쓰든가 하쇼 | 00:12:00 | ||
| Provider 2 : store 여러개 & GET 요청 | 00:12:00 | ||
| GridView, CustomScrollView 프로필 페이지 만들기 | 00:11:00 | ||
| Local notification 알림 주는 법 | 00:12:00 | ||
| 유저 귀찮아하게 주기적인 알림띄우려면 | 00:10:00 | ||
| 서버 만들 줄 모르면 Firebase 쓰는 것도 나쁘지 않을 수도 | 00:10:00 | ||
| Firestore에 데이터 저장하고 뽑는 법 | 00:17:00 | ||
| Firebase 회원 인증기능 | 00:09:00 | ||
| Firestore 데이터 입출력시 규칙 정하는 법 | 00:11:00 | ||
| 반응형으로 스크린 사이즈 대응하기 | 00:13:00 | ||
| 유용한 패키지들 모음 | 00:05:00 | ||
늦은 밤 열심히 공부 하고 있습니다.!!
늦은 밤 열심히 공부 하고 있습니다.!!
BackEnd만 주로 하는 프리랜서입니다.
말씀이 귀에 쏙쏙 박히네요..
감사합니다.
잘 보고 있습니다
말씀과 비유가 척척 들어오고 처음 할 때 볼법한 오류의 해결 방안도 같이 말해 주셔서 좋은 것 같아요!
이해가 너무 잘되서 좋아요
다른 강좌들은 거의 따라하기식이라 나중에 남는게 거의 없었는데
여기는 핵심부분만 짚어주시니 뭔가 배운다는 느낌이 확실히 드네요!
나중에 플러터 중급 강좌도 꼭 만들어주시면 좋겠습니다!!
한국 코딩강좌의 최강자
다른말 필요 없고요
한국말로 제일 쉽게 재밌게 확실히
잘 가르쳐 주는 강사님 입니다
최고 입니다요
덕분에 열공하고 있습니다
유튜브 보다가 납치당했습니다.
유튜브로 강좌 찍먹하다가 자진해서 끌려오긴 처음입니다.
무심한듯 시크하게 핵심만 콕콕 찝어주는 딕션이 일품입니다.
이렇게 열심히 강좌 보는거, 처음입니다.
형 플러터 중급이상 강좌 제발요
형꺼듣다가 다른사람 강의 못 듣겠음...
이거 완강함!
매번 어렵게 설명하는 블로그나 공식 문서 글에 지쳤다면, 빨리 이 쌤 강의 들으세여. 작년까지 회사에서 엑셀 워드만 하던 문과 출신 빡대가리가 플러터에 흥미붙였습니다! 아 물론, 제가 빡대가리라서 강의 들으면서 찔린 적도 많고 한 번에 이해하고 해결한 적이 드물지만 .... ㅠㅠㅠ 그래도 이 강의를 들으면서 flutter를 어떻게 써야하는지는 알았습니다!
pub 라이브러리를 예시로 몇 개 뜯어 보면서 커스터마이징까지 함께하는 강의나, 본격적인 서버 기능까지 구현한 다음 단계 flutter 강의 기대하겠습니다!
와씨 중급강의 빨리 또 개설해주세요
현기증 난단말입니다
깔끔한 강의 좋네요.
최근에 들었던 인강 중에 가장 좋네요.
숙제도 주기적으로 있어서 스스로 생각해볼 수 있게 하고, 그냥 따라치는 강의가 아니라 진짜 학습했다는 느낌이 드는 강의입니다.
이 강의가 초급이었다면, 중급, 고급, 최고급 수준의 강의도 만들어주시면 너무 좋겠습니다.
강좌 완료 소감
350일 남았으니 시간상 15일 걸렸네요.
좀 밍기적 거리면서 보느라 오래 걸린 듯 합니다.
강의는 최신 Flutter 입문에 정말 좋네요.
꼭 필요한 부분, 입문 했을때 빠르게 적응할 수 있는 것들을 쉽고 간결하고 빠르게 알려주시네요.
제 개인적인 생각에 플러터라는 강력한 개발 플랫폼이 나오면서 이제 대세는 플러터가 될거라 생각하고 시작한 공부입니다만
이 강좌를 알게되서 정말 다행입니다.
사실 플러터나 머터리얼 홈페이지의 doc 페이지의 예제를 따라해도 입문하기엔 충분하지만 이 강의에는 프로그래밍 하는데 필요한 것들을 많이 알려주시네요.
쉽게 말하면, 찾을려면 찾겠지만 좀 고생해야하는 것들을 알려주시는 것 만으로도 강의료가 아깝지 않습니다.
강의의 목소리라고 해야할지 톤이라고 해야할지 친절하진 않지만 감정 실리지 않게 일정하게 유지해주는 것도 좋습니다. 별 생각 안나고 잘 듣게 되네요 ㅋ
ps.
우연히 코딩애플 구글 광고를 봤는데 재밌더군요 ㅋㅋㅋ
플러터 기반 앱 회사에 재직중입니다.
웹/앱 디자이너인데
선생님께 과거 뷰, 리액트를 익혔었고...
구글링과 책으로만 조금씩 익히던 플러터를 선생님께 익힐 수 있어 영광이고 감사했습니다.
복습과 함께 지속적으로 자기계발에 힘쓰려 하는 중으로.. 더더 많은 모든 언어를 선생님께 배우고 싶네요 ㅎㅎ
재밌고 유익하고 핵심만 전수해주시는 하늘과 같은 은혜에 항상 감사드립니다. 오픈톡방에서도 홍보 많이 합니다 ㅎㅎ
적게 일하고 많이 버세요, 선생님 화이팅~~~ 건강하게 오래오래 사셔요~~~!
최고네요~~
알기쉽게 설명해주십니다...
최고입니다.
1타강사
1타강사
덕분에 졸업작품에서 2등했습니다
공대 비개발전공 학생인데 이 강의덕분에 4개월만에(프론트는 2개월만에) 훌륭한 퀄리티의 앱을 개발했습니다
정말 감사드립니다!!! 덕분에 2등했네용
너무 잘 배웠습니다.
유튜브 강의 보다가 홀린듯 들어와서 결제했습니다.
이해하기 쉽게 설명해주셔서 플러터에 대해 많이 배웠습니다.
사실 책 보고 공부해도 좋지만 책으로 하면 지겹잖아요 ㅎㅎ
비교적 짧은시간안에 전체적으로 감을 잡을수 있어서 매우 만족스러웠습니다.
뭐 첨부터 끝까지 3일만에 다 보긴 했지만 365일동안 수강 가능하다는 점도 마음에 드네요.
좋은 싸이트 만들어주셔서 감사합니다.
앞으로도 좋은 강의 많이 부탁드립니다~
좋은 플러터 강의
개인적으로 리액트나 프론트엔드를 조금 알고 있는 상태에서 들었지만, 몰라도 쉽게 이해하고 따라할 수 있게 강의가 구성되어있다.
좋은 강의 감사합니다.
잘 보고있습니다. 연락처 완료~~ 이제 인스타그램 진행중입니다.
이렇게 쉽게 가르쳐주는 사람은 국내 최초인듯 합니다.
코딩이 재밌습니다
이 강의를 통해 돈도 벌고 꿈꾸던 도전을 할 수 있게 되었습니다 !
저는 많은 사람들이 이용하는 서비스를 만들고 싶어 컴퓨터공학과에 진학했습니다.
하지만 대학에서 가르치는 내용들은 서비스를 만드는 데 필요한 지식과는 거리가 멀었고
전 휴학을 결정하고 이 강의를 통해 flutter를 공부하고 우연한 기회가 닿아 외주를 받게 되었습니다.
외주로 앱을 만드는데에 있어서 코딩애플님의 flutter강의에서 배운 내용이 튼튼한 기반이 되어주었고
그 결과, 300만원을 범과 동시에 flutter와 firebase를 통해 작은 서비스를 만들 실력이 형성되었습니다.
그리고 이제는 많은 사람들이 이용하는 서비스를 개발하는 것을 목표로 앱을 개발 중입니다 !
코딩애플님의 강의가 없었다면 여기까지 오는 데에 있어서 더 많은 시간이 걸렸을 것 같습니다.
코딩애플님께 감사하고 이 강의 완전 강추합니다 !
이 강의가 좋은 점
1. 단순히 이론만 가르치는 것이 아닌, 중간중간 숙제를 통해, 배운 이론을 단순히 지식을 넘어 나의 실력으로 만들어줌.
2. 구글링하여 스스로 문제를 해결하는 것을 연습시킴으로써 강의를 끝낸 이후에도 더 배우고 싶은 영역을 스스로 학습할 수 있게 됨.
3. 게시판을 통해 질문을 하면 24시간 내에 답변을 해주심.
많은 강의를 들어봤지만 그냥 이 강의가 최고임. 그냥 짱임. 말이 필요없음 그냥
해커톤 참여하는데 단기 속성 강의로 훌륭했습니다.
해당 내용을 2주 동안 수강 후 프론트앤드로 해커톤 참여했습니다. 수강 내용을 바탕으로 앱 개발을 하였고 중간중간 새로운 기능이 필요할 때 혼자 찾아서 적용할 수 있을 정도의 수준이 되었습니다.
매우 유익했고 도움되었습니다. 감사합니다!