오준석의 Flutter 입문. 안드로이드, iOS 개발을 한 번에
3.9 (23 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
58 students enrolled

오준석의 Flutter 입문. 안드로이드, iOS 개발을 한 번에

한 번의 개발로 모바일 개발을 끝내자
3.9 (23 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
58 students enrolled
Created by Junsuk Oh
Last updated 3/2019
Korean
Price: $29.99
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Flutter 기초를 학습합니다.
Requirements
  • 자바 또는 그에 상응하는 언어 지식
Description

안드로이드와 iOS 개발을 한 번의 코드로 작성할 수 있는 Flutter 입문 강좌입니다.


플러터는 구글의 Dart 언어로 작성하는데 그 형태가 쓰임새가 자바나 자바스크립트와 흡사합니다.

따라서 별도로 Dart 언어를 학습하지 않고 바로 플러터를 다루어 보면서 자연스럽게 Dart 언어에도 익숙해 집니다.


이 강좌에서는 플러터의 샘플 앱을 분석하기 위한 기본 위젯들의 사용방법을 알아봅니다.

기본 위젯을 다루어 보았다면 궁극적으로 인스타그램 클론 앱을 만들어 보면서 플러터의 기초를 익히게 됩니다.

Who this course is for:
  • 앱 개발에 관심있는 C, Java, C# 등 다른 언어 경험자
Course content
Expand all 37 lectures 03:10:19
+ Flutter 소개
2 lectures 05:29

안드로이드와 iOS 개발을 한 번의 코드로 작성할 수 있는 Flutter 입문 강좌입니다.


플러터는 구글의 Dart 언어로 작성하는데 그 형태가 쓰임새가 자바나 자바스크립트와 흡사합니다.

따라서 별도로 Dart 언어를 학습하지 않고 바로 플러터를 다루어 보면서 자연스럽게 Dart 언어에도 익숙해 집니다.


이 강좌에서는 플러터의 샘플 앱을 분석하기 위한 기본 위젯들의 사용방법을 알아봅니다.

기본 위젯을 다루어 보았다면 궁극적으로 인스타그램 클론 앱을 만들어 보면서 플러터의 기초를 익히게 됩니다.

Preview 02:37

강좌의 구성

Preview 02:52
+ Flutter 개발환경 구축
4 lectures 10:55

Mac에서 Flutter 환경 설정

Preview 03:26

Windows에서 Flutter 환경 설정

Preview 03:04

Flutter는 다음 IDE 중 하나로 개발할 수 있습니다.

  • 안드로이드 스튜디오

  • IntelliJ

  • Visual Studio Code

본 강좌에서는 안드로이드 스튜디오를 사용합니다.

Preview 02:33

안드로이드 스튜디오에서 에뮬레이터 설치 및 에뮬레이터에서 데모 앱을 실행해 봅니다.

Preview 01:52
+ Flutter 기초 지식
6 lectures 19:45

Flutter 프로젝트 구조를 알아봅니다.

Preview 01:58

머티리얼 디자인 앱을 만들기 위해서는 Scaffold 위젯을 사용합니다.
Scaffold는 appBar, body 등의 속성이 있어 이를 활용하면 간단히 머티리얼 디자인 앱의 뼈대로 활용할 수 있습니다.

Preview 05:00

StatelessWidget은 상태의 변화가 필요없을 때 사용하는 위젯입니다.

Preview 00:51

StatefulWidget은 UI의 변경이 필요한 위젯입니다.

Preview 04:09

StatefulWidget에서는 setState() 를 이용하여 UI를 다시 그릴 수 있습니다.

Preview 03:14

프로젝트 생성시 기본 샘플 앱을 만들어 보면서 코드를 이해합니다.

Preview 04:33
+ 기본 위젯
10 lectures 23:28

flutterstudio.com 사이트를 활용하여 기본 위젯의 코드를 확인하는 방법에 대해 알아봅니다.

가장 많이 사용하는 Text 위젯부터 알아볼게요.

Preview 02:03

앱의 전체적인 설정을 하려면 ThemeData를 설정합니다.

primarySwatch 에 미리 정의된 컬러를 지정하면 자동으로 전체적인 테마가 설정됩니다.

추가적으로 primaryColor, accentColor 등을 변경할 수 있으며

글자색이나 앱바의 색상이 이에 따라 결정됩니다.

Preview 00:35

중앙 정렬은 Center 위젯,

좀 더 다양한 레이아웃을 구성하려면 Container 위젯을 사용합니다.

Preview 02:27

Column 위젯은 아래로 겹치지 않게 순서대로 배치하도록 하는 레이아웃 위젯입니다.

Preview 01:15

Row 위젯은 Column과 반대 방향인 오른쪽으로 겹치지 않게 배치할 수 있는 레이아웃 위젯입니다.

Preview 00:50

Stack 은 여러 위젯을 겹칠 수 있게 해 주는 레이아웃 위젯입니다.

Preview 00:42

Padding 위젯은 다른 위젯을 감싸서 안 쪽 여백을 줄 수 있는 레이아웃 위젯입니다.

Preview 00:48

머티리얼 디자인은 구글의 모든 제품에 적용하고 있는 디자인 컨셉입니다.

Flutter에서는 기본으로 머티리얼 컨셉의 위젯들을 제공하고

본 강의에서도 기본 위젯으로 머티리얼 디자인을 사용합니다.

참고자료

  • https://material.io/

Preview 04:01

iOS에서는 쿠퍼티노 디자인을 기본 디자인 컨셉으로 사용합니다.

Flutter에서는 구글의 머티리얼 디자인 뿐만 아니라 쿠퍼티노 디자인도 사용할 수 있습니다.

참고자료

  • https://developer.apple.com/design/human-interface-guidelines/

Preview 07:53

화면 전환을 네비게이션이라고 하고 Navigator 를 사용합니다.

네비게이션에는 크게 두 가지를 가장 많이 사용합니다.

다른 화면을 현재 화면 위에 올리는 push 와 현재 화면을 제거하는 pop이 있습니다.

특히 머티리얼 앱에서는 push 로 실행된 화면에서는 자동으로 pop을 지원합니다.

Preview 02:54
+ 인스타그램 클론 작성
15 lectures 02:10:42
HomePage UI 작성
17:23
Account 페이지 UI 작성
12:09
Search 페이지 UI 작성
05:45
Create 페이지 UI 작성
07:06
갤러리에서 사진 불러오기
09:50
로그인 페이지 UI 작성
03:19

기존에 업로드된 영상대로 하면 구글 로그인 직후에 바로 로그아웃이 안 되는 현상이 있었습니다.

3월 16일에 해당 부분을 수정 편집해서 영상을 교체하였으니 참고바랍니다.

Firebase와 Google 로그인 기능 구현
21:57
FirebaseUser 정보 표시하기
04:16
Firebase Storage와 Firestore를 사용하여 게시물 업로드하기
13:04
StreamBuilder로 Firestore의 데이터 읽어오기
04:59
게시물 보는 화면 UI 작성
07:20
Hero 위젯으로 애니메이션 구현하기, Firestore에 단발성 로딩 구현
06:27
iOS 용 Firebase 설정 (MAC 전용)
04:11