자동 재생
자동 완성
이전 강의
완료하고 계속하기
Flutter 인스타그램 직접 제작 코딩 마스터 강좌 2.0
Introduction
에너지 부스터 동영상! (8:25)
강의 제대로 이용하자!!(질문 방법, 소스코드) (1:10)
프로젝트 진행 중 문제 발생 시!! 해결방법!!
27초만 부탁드립니다^^ 사랑해요!!
코딩 처음하시는 분들 이거 보고 가세요^^
Dart언어 30분 훓기
첫 Flutter 앱 만들어보고 가자!
Class, Instance, Constructor (4:07)
Set up work station
[윈도우] Flutter 설치법
[Mac] Flutter 설치법
Preparation
1. 프로젝트 생성 후에 예제앱을 IOS, 안드로이드에 실행해보자 (5:40)
1-1. 안드로이드 에뮬레이터 생성하는거야 (2:43)
1-2. ios 에뮬레이터 사용방법은 여기에 있어요 (2:00)
1-3 선 연결없이 안드로이드폰 디버깅하는 방법 (3:49)
1-4 ios 선 연결 없이 디버깅 하는 방법 (2:21)
2 안드로이드 스튜디오에 대해서 간단한 설명 (5:57)
3 플러터 어떻게 돌아가는걸까 (9:08)
플러그인 업데이트 방법! (2:19)
Layout
4 MaterialApp 위젯 (2:54)
5 코드 나누기(위젯 추출) (3:30)
6 bottom navigation bar 생성 (22:29)
7 indexed stack으로 화면 변경해주자 (4:45)
7-1 IndexedStack 위젯에 대해서! (1:22)
프로그래머란 - 1
Feed Screen Layout
8 feed screen 생성 (2:46)
9 커스텀 폰트 (7:52)
10 커스텀 material white color (8:20)
11 feed screen에 Listview (7:17)
12 appbar(actionbar) 만들어보자 - Column, Row, ListView 설명 (10:26)
13 post위젯 분리 (5:42)
14 온라인 image 보여주자 (11:17)
15 로딩위젯보여주자 (7:04)
16 custom progress indicator 만들기 (8:24)
17 post header (9:56)
18 extract 위젯 (2:10)
19 post actions button (4:34)
20 number of likes for post (4:18)
21 caption/comment widget 생성 (20:33)
Flutter 2.0 업글 후 Deprecated Widget 핸들링 (1:00)
Profile Screen Layout
22 profile 화면 생성 (9:44)
23 username in profile (3:37)
24 customscrollview (15:35)
25 custom selection button (12:19)
26 animation with animated container (9:07)
27 how to use enum (2:38)
28 gridview & slivertobox (8:26)
29 image grid 랑 custom pager (13:09)
30 improve readibility by using function (3:14)
31 profile header (using table widget) (10:28)
32 profile menu animation (29:04)
33 profile side menu (13:56)
33-1 Positioned위젯은 항상 Stack children안에 (1:18)
34 animated icon (12:26)
Authentication Screen Layout
플러그인 업데이트 방법! (2:19)
35 auth screen 생성 (2:01)
36 animated switcher (sign up form, sign in form) (30:29)
37 richtext in auth page (7:00)
38 make border from flat button (2:35)
39 SignUpForm layout 만들기 (3:56)
40 SignupForm 안에 ListView 사용 (3:23)
41 TextFormField 사용해서 email input 만들자 (10:11)
42 입력창 복사하자 (6:04)
43 입력창 입력값 정확성 여부 확인하자 (12:17)
44 왠지 숫자가 맘에 안들어서 뺐어요 ㅎㅎㅎ
45 keyboard에 따른 화면 조절 (6:00)
46 main화면으로 이동, auth화면으로 이동 (5:00)
47 커스텀 Divider (5:05)
48 Flatbutton with icon 사용하자(facebook버튼) (4:59)
49 Sign up 카피해서 Sign in 만들기 (8:39)
50 forgotten password, Align위젯 사용 (3:30)
Camera Screen Layout
51 camera화면 만들고, 새로운 창으로 띄우기 (6:23)
52 openCamera메소드 만들자 (0:46)
53 BottomNavigationBar without Icon (9:46)
54 Link Pageview and BottomNavBar (4:21)
55 camera screen appbar with back button (6:08)
56 take photo widget layout (9:48)
57 camera plugin setup (4:21)
57-1 camera plugin setup (0:49)
What is Furture, Async, Await?
58 permission handler 사용법 (12:38)
59 Snackbar는 반드시 Scaffold 안에서 사용해야 돼 (3:18)
60 setting페이지에서 permission허용하기 (5:01)
[추가] Physical iPhone에 앱 인스톨이 안될 때! (2:14)
61 camera preview (11:54)
62 crop camera preview (7:41)
Provider
What is State Management?
63 how provider works (5:40)
64 how to use provider (6:22)
65 create camera state file(change notifier model) (7:00)
66 build camera state model(change notifier model) (10:49)
67 use multi provider (5:32)
Operate Camera
68 use camera_state model to show preview (4:26)
69 prevent memory leak by disposing the controller (2:39)
70 take picture (9:46)
71 share post screen 생성 (5:07)
Gallery Layout
72 gallery layout (3:15)
73 setup gallery access (3:09)
74 create gallery state object (5:32)
75 show photos from device on my gallery (10:15)
76 localimage class to bytes to file (9:44)
77 cover available area for image (1:10)
[추가]77-1 memory issue when showing images (1:57)
설문
여러분의 31초가 최강강의에 주는 임팩뜨!!
Search(Follow/Unfollow) Screen
78 create search(Follow/Unfollow) page (11:23)
79 change color when click a button (3:38)
Firebase Authentication
80 create firebase project( enable auth ) (7:40)
80-1 android project setting for firebase auth (4:40)
81 ios set up for firebase auth (4:03)
82 firebase auth 상태 모델 생성 (6:48)
83 inject FirebaseAuthState via provider (10:05)
84 testing sign in and sign out flow (8:34)
85 using animated switcher for sign in-out transition (3:53)
86 sign out method 생성 후 사용 (3:02)
87 wire sign in-up with firebase auth (11:19)
88 error handling for sign up (8:22)
89 error handling on login (4:40)
Facebook Signin
90 implement facebook login (Android) (33:05)
91 implement facebook login (iOS) (6:30)
92 signout(logout) facebook as well (4:21)
93 progress while auth state change (9:01)
93-1 onAuthStateChange가 달라졌어요! (1:27)
Firebase Firestore
94 understand firestore NoSQL database (2:00)
95-1 understand of firestore database!! (9:30)
95-2 understand of firestore database!! (10:21)
95-3 understand of firestore database!! (9:02)
95-4 understand of firestore database!! (10:40)
96 create firestore keys (6:30)
97 how to extract the data fields from design (10:32)
98 extracted data to data structure (10:25)
99 why we choose separated collection for post instead of subcollection (7:05)
100 set data type for each data (10:17)
Firestore 'Users' Collection 연결
101 create user model (13:00)
102 create user model state (2:43)
103 firestore로 데이타 보내고 받자 (12:51)
104 create user data from sign up (17:45)
What is Stream?
105 create user model stream (5:08)
106 create transformer and use (8:51)
107 use user model stream (6:52)
108 show user data from stream (6:38)
109 how to cancel stream (8:23)
110 로그인할때 FirebaseUser 생성해주기 (2:12)
111 null checking (2:57)
Share Post
112 unique post key 만들기 (4:55)
113 send post key to share screen (5:49)
114 app bar layout on share post (3:20)
115 caption part in share post body layout (6:41)
116 section button layout in share post (7:56)
117 horizontal scroll tags (10:57)
118 section switch layout (8:02)
119 resize image (10:45)
120 what is isolate (4:01)
121 use isolate to resize the image (9:26)
122 show loading while processing(modal bottom sheet) (5:16)
Firebase Storage
123 upload image to firebase storage (8:12)
124 get image download link and show the image (6:58)
Firestore 'Posts' Collection 연결
125 create post model (17:47)
126 create transaction to upload post data (16:54)
127 use create new post (3:52)
128 use textfield to get caption (3:24)
129 finish share post (10:26)
Implement Follow/Unfollow logic with Firestore
130 fetch all users except me (12:19)
131 show all the users exept me (10:12)
132 follow-unfollow user method (9:18)
133 follow unfollow implementation (11:58)
133-1 check null for usermodel (1:42)
Connect Feed Screen to Firestore
134 fetch posts from specific user (3:06)
135 posts transformer (2:21)
136 fetch all posts and combine them into one stream (15:36)
137 using stream with stream provider (5:31)
138 get followings from user model (4:09)
139 connect post with data (4:22)
140 testing feed update (1:18)
141 fix stream provider issue (1:35)
Comment Layout
142 comment modeling (2:30)
143 create comment model (5:43)
144 comment collection on firestore (2:02)
145 create new comment into firestore (11:34)
146 fetch all the comments for a post (6:02)
147 navigate to comments screen page (3:00)
148 comments page input layout (8:58)
149 connect comments screen to firestore (16:12)
150 fix last comment update bug (3:34)
151 show more comments label (8:53)
152 toggle like method (7:49)
153 connect like button to firestore (6:17)
추가 강의
코멘트 맨 아래로 자동 스크롤하는 방법 (2:50)
로그아웃을 깔끔하게! (6:31)
카메라 플러그인 업데이트 (3:40)
FlatButton을 TextButton으로 (Flutter 2.0) (2:58)
45 keyboard에 따른 화면 조절
강의가 곧 준비됩니다.
이미 등록한 경우,
로그인이 필요합니다.
.
잠금을 해제하기 위해서 등록을 해주세요