1주차 - Flutter 앱 개발 맛보기 & Dart 문법 익히기
PDF 파일
단축키 모음
- 새로고침
F5 - 저장
- Windows:
Ctrl+S - macOS:
command+S
- Windows:
- 전체선택
- Windows:
Ctrl+A - macOS:
command+A
- Windows:
- 잘라내기
- Windows:
Ctrl+X - macOS:
command+X
- Windows:
- 콘솔창 줄바꿈
shift+enter
- 코드정렬
- Windows:
Ctrl+Alt+L - macOS:
option+command+L
- Windows:
- 들여쓰기
Tab- 들여쓰기 취소 :
Shift+Tab
- 주석
- Windows:
Ctrl+/ - macOS:
command+/
- Windows:
- 새로고침
[수업 목표]
- Flutter 앱 개발 과정 이해하기
- VSCode와 친해지기
- Dart 문법 이해하기
[목차]
01. Why Flutter
1) 앱 개발 방법
네이티브 앱(Native App)
Android
→ Google에서 제공하는 Android SDK(Software Development Kit)를 이용하여 개발
- 프로그래밍 언어 :
Java / Kotlin - 개발 툴 :
Android Studio
- 프로그래밍 언어 :
iOS
→ Apple에서 제공하는 iOS SDK(Software Development Kit)를 이용하여 개발
- 프로그래밍 언어 :
Objective-C / Swift - 개발 툴 :
XCode - 특이사항 : macOS 에서만 개발이 가능
](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/24b8cf19-994a-475f-8286-085fae602e3b/Untitled.png)
- 프로그래밍 언어 :
크로스 플랫폼 앱(Cross Platform App)
React Native
- 프로그래밍 언어 :
JavaScript - 페이스북에서 출시한 오픈 소스 모바일 애플리케이션 프레임 워크
- 프로그래밍 언어 :
Flutter
- 프로그래밍 언어 :
Dart - 구글에서 출시한 오픈 소스 모바일 애플리케이션 프레임 워크
- 프로그래밍 언어 :
2) 왜 크로스 플랫폼을 사용할까요?
🛠 생산성이 월등하다.
코](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d51dbc5b-137e-4773-9595-21ebb1617f97/Untitled.png)
3) 왜 Flutter를 사용할까요?
🔥 Flutter가 훨씬 핫하다 (React Native 대비. 커뮤니티 & 자료 ⬆)
→ 개발을 할 때 훨씬 편하게 찾아볼 수 있다는 뜻입니다 :)
](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5b7f3443-bb00-4469-b9d2-1a1db38319ad/Untitled.png)
출처 - getstream.io
📚 공식 문서가 잘 되어 있다.
](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/714c420a-8ad8-403c-957b-5b1186fd1c67/Untitled.png)
👍 성능이 뛰어나다
](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1864162f-6d0e-4826-bc7e-7c80e085a122/Untitled.png)
출처 - Flutter vs Native vs React-Native: Examining performance
02. 설치하기
- Windows 사용자를 위한 프로그램 설치 방법
- [잠깐] 혹시 Windows 7를 쓰신다면 아래 가이드를 따라주세요 :)
- [링크](https://www.microsoft.com/ko-kr/p/powershell/9mz1snwt0n5d?activetab=pivot:overviewtab)에 접속하셔서 Power Shell을 설치해주세요.
**[프레임워크 설치하기]**
- 1. Flutter 설치하기
<aside>
💡 Flutter 설치 과정은 일반적인 프로그램 설치와는 조금 다릅니다. 일반적으로는 `.exe` 파일등을 실행해 프로그램을 설치하는데요.
Flutter 설치는 아래와 같은 과정으로 진행됩니다.
1. zip 파일을 다운로드 받아서 적절한 경로에 압축 해제
2. 압축 해제한 flutter 폴더 경로를 환경변수에 등록
(flutter 라는 명령어가 이 경로에 있다는 것을 윈도에게 알리는 것과 같습니다)
</aside>
- 1) 다운로드
1. 먼저 flutter 를 설치할 폴더를 만들겠습니다.
아래 사진에서 밑줄친 부분을 폴더 경로(주소)라고 하는데요.
여기에 **한글이나 공백이 들어가면** 인식을 못하고 에러가 발생합니다.
에러를 막기 위해 `C 드라이브` 바로 아래에 `src` 라는 이름의 폴더를 생성해줍니다.
2. flutter 를 다운로드할 수 있는 [링크](https://docs.flutter.dev/get-started/install/windows)로 이동합니다.
[Windows install](https://docs.flutter.dev/get-started/install/windows)
3. 파란색 버튼(zip 파일 다운로드 링크)을 클릭합니다.
<aside>
💡 아래 경고 메시지를 꼭 확인해주세요
1. 특수문자(한글 포함)나 공백이 설치 경로에 포함되면 안된다
2. `C:\Program Files\` 밑에는 설치하면 안된다 (상위 권한 필요)
</aside>
4. 아까 만들어준 `C:\src` 폴더에 해당 zip 파일을 다운로드 해줍니다.
<aside>
💡 zip 파일은 어디에 다운로드하셔도 상관 없습니다.
대신 압축을 풀어줄 때 만큼은 꼭 `C:\src` 폴더에 풀어주세요
</aside>
5. 압축을 해제해주세요!
누르면 아래와 같이 압축 해제 대상 폴더를 지정하는 화면이 나옵니다.
여기서 `flutter_windows_…` 이 부분을 지워주세요.
지우고 난 경로는 아래와 같습니다. 마저 압축 해제를 눌러줄까요?
압축을 모두 해제하는 데 10-20분 정도 걸립니다.
압축 해제가 끝나고 나면 아래와 같이 flutter 라는 폴더가 생성되어 있을 것입니다.
(위에서 경로를 잘 지정해줬다면요!)
<aside>
💡 간혹가다 위에서 경로 설정을 실수해 `flutter_windows_…` 이런 이름으로 해제된 경우가 있습니다.
이 때는, 해당 폴더를 클릭해서 들어가면 비로소 `flutter` 라는 이름의 폴더를 보실 수 있습니다. 해당 `flutter` 폴더를 위 사진과 같이 밖으로 빼주세요!
(아래 환경 변수 설정을 원활히 하기 위함입니다)
</aside>
- 2) 환경 변수 설정
<aside>
💡 다운로드한 Flutter를 어디서든지 사용 가능하도록 설정하는 절차입니다.
</aside>
1. 압축이 해제된 `flutter` 폴더로 들어가 주세요.
2. `bin` 폴더로 들어가주세요.
3. 들어가시면 `dart`, `dart.bat`, `flutter`, `flutter.bat` 과 같은 파일들이 있습니다.
<aside>
💡 이들이 바로 flutter 실행 파일입니다. cmd 로 이 폴더를 열고 `flutter` 라고 치면, 여기 있는 파일이 실행됩니다.
지금은 플러터가 설치된 폴더 에서만 `flutter` 라는 명령어를 실행할 수 있습니다.
우리는 이 flutter 실행 파일을 **컴퓨터 어디에서도 모두 접근 가능하게끔**, 즉 어디에서도 `flutter` 라는 명령어를 사용할 수 있게끔 해야 합니다.
환경 변수에 flutter 가 위치한 **폴더 경로를 추가**하면, 시스템의 모든 경로에서 이 flutter 파일에 접근하고, 실행할 수 있습니다.
</aside>
4. 이를 위해 우선 해당 폴더 경로를 복사하겠습니다. 위 과정을 잘 따라오셨다면 경로는 아래와 같습니다.
```
C:\src\flutter\bin
```
선택된 경로를 복사해주세요. (`Ctrl + C`)
5. 윈도우에 `환경 변수` 라고 검색합니다. (띄어쓰기도 하셔야 해요!)
6. 아래와 같은 창에서 `환경 변수` 버튼을 클릭해주세요.
7. `사용자 변수`에 `path`를 선택한 뒤, `편집` 버튼을 눌러주세요.
8. `새로 만들기(N)`을 선택하신 뒤 복사한 주소를 붙여 넣고 `확인` 버튼을 눌러주세요.
9. 켜져있는 창들을 모두 `확인` 버튼을 눌러 닫아주세요.
- 3) 설치 확인
1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.
2. 명령 프롬프트에 `flutter --version` 이라고 검색했을 때, 아래와 같은 문구가 뜨면 설치 완료!
<aside>
💡 이제 시스템의 모든 경로에서 `flutter` 라는 명령어를 사용할 수 있습니다!
</aside>
**[에디터 설치하기]**
- 2. Visual Studio Code
<aside>
💡 Visual Studio Code (줄여서 VSCode) 앞으로 실제 코드를 작성할 편집 툴입니다.
Flutter 개발은 Android Studio와 VSCode 둘 중 원하는 툴을 사용하여 개발할 수 있는데 VSCode가 더 가볍기 때문에 앞으로 수업은 VSCode에서 진행하도록 하겠습니다.
</aside>
- 1) VSCode 설치
1. [링크](https://code.visualstudio.com/download)에 접속해 주세요.
2. Window 버튼을 클릭합니다.
3. 내 문서에 저장합니다.
4. VSCodeUserSetup 파일을 실행해주세요.
5. `동의합니다` 선택 후 `다음` 버튼을 눌러주세요.
6. 경로를 확인하시고, `다음` 버튼을 눌러주세요.
7. `다음` 버튼을 눌러주세요.
8. `바탕 화면에 바로가기 만들기`를 선택해주시고, `다음` 버튼을 클릭해주세요.
9. `설치` 버튼을 클릭해주세요.
10. `종료` 버튼을 클릭해주세요.
11. 아래와 같이 Visual Studio Code가 실행되면, 설치 완료!
<aside>
💡 우측 하단에 한국어로 변경하라는 팝업이 뜹니다.
하지만 VSCode 사용법이나 대부분의 개발 자료는 영어로 되어 있기 때문에, 가급적 적용하지 않기를 권장 드립니다. (수업 자료도 영어 버전으로 되어있어요!)
해당 알람을 다시 보지 않으려면 `우측 톱니바퀴 ⚙` 아이콘을 누른 뒤 `Don't Show Again`을 선택해 주세요. (만약 사라져서 버튼을 누르지 못했다면 다음번에 눌러주세요!)
</aside>
- 2) Extension 설치
<aside>
💡 VSCode는 Flutter 뿐만 아니라 다양한 개발을 모두 할 수 있는 통합 에디터입니다. VSCode에서 Flutter 앱 개발을 하려면 VSCode에 Extension 탭에서 아래 목록의 Extension 들을 설치해야 합니다.
**Flutter** : VSCode에서 Flutter 개발 환경 지원
**Dart** : Flutter 개발 시 사용되는 Dart 개발 환경 지원
</aside>
1. 좌측에 extension 아이콘(동그라미)을 선택해 주세요.
2. `flutter` 라고 검색한 뒤, 해당 익스텐션을 선택하고 `install` 버튼을 눌러 설치해주세요.
3. 위 `flutter` 익스텐션을 설치하면서 `dart` 익스텐션도 일반적으로 함께 설치가 됩니다.
`dart` 라고 검색하신 뒤 혹시 설치가 안되었다면 해당 익스텐션도 같이 설치해주세요.
`uninstall`이라고 뜨신다면 이미 설치가 된 것이니 넘어가시면 됩니다.
**[IDE 설치하기]** ** IDE : 소프트웨어 애플리케이션*
- 3. Android Studio
- 1) Android Studio 설치
1. [링크](https://developer.android.com/studio)에 접속한 뒤, `Download Android Studio`를 클릭해주세요.
2. 팝업 창이 뜨면, 쭉 읽어보시고, 바닥까지 스크롤을 내려주세요.
3. 약관에 동의하도록 체크하신 뒤, 다운로드 버튼을 눌러주세요.
4. 다운로드 폴더에 다운로드를 진행해주세요.
5. 다운로드가 완료되면, `android-studio`를 클릭해서 실행해주세요.
6. 아래 이미지들을 모두 `Next` 버튼을 눌러 설치를 진행해 주세요.
7. `Install` 버튼을 눌러 주세요.
8. `Next` 버튼을 눌러주세요.
9. 설치가 완료되었고, `Finish` 버튼을 눌러 Android Studio를 실행해 주세요.
10. 아래와 같은 창이 뜨면 `OK`를 눌러주세요.
11. Android Studio 사용성 개선을 위해 Google에 데이터를 공유하고 싶으시다면, `Send usage statistics to Google` 버튼을 누르시고, 그렇지 않으시면 `Don't send` 버튼을 눌러주세요.
12. Setup Wizard가 실행되면, `Next` 버튼을 눌러주세요.
13. `Next` 버튼을 눌러주세요.
14. 원하시는 테마를 선택하신 뒤 `Next`를 눌러주세요.
15. 만약 계정 이름이 한글이거나 띄어쓰기가 들어가 있다면`Your Android SDK location contains non-ASCII characters` 혹은 `your path contains white space etc.` 라도 뜨며 진행이 안됩니다.
<aside>
💡 에러가 없으신 분들은 `Next` 버튼을 누르고 26 순서로 넘어가 주세요
</aside>
Android SDK Location 경로를 직접 만들어주도록 하겠습니다.
16. 이런 경우, 아래 그림과 같이 Android SDK Location에 `C:\Users\내 계정이름\Local`까지만 선택해 복사해 주세요.
17. `탐색기`를 열고 주소창에 붙여 넣은 뒤 엔터를 눌러주세요.
18. 현재 Local이라는 폴더에 들어와 있고, 여기에 `Android`라는 폴더를 만들어 주세요. (대문자로 시작합니다)
19. 생성한 `Android` 폴더에 들어간 뒤 `Sdk` 라는 폴더를 만들어주세요. (대문자로 시작합니다)
20. 생성한 `Sdk` 폴더 안으로 들어가 주세요.
21. 윈도우 검색창에 `명령`이라고 검색한 뒤 `명령 프롬프트`를 우클릭하여 `관리자 권한으로 실행`해 주세요. 그냥 실행하면 안됩니다!
실행할지 물어보는 팝업이 뜨면 예를 눌러서 실행해주세요.
22. 아래 명령어를 복사한 뒤 명령 프롬프트에 붙여 넣어주세요. 아직 실행하시면 안됩니다.
```bash
mklink /D C:\android-sdk
```
다음 탐색기에서 주소창을 클릭해 주세요.
주소를 복사해 주세요.
복사한 경로를 명령 프롬프트 `android-sdk` 뒤에 붙여 넣어주세요. 참고로 아래 그림과 같이 사이에 띄어쓰기가 있어야합니다.
명령어를 실행해 아래와 같이 기호화된 링크를 만들었다고 뜨면 성공입니다.
<aside>
💡 Android/Sdk 폴더에 바로가기를 C 드라이브 바로 밑에 생성하는 과정입니다.
</aside>
23. 다시 Android Studio Setup Wizard로 돌아와서, 아래 그림과 같이 Android SDK Location 밑에 폴더 아이콘을 선택해 주세요.
그러면 아래와 같이 경로를 선택하는 창이 뜹니다.
24. 아래 코드를 복사해서 아래 그림과 같이 경로 선택창의 주소에 붙여 넣고 `OK`를 눌러주세요.
```bash
C:\android-sdk
```
25. 이제 경로 관련 빨간 에러가 사라지고 활성화된 `Next` 버튼을 눌러주세요.
26. `Next` 를 눌러서 세팅을 진행해 주세요.
27. **License Agreement** 화면이 나옵니다. 왼쪽 밑줄 친 부분을 클릭해 모두 `Accept` 를 눌러주세요
28. `Accept` 를 모두 누르고 나면 `Finish` 버튼이 활성화됩니다. 눌러주세요.
29. 설치가 진행됩니다. 시간이 다소 소요되니 천천히 기다려주세요!
30. 중간에 `이 앱이 디바이스를 변경할 수 있도록 허락하시겠어요?` 라는 팝업이 뜨면 `예를 선택`해주세요.
31. 모든 세팅이 완료되면 `Finish`를 클릭해 주세요.
- 2) Android Command-line Tools 설치
<aside>
💡 `Android Command-line Tools`는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.
</aside>
1. 아래와 같이 Android Studio가 실행되면, `More Actions`를 클릭한 뒤 `SDK Manager`를 클릭해주세요.
2. `SDK Tools`를 선택해 주세요.
3. `Android SDK Command-line Tools (latest)`를 선택한 뒤 `OK`를 선택해 주세요.
4. Dialog가 뜨면 `OK` 버튼을 눌러주세요.
5. 설치가 완료되면 `Finish` 버튼을 눌러주세요.
- 3) Android Virtual Devices 설치
<aside>
💡 앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.
</aside>
1. `More Actions` → `Virtual Device Manager` (또는 `AVD Manager`)를 선택해주세요.
2. 이미 Device 가 있는 분들은 아래 절차를 진행하지 않으셔도 됩니다.
3. (Device 가 없는 경우) `Create Virtual Device`를 선택해주세요.
4. 기본적으로 선택되어 있는, `Phone` → `Pixel 2` 디바이스를 `Next` 버튼을 눌러 생성합니다.
5. Release Name `Q`의 `Download`를 클릭하여 가상 기기에 설치할 OS를 다운로드 합니다.
<aside>
💡 R 버전은 Virtual Device에서 문제가 있다고 해요. 그래서 **Q 버전**으로 진행할게요!
</aside>
6. 설치가 완료되면 `Finish` 버튼을 눌러 주세요.
7. `Q` 버전의 OS를 선택한 뒤 `Next` 버튼을 눌러 주세요.
**API Level 29**인지 확인해주세요 :)
8. `Finish` 버튼을 눌러 Virtual Device 설치를 완료 해주세요.
9. 성공적으로 추가된 Virtual Device를 확인하시고, 이제 Android Studio는 종료해주세요!
- 4) Android Licenses
1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.
2. `flutter doctor`라고 입력한 뒤 엔터를 누릅니다.
아래와 같이 `Android toolchain`의 좌측에 `[!]` 표시가 되어있습니다.
3. 문제를 해결하기 위해 `flutter doctor --android-licenses`를 복사해서 실행해 줍니다.
4. 실행하면 라이센스에 대한 동의를 여러번 구하는데, `y`를 입력하고 엔터를 눌러 진행해줍니다.
5. `All SDK package licenses accepted` 라는 메시지가 뜨면 완료된 것입니다.
6. `flutter doctor` 를 입력했을 때 아래와 같이 `Android toolchain`의 좌측에 체크(`[v]`) 되었다면 완료!
<aside>
💡 Visual Studio 는 windows 용 앱을 개발할 때 필요한 툴입니다. 지금은 Android, iOS 앱 개발만 진행하므로 신경쓰지 않으셔도 됩니다.
</aside>
- 4. Xcode → 애플 정책상 맥환경에서만 사용 가능합니다 😞
<aside>
💡 Xcode는 iOS 앱 개발시 필요한 툴로 macOS에서만 설치가 가능하므로 넘어가도록 하겠습니다.
</aside>
<aside>
💡 [잠깐!] 그러면 window에서는 iOS 앱 개발을 할 수 없는 건가요?
애플의 정책상 iOS 앱은 macOS에서만 개발이 가능합니다. 😂
하지만 Flutter로 작성한 코드는 Android 뿐만 아니라 iOS에서도 이용할 수 있으니 향후 macOS가 생기신다면 기존 소스코드를 그대로 사용하여 iOS 앱도 출시할 수 있습니다!
</aside>
**설치를 완료하셨나요~? 잘 설치되었는지 확인해봅시다! ㅎㅎ**
- 최종 설치 확인
1. `cmd`를 검색해서 `명령 프롬프트`를 실행해줍니다.
2. `flutter doctor` 를 입력했을 때 아래와 같이 모든 항목이 체크(`[v]`) 되었다면 설치 완료!
<aside>
💡 고생하셨습니다! 원래 개발 환경을 설정하는데 시간이 많이 들어갑니다 😂
그럼 1주 차 수업 때 뵙도록 하겠습니다 🙂
</aside>- MacOS ver 프로그램 설치 방법
**[프레임워크 설치하기]**
- **1. Flutter** - Android와 iOS 앱을 하나의 코드로 구현할 수 있도록 도와주는 프레임워크
<aside>
💡 Flutter 설치 과정은 일반적인 프로그램 설치와는 조금 다릅니다. 일반적으로는 `.pkg` 파일등을 실행하거나, `Applications` 폴더에 드래그 & 드롭해 설치를 진행하는데요.
Flutter 설치는 아래와 같은 과정으로 진행됩니다.
1. zip 파일을 다운로드 받아서 적절한 경로에 압축 해제
2. 압축 해제한 flutter 폴더 경로를 환경변수에 등록
(flutter 라는 명령어가 이 경로에 있다는 것을 macOS에게 알리는 것과 같습니다)
</aside>
<aside>
💡 시작하기에 앞서 **Apple Sillicon (M1, M2 등)** 을 사용하시는 분들은 **터미널**을 열고 아래 명령어를 입력해주세요 (인텔용 소프트웨어를 실행시킬 수 있는 **Rosetta** 라는 번역기를 설치하는 명령어입니다.)
```bash
sudo softwareupdate --install-rosetta --agree-to-license
```
### 터미널이란?
터미널은 마우스 클릭이 아닌 키보드로 컴퓨터에게 명령을 내리는 프로그램 입니다.
### 터미널 실행 방법
1. macOS 우측 상단에 `돋보기 🔍` 아이콘을 선택해 주세요. 그러면 아래와 같이 `Spotlight 검색` 창이 뜹니다.
2. `Spotlight`에 `terminal`이라고 검색한 뒤, 아래와 같이 하단에 `터미널` 프로그램이 보이면 엔터를 눌러주세요.
3. 터미널 프로그램이 실행됩니다.
</aside>
- 1) 다운로드
1. 먼저 flutter 를 설치할 폴더를 만들겠습니다. Downloads 폴더를 먼저 열어줍니다
2. 여기서 `Cmd + ↑(화살표 위 버튼)` 을 눌러주세요. 상위 폴더로 이동하는 단축키입니다. 아래와 같이 유저명과 같은 이름의 폴더로 이동하면 됩니다.
3. 이제 여기에 development 라는 이름의 폴더를 생성하겠습니다. 우측 상단의 `Actions` (점 3개 아이콘) 를 클릭하고 `New Folder` 를 선택해주세요.
`**development**` 라는 이름으로 생성해줍니다.
4. 이제 생성한 폴더에 flutter 압축 파일을 다운로드하겠습니다.
Chrome 브라우저에서 [링크](https://docs.flutter.dev/get-started/install/macos)를 열어주세요.
5. 밑으로 조금 스크롤한 뒤, 파란색 버튼을 클릭해 다운로드를 진행해 주세요.
Intel 칩을 사용하는 맥북은 왼쪽을 Apple 칩을 사용하는 맥북은 오른쪽을 선택해 주세요.
<aside>
💡 **내 mac 이 어떤 프로세서를 사용하는지 알고 싶다면**
좌측 상단 `Apple 로고` 클릭 → `이 Mac에 관하여`를 클릭하여 프로세서가 Intel 칩인지 Apple 칩인지 확인할 수 있습니다.
- Intel chip
- Apple chip
</aside>
우선 `다운로드` 폴더에 저장하고, 다운로드가 끝나면 파일을 옮기겠습니다. 저장 버튼을 눌러주세요
6. 바탕화면에서 휴지통 우측에 있는 `다운로드` 폴더를 선택한 뒤 방금 다운로드한 flutter zip 파일을 우리가 만들어준 `development` 폴더로 드래그 앤 드롭합니다.
아래와 같이 zip 파일이 해당 폴더로 이동했는지 확인합니다.
7. 다운받은 flutter 압축 파일을 실행해 주세요.
8. 아래 사진과 같이 압축이 해제되고 `flutter`라는 폴더가 생성 됩니다.
<aside>
💡 만약 압축이 해제된 폴더 이름이 아래 사진과 다른 경우 `flutter`로 변경해 주시기 바랍니다.
</aside>
9. `flutter` → `bin` 폴더에 들어가볼까요?
`dart`, `dart.bat`, `flutter`, `flutter.bat` 등의 파일이 있는 것을 볼 수 있습니다. 이들이 flutter 실행 파일입니다.
<aside>
💡 우리는 이 flutter 실행 파일을 **컴퓨터 어디에서도 모두 접근 가능하게끔**, 즉 어디에서도 `flutter` 라는 명령어를 사용할 수 있게끔 해야 합니다.
환경 변수에 flutter 가 위치한 **폴더 경로를 추가**하면, 시스템의 모든 경로에서 이 flutter 파일에 접근하고, 실행할 수 있습니다.
</aside>
- 2) 환경변수 설정 및 설치
1. 바탕화면에서 `사과 아이콘` → `이 Mac에 관하여`를 클릭하여 macOS 버전을 확인해 주세요.
2. macOS 버전을 확인한 뒤, 해당하는 명령어를 복사해 주세요.
<aside>
💡 mac OS 버전 순서
**macOS Mojave** 이하 버전을 사용하는 경우 **설정하는 파일이 다릅**니다.
</aside>
- macOS 카타리나(Catalina) `**이상**`버전 명령어 (최신 버전은 여기에요!)
```bash
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc && source ~/.zshrc
```
- macOS 모하비(Mojave) **`이하`** 버전 명령어
```bash
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bash_profile && source ~/.bash_profile
```
<aside>
💡 어떤 명령어인지 궁금하신 분들은 아래 설명을 참고해 주세요.
1. `~/development/flutter/bin` 폴더에 있는 flutter 파일을 어디서든 실행할 수 있도록 등록(환경변수에 등록)
(~ 는 유저명과 같은 이름의 Home 폴더를 의미합니다)
> macOS 모하비 버전에서는 `.bash_profile`이라는 파일에 등록하고 이후 버전에선 `.zshrc` 파일에 등록하기 때문에 명령어가 다릅니다.
>
```bash
echo 'export PATH="$PATH:$HOME/Developments/flutter/bin"' >> ~/.zshrc
```
2. 설정 반영
```bash
source ~/.zsh
```
</aside>
3. 터미널에 단축키 `Cmd + v` 또는 마우스 우클릭하여 `붙여넣기`를 눌러주세요.
아래와 같이 붙여넣으면 아래와 같이 나오고, 엔터(enter)를 눌러 실행해 주세요.
4. 다음 명령어는 flutter의 버전을 확인하는 명령어입니다. 아래 명령어를 복사해 주세요.
```bash
flutter --version
```
터미널에 붙여넣고 실행해 주세요.
- [잠깐] 혹시 다음 팝업이 뜨면 `설치` 버튼을 눌러주세요.
1. 사용권 계약 팝업이 뜨면 `동의` 버튼을 눌러주세요.
2. 아래와 같이 설치가 완료되면 `완료` 버튼을 눌러주세요.
- 3) 설치 확인
1. 터미널 창에 Flutter 버전을 확인하는 아래 명령어를 붙여넣고 실행해 주세요.
```bash
flutter --version
```
실행하면 `Building flutter tool...` 이라고 출력되고 잠시 후 아래와 같이 Flutter 버전이 출력되면 Flutter 설치 완료!
<aside>
💡 위 이미지에선 Flutter 3.3.2 버전이 출력되는데 시간이 지나면 최신 버전으로 업데이트 되어 버전이 다를 수 있습니다. 전혀 문제 없으니 그대로 진행해주세요.
</aside>
2. 다음 명령어를 복사해 터미널에 붙여넣고 실행해 주세요.
<aside>
💡 Flutter 개발하는데 필요한 항목들의 상태를 확인하는 명령어 입니다.
</aside>
```bash
flutter doctor
```
<aside>
💡 Android 앱을 만드는데 필요
- Android Studio
- Android SDK
iOS 앱을 만드는데 필요
- Xcode
- CocoaPods
</aside>
위 프로그램들을 하나씩 설치해 보도록 하겠습니다.
**[에디터 설치하기]**
- 2. Visual Studio Code
<aside>
💡 Visual Studio Code (줄여서 VSCode) 는 앞으로 실제 코드를 작성할 편집 툴입니다.
Flutter 개발은 Android Studio와 VSCode 둘 중 원하는 툴을 사용하여 진행할 수 있습니다. VSCode가 더 가볍기 때문에 앞으로 수업은 VSCode를 활용해 진행하도록 하겠습니다.
</aside>
- 1) VSCode 설치
1. [링크](https://code.visualstudio.com/download)에 접속해 주세요.
2. 애플 아이콘 하단에 있는 Mac 버튼을 클릭해 주세요.
3. `다운로드` 폴더에 저장해 주세요.
4. 바탕화면에 다운로드 폴더를 클릭한 뒤 `Finder에서 열기` 버튼을 클릭해 주세요.
5. 다운받은 `VSCode-darwin-universal.zip` 파일을 실행해 압축을 풀어주세요.
6. 압축이 풀리고 생성된 `Visual Studio Code` 파일을 드래그해서 왼쪽 `응용 프로그램`에 떨어뜨려 주세요.
7. 화면 우측 상단 `돋보기 🔍` 아이콘을 클릭한 뒤 `visual` 이라고 검색해 주세요. 그리고 하단에 `Visual Studio Code`가 보이면 엔터를 눌러 실행해 주세요.
8. 아래와 같은 팝업이 뜨면 `열기` 버튼을 눌러주세요.
9. 그러면 아래와 같이 VSCode가 실행되면 설치 완료!
<aside>
💡 우측 하단에 한국어로 변경하라는 팝업이 뜹니다.
하지만 VSCode 사용법이나 대부분의 개발 자료는 영어로 되어 있기 때문에, 가급적 적용하지 않기를 권장 드립니다. (수업 자료도 영어 버전으로 되어있어요!)
해당 알람을 다시 보지 않으려면 `우측 톱니바퀴 ⚙` 아이콘을 누른 뒤 `Don't Show Again`을 선택해 주세요. (만약 사라져서 버튼을 누르지 못했다면 다음번에 눌러주세요!)
</aside>
- 2) Extension 설치
<aside>
💡 VSCode는 Flutter 뿐만 아니라 다양한 개발을 모두 할 수 있는 통합 에디터입니다. VSCode에서 Flutter 앱 개발을 하려면 VSCode에 Extension 탭에서 아래 목록의 Extension 들을 설치해야 합니다.
**Flutter** : VSCode에서 Flutter 개발 환경 지원
**Dart** : Flutter 개발 시 사용되는 Dart 개발 환경 지원
</aside>
1. 좌측에 extension 아이콘(동그라미)을 선택해 주세요.
2. `flutter` 라고 검색한 뒤, 해당 익스텐션을 선택하고 `install` 버튼을 눌러 설치해주세요.
3. 위 `flutter` 익스텐션을 설치하면서 `dart` 익스텐션도 일반적으로 함께 설치가 됩니다.
`dart` 라고 검색하신 뒤 혹시 설치가 안되었다면 해당 익스텐션도 같이 설치해주세요. `uninstall`이라고 뜨신다면 이미 설치가 된 것이니 넘어가시면 됩니다.
**[IDE 설치하기]** ** IDE : 소프트웨어 애플리케이션*
<aside>
💡 **MacOS 에서는 안드로이드 환경, iOS 환경 모두에서 코드를 돌려볼 수 있습니다!**
아래의 상황에 따라 원하는 원하시는 애뮬레이터를 골라 설치해보세요! ㅎㅎ
**애뮬레이터 : 컴퓨터에서 가상으로 스마트폰 OS를 돌리는 프로그램*
1. **안드로이드와 ios 모두 확인하고 싶은 경우**
→ Android Studio 와 Xcode 모두 설치합니다.
2. **안드로이드만 확인하고 싶은 경우**
→ Android Studio만 설치합니다.
3. **ios만 확인하고 싶은 경우**
→ Xcode만 설치합니다.
**[잠깐!] Xcode 는 용량을 크게 차지하니 주의해주세요! :)**
- 용량이 부족하다면 Android Studio 만 설치하셔도 괜찮습니다.
이러면 iOS Simulator 는 사용할 수 없지만, 개발에는 큰 지장이 없습니다! ㅎㅎ
</aside>
- 3. Android Studio
- 1) Android Studio 설치
1. [링크](https://developer.android.com/studio)에 접속한 뒤, `Download Android Studio` 버튼을 눌러주세요.
2. 약관이 뜨면 아래로 쭉 스크롤 해주세요.
3. Intel 칩을 사용하는 맥북은 왼쪽 `Mac with Intel chip`을 Apple 칩을 사용하는 맥북은 오른쪽 `Mac with Apple chip`을 선택해 주세요.
<aside>
💡 좌측 상단 `Apple 로고` 클릭 → `이 Mac에 관하여`를 클릭하여 Intel 칩인지 Apple 칩인지 확인할 수 있습니다.
- Intel chip
- Apple chip
</aside>
4. 다운로드 팝업이 뜨면 `저장` 버튼을 눌러주세요.
5. 바탕화면 하단에 휴지통 좌측에 있는 `다운로드` 폴더를 클릭한 뒤 `Finder`에서 열기 버튼을 클릭해 주세요.
6. 다운로드가 완료된 `android-studio~~.dmg` 파일을 실행해 주세요.
7. 아래와 같은 창이 뜨면 왼쪽에 `Android Studio`를 드래그해서 `Applications`에 떨어뜨려주세요.
8. 설치가 완료되면 좌측 상단에 빨간 X를 눌러서 아래 화면을 종료해 주세요.
<aside>
💡 바탕화면에 아래 사진과 같은 파일이 생겼다면 휴지통으로 드래그해 삭제하셔도 됩니다.
</aside>
9. 우측 상단에 `돋보기🔍` 아이콘을 클릭하고, 팝업창이 뜨면 `android`라고 입력해 주세요. 그리고 아래와 같이 `Android Studio`가 자동완성으로 뜨면 엔터를 눌러 실행해 주세요.
10. 아래와 같이 팝업이 뜨면 `열기` 버튼을 눌러주세요.
11. 아래와 같은 창이 뜬다면 `OK` 버튼을 눌러주세요.
12. `Import Android Studio Settings` 팝업이 뜨면 `Do not import settings`를 선택하신 뒤 `OK` 버튼을 눌러주세요.
13. 안드로이드 스튜디오 사용 데이터를 구글에 전달하여 사용성 개선에 참여하고 싶다면 `Send usage statistics to Google`을 선택해주시고, 그렇지 않은 경우 `Don't send`를 선택해 주세요.
14. 다음과 같은 안드로이드 스튜디오 설정 화면이 나오면 `Next` 버튼을 눌러주세요.
15. `Finish` 버튼을 눌러 Android SDK 설치를 진행해 주세요.
16. **License Agreement** 화면이 나온다면 왼쪽 밑줄 친 부분을 클릭해 모두 `Accept` 를 눌러주세요
17. `Accept` 를 모두 누르고 나면 `Finish` 버튼이 활성화됩니다. 눌러주세요.
18. 설치가 완료되면 `Finish` 버튼을 눌러주세요.
19. 아래와 같은 화면이 뜨면 Android Studio 설치 완료!
- 2) Android Command-line Tools 설치
<aside>
💡 `Android Command-line Tools`는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.
</aside>
1. Android Studio에서 `More Actions`를 선택한 뒤 `SDK Manager`를 선택해 주세요.
2. 그러면 아래와 같이 `Preferences for New Projects` 팝업이 뜨면 `SDK Tools` 탭을 선택 → `Android SDK Command-line Tools (latest)` 선택 → `Apply` 를 선택해 주세요.
3. 팝업이 뜨면 `OK` 버튼을 클릭해 주세요.
4. 설치가 완료되면 `Finish` 버튼을 눌러주세요.
- 3) Android Virtual Devices 설치
<aside>
💡 앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.
</aside>
1. `More Actions` → `Virtual Device Manager` (또는 `AVD Manager`)를 선택해 주세요.
2. 이미 Device 가 있는 분들은 아래 절차를 진행하지 않으셔도 됩니다.
3. (Device 가 없는 경우) `Create Virtual Device...`를 선택해 주세요.
4. 하드웨어를 선택하는 화면이 나오면 `Next`를 눌러서 기본으로 설정된 `Pixel 2` 휴대폰을 설치하도록 하겠습니다.
5. 휴대폰에 설치할 Android OS를 선택하는 화면입니다. `Q` 옆에 있는 `Download` 버튼을 클릭하여 OS를 다운로드해 주세요.
<aside>
💡 R 버전은 Virtual Device에서 문제가 있다고 해요. 그래서 **Q 버전**으로 진행할게요!
</aside>
6. 설치가 완료되면 `Finish` 버튼을 눌러주세요.
7. `Q` 옆에 `Download` 버튼이 사라졌습니다. 우측에 현재 선택된 OS 버전이 29인지 확인한 뒤 `Next` 버튼을 눌러주세요.
8. `Finish` 버튼을 눌러 Virtual Device 설치를 완료해 주세요.
9. 아래와 같이 `Pixel 2 API 29` 라는 Virtual Device가 추가되었습니다.
이제 좌측 상단에 빨간 버튼을 눌러 창을 종료해 주세요.
10. 하단에 Android Studio 아이콘을 우클릭한 뒤 `종료` 버튼을 눌러를 Android Studio를 종료해 주세요.
<aside>
💡 Android Studio를 클릭한 상태에서 단축키(`Cmd + Q`)를 누르셔도 됩니다.
</aside>
- 4) Android Licenses
1. 터미널에서 `flutter doctor`라고 입력한 뒤 엔터를 누릅니다.
아래와 같이 `Android toolchain`의 좌측에 `[!]` 표시가 되어있습니다.
2. 문제를 해결하기 위해 `flutter doctor --android-licenses`를 복사해서 터미널에 붙여 넣고 실행해 주세요. 실행시 라이센스에 대한 동의를 여러번 구하는데, `y`를 입력하고 엔터를 눌러 진행해 주세요.
3. 모든 동의가 완료되면 `All SDK package licenses accepted` 라고 뜹니다.
4. 마지막으로 터미널에 `flutter doctor` 를 입력했을 때 아래와 같이 `Android toolchain`, `Android Studio` 가 체크 완료되면 완료!
- 4. Xcode
<aside>
💡 iOS 앱을 개발하는데 필요한 Xcode를 설치해 보도록 하겠습니다.
</aside>
1. [링크](https://apps.apple.com/us/app/xcode/id497799835)를 클릭해 열어주세요.
2. 아래와 같은 팝업이 띄면 `App Store 열기` 버튼을 눌러주세요.
3. `App Store`가 실행되고 `Xcode`가 아래와 같이 뜨면 `받기` 버튼을 눌러주세요.
4. `설치` 버튼으로 변하면 한 번 더 눌러주세요.
5. 만약 App Store에 Apple ID로 로그인이 되어있지 않아 아래와 같이 창이 뜨는 경우, 로그인을 진행해 주세요.
<aside>
💡 계정이 없다면 `Apple ID 생성`을 눌러 가입을 진행해주신 뒤, 로그인을 진행해 주세요.
</aside>
6. 로그인을 완료하면 설치가 진행 됩니다.
<aside>
💡 Xcode 설치 시간은 인터넷 상황에 따라 다르지만 보통 1시간 30분 ~ 2시간 정도 소요 됩니다. 😂
</aside>
7. 설치가 완료되면 `열기` 버튼을 눌러주세요!
8. 라이센스 동의 팝업이 뜨면 `Agree`를 선택해 주세요.
9. 아래와 같이 암호를 입력하는 창이 뜨면 컴퓨터 시작 비밀번호를 입력한 뒤 `확인` 버튼을 눌러주세요.
10. 만약 Xcode가 실행이 안되면, 다시 `열기` 버튼을 눌러주세요.
12. 아래와 같은 창이 뜨면 Xcode 설치완료!
1. 설치를 완료했으니`AppStore`와 `Xcode`를 종료해 주세요.
- 하단에 App Store를 우클릭하여 `종료`를 선택해 주세요.
- 하단에 Xcode를 우클릭하여 `종료`를 선택해 주세요.
2. 이제 Homebrew 를 설치하도록 하겠습니다.
<aside>
💡 Homebrew 는 맥에서 소프트웨어를 설치 삭제할 수 있는 패키지 관리자입니다.
아래에서 brew install 명령어를 쓰기 위해 미리 설치해줍니다.
</aside>
아래 명령어를 복사해 터미널에 붙여넣고 엔터를 눌러주세요.
```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
3. 다음으로 CocoaPods을 설치해 보도록 하겠습니다.
<aside>
💡 CocoaPods은 다른 사람이 만든 코드를 가져올 때 필요한 프로그램으로 Xcode와 함께 iOS 앱 개발시 필요합니다.
</aside>
아래 명령어를 복사해 터미널에서 붙여넣고 엔터를 눌러주세요.
```bash
brew install cocoapods
sudo gem install cocoapods
```
4. 아래와 같이 비밀번호를 입력하는 창이 나오면, 컴퓨터 시작시 입력하는 비밀번호를 입력한 뒤 엔터를 눌러주세요.
<aside>
💡 참고로 키보드를 눌러도 화면에 입력되는 모습은 보이지 않으니, 입력한 뒤 엔터를 누르면 됩니다.
비밀번호를 틀린 경우, `Ctrl + C`를 누르면 명령이 종료되고, 다시 명령어를 붙여넣고 실행해주세요.
</aside>
5. 명령이 정상적으로 실행되면 아래와 같이 뜹니다.
6. 아래 명령어를 복사해 터미널에서 실행해 주세요.
```bash
flutter doctor
```
그러면 아래와 같이 `Xcode` 설치가 완료된 것을 보실 수 있습니다.
**설치를 완료하셨나요~? 잘 설치되었는지 확인해봅시다! ㅎㅎ**
- 최종 설치 확인
터미널에서 `flutter doctor`라고 검색한 뒤 아래와 같이 화면이 나온다면 모든 설치가 완료하신 것입니다.
<aside>
💡 다운로드 폴더에 있는 파일들은 모두 삭제하셔도 됩니다.
</aside>
<aside>
💡 고생하셨습니다! 원래 개발 환경을 설정하는데 시간이 많이 들어갑니다 😂
그럼 1주 차 수업 때 뵙도록 하겠습니다 🙂
</aside>03. Flutter 이해하기
1) 레고 같이 조립할 수 있는 위젯(Widget)
](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/71e2396b-c6ac-4ccc-acb9-3338ffe4a7d9/Untitled.png)
출처 : pixabay
2) Android Material & iOS Cupertino
코드스니펫을 복사해서 새 탭에서 열면 Flutter에서 위젯을 소개하는 공식 문서가 보입니다.
-
https://docs.flutter.dev/development/ui/widgets
-
<aside>
💡 **머터리얼 위젯(Material Widget)**은 **Android**에서 사용되는 기본 화면 구성 요소를 Flutter에서 재현한 위젯입니다.
**쿠퍼티노 위젯(Cupertino Widget)**은 **iOS**에서 사용되는 화면 구성 요소를 Flutter에서 재현한 위젯입니다.
Flutter는 특정 플랫폼에 종속되지 않은 고유의 디자인을 입힌 **커스텀 위젯(Custom Widget)**도 쉽게 만들 수 있습니다.
</aside>
<aside>
💡 **Material**, **Cupertino** 그리고 **Custom 위젯** 중 어떤 방법을 사용하든 **사용성만 해치지 않는다면** 앱을 출시하실 수 있습니다.
</aside>
<aside>
💡 Flutter에서 위젯이 어떻게 사용되는지 로그인 페이지를 만들며 배워봅시다.
</aside>05. 프로젝트 준비
1) Flutter 프로젝트 생성하기
바탕화면에
flutter폴더를 만들어주세요.(이 때, 플러터 프로젝트 경로에 한글이 오지 않도록 주의해주세요!)
Visual Studio Code(VSCode)를 실행해 주세요.
View→Command Palette버튼을 클릭해주세요.
명령어를 검색하는 팝업창이 뜨면,
flutter라고 입력한 뒤Flutter: New Project를 선택해주세요.
Application을 선택해주세요.
프로젝트를 시작할 폴더를 선택하는 과정입니다. 미리 생성해 둔
flutter폴더를 선택한 뒤Select a folder to create the project in버튼을 눌러 주세요.
프로젝트 이름을
hello_flutter로 입력해주세요.
macOS의 경우 아래와 같은 팝업이 뜨면
확인버튼을 눌러주세요.
중간에 아래와 같은 팝업이 뜬다면, 체크박스를 선택한 뒤 파란 버튼을 클릭해주세요.
다음과 같이 프로젝트가 생성됩니다.
왼쪽 폴더 구조를 살짝 보고 가도록 하겠습니다.
lib: 주로 코딩하는 폴더pubspec.yaml: 라이브러리 및 설정을 하는 폴더
android: Android 프로젝트 폴더ios: iOS 프로젝트 폴더web: Web 프로젝트 폴더아래
main.dart코드스니펫을 복사해서 기존 코드를 모두 지운 뒤,main.dart파일에 붙여 넣고 저장해주세요.[코드스니펫] main.dart
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar(), ), ); } }
다음으로 학습 단계에서 불필요한 내용을 화면에 표시하지 않도록 설정해 주겠습니다.
analysis_options.yaml파일을 열고, 아래 코드스니펫을 복사해서 24번째 라인 뒤(rules 뒤)에 붙여 넣고 저장해 주세요. (들여쓰기를 꼭 맞춰주세요)[코드스니펫] analysis_options.yaml
prefer_const_constructors: false prefer_const_literals_to_create_immutables: false
<aside>
💡 상세 내용은 아래를 참고해 주세요.
- 어떤 의미인지 궁금하신 분들을 위해
`main.dart` 파일을 열어보시면 파란 실선이 있습니다.
파란 줄은, 개선할 여지가 있는 부분을 VSCode가 알려주는 표시입니다.
12번째 라인에 마우스를 올리면 아래와 같이 설명이 보입니다.
위젯이 변경될 일이 없기 때문에 `const`라는 키워드를 앞에 붙여 상수(변하지 않는 수)로 선언하라는 힌트입니다. 화면을 새로고침 할 때(화면 내 값이 변할 때마다 화면은 새로고침 됩니다) 상수로 선언된 위젯들은 새로고침을 할 필요가 없어서 성능상 이점이 있습니다.
아래와 같이 `Icon`앞에 `const` 키워드를 붙여주시면 됩니다.
지금은 학습 단계이니 눈에 띄지 않도록 `analysis_options.yaml` 파일에 아래와 같이 설정하여 힌트를 숨기도록 하겠습니다.
```dart
prefer_const_constructors: false
prefer_const_literals_to_create_immutables: false
```
</aside>2) VSCode Dart 세팅
View→Command Palette를 선택해 주세요.아래와 같이
dart recommend라고 검색한 뒤Dart: Use Recommended Settings를 선택해 주세요. 그러면 저장 시 자동 줄 정렬 기능과 같이 편의 기능 설정이 적용됩니다.
3) Emulator 실행하기
View→Command Palatte를 선택해주세요.
launch를 입력한 뒤Flutter: Launch Emulator를 선택해 주세요.
android에뮬레이터를 선택해주세요.
macOS의 경우,
Start iOS Simulator를 선택하실 수도 있습니다.
macOS의 경우 아래와 같은 팝업이 뜬다면
확인버튼을 눌러주세요.
잠시 기다리시면, 에뮬레이터가 실행 됩니다. 아래와 같이 완전히 부팅이 끝날 때 까지 기다려주세요!
4) 실행하기
VSCode 우측 상단에
ⅴ버튼을 누르고Run Without Debugging버튼을 클릭해주세요.
첫 번째 실행은 시간이 다소 소요되니 잠시만 기다려주세요!
드디어 첫 번째 앱 화면을 띄웠습니다! 축하드립니다👏👏
다시 켜는 방법이 궁금하다면?
VS Code 의 좌측 아래 설정 버튼을 누르고,
Settings를 눌러주세요
검색창에
widget inspect라고 검색하시고,Dart: Open Dev Tools옵션을 never 에서 flutter 로 변경해주세요.
그러면 앱을 실행할 때 아래와 같이 오른쪽에
Widget Inspector탭이 열립니다.
05. 로그인 페이지 만들기
최종 완성 이미지
1) Scaffold & Text
lib폴더 밑에 있는main.dart파일에서 코딩을 해보도록 하겠습니다.
14번째 줄을 보면
home이라고 되어있습니다. 이곳에 첫 화면에 보여줄 위젯을 넣어주는데, 여기에Scaffold라는 위젯이 사용되고 있습니다.](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4dde6d3f-175e-483e-95e0-80337ed4436b/Untitled.png)
출처 - https://pixabay.com/photos/construction-work-framework-670278/
15번째 줄에 Scaffold의 appBar 영역에
AppBar()위젯이 들어가 에뮬레이터에 상단 영역을 차지하고 있습니다.
Scaffold에
body영역에 Text 위젯을 추가해보겠습니다. 16번째 줄에body: Text("Hello Flutter"),라고 입력한 뒤 저장(Ctrl/Cmd + S)하면 에뮬레이터에Hello Flutter가 나타납니다.
16번째 줄에 텍스트 크기를 키워보도록 하겠습니다.
먼저 16번째 줄
“Hello Flutter"뒤에콤마(,)를 추가한 뒤 저장(Ctrl/Cmd + S)해 주세요.
그리고 17번째 줄 맨 뒤에서 아래 자동완성 단축키를 눌러주세요.
그러면
Text위젯이 가진 속성 목록이 나옵니다. 이 중에서style을 이용하면 뭔가 꾸밀 수 있을 것 같다는 느낌이 옵니다.style을 선택해 주세요.
그러면 위와 같이
style속성이 추가되는데 여기에 무엇을 넣어야하는지 궁금하실 겁니다.이런 경우, style 속성에 마우스를 올리면 여기에 넣는 값의 타입을 볼 수 있습니다. 아래 이미지를 보면
style의 경우TextStyle을 받는다고 적혀있습니다.
TextStyle을 조금만 타이핑해 보면 자동완성으로 아래와 같이TextStyle을 추천해 줍니다. 아래 이미지에서 첫 번째 항목을 선택하면TextStyle까지만 완성해주고, 네 번째 항목을 선택하면TextStyle()까지 완성해 주므로 네 번째 항목을 선택해 줍니다.
그리고 저장해주면 아래와 같이 18번째 줄에
style: TextStyle(),이 추가 됩니다.
TextStyle에 어떤 값을 넣을 수 있는지 자동완성 기능으로 보도록 하겠습니다. 18번째 줄TextStyle의 소괄호 사이에서 자동완성 단축키(Ctrl + Space / Option + Esc)를 눌러주세요.
위와 같이 추천된 속성 중에
fontSize를 이용하면 텍스트 크기를 변경할 수 있을 것 같습니다.fontSize를 선택해 주세요.
fontSize에는 숫자를 넣으시면 됩니다(double은 실수를 의미하는 자료형입니다). 28을 입력한 뒤 저장해보면 에뮬레이터에서 폰트 크기가 커진 것을 볼 수 있습니다.
2) Column & TextField
Text 위젯 밑에 ID를 입력받는 입력창을 추가해 보도록 하겠습니다. 세로 방향으로 위젯들을 나열하려면
Column위젯을 사용해야합니다.16번째 줄에
Text위젯을 클릭한 뒤, 왼쪽에 있는 전구(💡) 아이콘을 클릭해 주세요.
그러면 아래와 같이
Text위젯을 손쉽게 다른 위젯을 감싸거나 추출할 수 있도록 도와주는리펙터(Refactor)기능이 나타납니다.
Wrap with Column을 선택하여Text위젯을Column위젯으로 감싸주겠습니다.
그러면
Text위젯이Column위젯의 children 속성으로 들어간 것을 볼 수 있습니다.
21번째 줄 맨 뒤에,
TextField(),를 추가해주세요.
그리고 저장(
Ctrl/Cmd + S)해주면 아래와 같이 에뮬레이터에 텍스트 입력란이 생성됩니다.
iOS 에뮬레이터에서 가상 키보드 보이도록 설정하는 법
실제 모바일 환경에서는 가상 키보드가 화면에 나타나는 부분을 고려하여 화면을 만들어야 합니다. 이럴 때 아래와 같은 방법을 이용해주세요.
iOS 에뮬레이터에서 처음에 텍스트 입력이 안되는 경우, 에뮬레이터를 선택한 뒤 상단에
I/O→Keyboard→Connect Hardware Keyboard를 선택해 주세요.
그리고
Hello Flutter텍스트 밑에 파란 줄을 클릭하고 키보드를 입력하면 입력이 잘 됩니다.
키보드를 보이게 하고 싶은 경우, 상단에
I/O→Keyboard→Connect Hardware Keyboard를 다시 선택하여 체크를 해제하면 키보드를 눌러도 입력되지 않고, 에뮬레이터에 나타난 가상 키보드를 입력할 수 있습니다. 키보드를 내리려면완료버튼을 눌러주세요.
mac OS 의 경우
Cmd + K를 눌러 가상 키보드를 올리고 내릴 수 있습니다
TextField에 이메일을 입력하도록 이름표를 달아 봅시다. 아래 이미지와 같이TextField에decoration속성에InputDecoration()을 넣고,labelText: "이메일",를 추가해주세요.
(쉼표를 잘 찍어서 코드가 정렬되도록 합니다)
에뮬레이터 상에 “이메일”이라는 label이 생성 되었습니다.
22 ~ 26번째 줄에
TextField를 그대로 복사해서 비밀번호 입력란을 만들어 주세요.
값을 입력해보면 비밀번호가 그대로 보입니다. 입력된 비밀번호를 보이지 않도록 만들어봅시다.
28번째 줄에
obscureText: true,라는 속성을 주면 비밀번호가 안보이게 됩니다.TextField위젯이 이미 속성들을 가지고 있기 때문에 우리는 해당 속성에 적절한 값만 넣어주면 됩니다!
3) Button
로그인 버튼을 만들어 봅시다.
33번째 줄(Column 내부)에
elev라고 입력하면 자동완성으로ElevatedButton()이 추천되고, 해당 항목을 선택해 주세요.
아래와 같이 완성이 되고, 버튼에 필수로 입력해야하는 속성 두 가지가 뜹니다.
33번째 줄 앞쪽
onPressed에 마우스를 올려보면, 필수로 전달하라는 의미인required가 보이고 전달해야하는 타입은 함수를 의미하는void Function()이라고 적혀 있습니다.
아직 문법을 배우지 않았으므로, 아래와 같이
onPressed에() {}를 입력하고, child에Text("로그인"),이라고 입력해주세요.
그리고 저장(
Ctrl/Cmd + S)를 누르면 아래와 같이 정렬됩니다.
에뮬레이터 상에 버튼이 추가된 것을 확인할 수 있습니다.
4) AppBar
15번째 줄에
AppBar()위젯에 18 ~ 21번째 줄의 Text를 넣어보도록 하겠습니다.
15번째 줄
AppBar()의 소괄호 사이title:이라고 입력해 주세요.
18 ~ 21번째 줄의 Text 위젯을 15번째 줄에
title:뒤로 이동해 주세요.
그리고 저장(
Ctrl/Cmd + S)을 눌러주시면 앱바에 title 영역으로Hello Flutter가 이동됩니다.
AppBar에centerTitle: true,라고 넣어 두 플랫폼에서 모두 중앙 정렬이 되도록 만들어줍시다.
이제 Android에서도 중앙 정렬이 됩니다.
5) Padding
에뮬레이터 상에서 보면
TextField가 기기 외곽에 너무 붙어 있는 것 같아 여백을 추가해 보도록 하겠습니다.
Scaffold의body속성에 위젯들은 아래와 같이 배치되어 있습니다.
Column위젯을Padding이라는 위젯으로 감싸면 여백을 추가할 수 있습니다.
22번째 줄에
Column위젯을 클릭한 뒤, 왼쪽 전구(💡) 아이콘을 선택해 주세요. 그리고Wrap with Padding을 선택해 주세요.
Column위젯을Padding위젯으로 감싸졌고, 어느정도 여백을 줄지 설정하는 23번 째 줄에padding속성이 추가되었습니다.
23번 째 줄에 8.0을 16으로 변경한 뒤 저장해보면 에뮬레이터에 내부에 여백이 추가된 것을 볼 수 있습니다.
6) Container
로그인 버튼을 화면 가로로 가득 채우도록 키워보겠습니다.
ElevatedButton 자체에는
width속성이 없고, 부모 위젯에 크기를 이용해 조절 할 수 있습니다.37번째 줄에 ElevatedButton을 클릭한 뒤 왼쪽 전구(💡) 아이콘을 클릭하고
Wrap with Container를 선택해 주세요.
그러면 아래와 같이 Container 위젯이 ElevatedButton 위젯을 감싸게 됩니다.
다음 Container 위젯에
width: double.infinity,라고 추가해주세요. 그러면 Container의 폭이 부모를 가득 채우게 되고, 버튼도 함께 최대 크기로 늘어납니다.
비밀번호를 입력하는 TextField와 로그인 버튼 사이에 여백을 추가해 보도록 하겠습니다.
아래 이미지와 같이 Container에
margin: EdgeInsets.only(top: 24),라고 추가해 주세요.
7) Image & SingleChildScrollView
이메일 입력란 상단에 이미지를 넣어보겠습니다.
26번째 줄에 아래와 같이
Image.network위젯을 추가해주세요.Image.network("https://i.ibb.co/nngK6j3/startup.png"),
이미지에 크기를 지정하지 않았으므로, 원본 사진의 크기로 들어가게 되고, 이 상태에서 이메일 입력란을 클릭하여 가상 키보드를 올려보면 아래와 같이 하단 화면이 짤린다고 에뮬레이터에 표시됩니다.
키보드가 올라와 화면이 가려지는 경우, 스크롤을 할 수 있도록 만들어봅시다. 22번째 줄에
Padding위젯을 클릭한 뒤 왼쪽에 전구(💡) 아이콘을 선택해 주세요.Wrap with widget...을 선택해Padding위젯을 다른 위젯으로 감싸주겠습니다.
아래와 같이
Padding위젯이widget이라는 익명의 위젯으로 감싸집니다.
22번째 줄에
widget을SingleChildScrollView로 변경한 뒤 저장해 주세요.
이제 에뮬레이터에서 화면을 이메일을 클릭해도 화면이 넘치지 않고, 스크롤을 할 수 있습니다.
이미지를 적절한 크기로 조절해보도록 하겠습니다.
width: 81,을Image.network위젯에 추가해 주세요.
이미지를
Padding으로 감싸 다른 위젯과 간격을 추가해 보겠습니다. 27번째 줄의Image를 선택한 뒤 오른쪽 전구(💡) 아이콘을 누르고Wrap with Padding을 선택해 주세요.
아래와 같이
Padding위젯으로Image.network위젯이 감싸집니다.
28번째 줄에
EdgeInsets에8.0을32로 변경한 뒤 저장해주면 완성!
최종 완성 코드
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( centerTitle: true, title: Text( "Hello Flutter", style: TextStyle(fontSize: 28), ), ), body: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(16), child: Column( children: [ Padding( padding: const EdgeInsets.all(32), child: Image.network( "https://i.ibb.co/nngK6j3/startup.png", width: 81, ), ), TextField( decoration: InputDecoration( labelText: '이메일', ), ), TextField( obscureText: true, decoration: InputDecoration( labelText: '비밀번호', ), ), Container( width: double.infinity, margin: EdgeInsets.only(top: 24), child: ElevatedButton( onPressed: () {}, child: Text("로그인"), ), ), ], ), ), ), ), ); } }
06. Flutter 공부 방법
Flutter 위젯(Widget) 살펴보기
에러 메시지 잘 읽고 구글링 잘하기
커뮤니티 가입하기
- 질문하기 전에 스스로 Google에 검색해서 해결하려고 노력해보기!
(검색 키워드 자체를 모른다면 빠르게 물어보기) - 문제 발생시 에러 로그도 함께 올리기!
Flutter는 에러 발생시 Debug Console에 에러 메세지를 보여줍니다. 먼저 에러 메세지를 먼저 구글에 검색해보고, 해결이 잘 안된다면 에러 로그와 함께 질문해주세요.
(에러 메세지가 없으면 다른 개발자들이 도와주기가 힘들어요!)
프로그래밍 언어 다트(Dart) 배우기
07. Dart 문법
DartPad
코드스니펫을 복사한 뒤 주소창에 붙여 넣으면, DartPad로 접속합니다.
-
https://dartpad.dev/
-
```dart
void main() {
for (int i = 0; i < 5; i++) {
print('hello ${i + 1}');
}
}
```
- 실행 순서
<aside>
💡 `main`은 Dart에서 처음 시작 시 호출하는 약속된 ****함수입니다.
앞의 void 자리는 함수가 반환하는 값의 자료형을 표시하는 것입니다. 비워둬도 괜찮습니다.
</aside>
```dart
void main() {}
main2 () {}
String main3 () {
return "Hello";
}
```
- `//` : 주석으로 컴퓨터가 읽지 않습니다. 주로 개발하면서 메모할 때 사용합니다.
- `print()` : print의 소괄호 안쪽에 값을 넣으면 오른쪽 `Console`에 값이 출력 됩니다. 정상적으로 잘 작동하는지 확인(디버깅) 할 때 사용합니다.
- `;` : Dart에서는 마지막에 세미콜론(semicolon)을 찍어줍니다.
- 에러 로그 읽는 법
<aside>
💡 아래 이미지를 보면 3번 째 줄에 마지막 세미콜론이 빠졌습니다. 이 상태로 `Run`을 하게되면 우측에 에러 메세지가 나옵니다.
3:27 (3번째 줄 27번째 칸)에 에러가 발생했군요!
**에러 메세지를 보면 문제가 발생하는 위치와 해결 방법을 알 수 있습니다!** 앞으로 에러가 발생한다면 에러 메세지 부터 확인해 주세요 🙂
</aside>
<aside>
💡 DartPad에서 `Reset` 버튼을 누르면, 변경한 내용이 초기화 됩니다.
</aside>1) 변수
변수 만들기
1) 자료형 (= 바구니에 담을 수 있는 값의 종류)
var: 처음 담긴 값으로 타입이 지정됩니다.String: 문자만 담을 수 있습니다.String?: 문자 또는 비어있는(null) 상태일 수 있습니다.const: 처음에 변수를 선언하며 담은 값을 변경할 수 없습니다.final: 선언하고 나중에 값을 담을 수 있으나, 한 번 담으면 변경할 수 없습니다.void main() { var a = 1; String b = "hello world"; String? c = null; const d = 1; final e; e = 2; print(a); }2) 변수명 (= 바구니 이름)
2) 조건문
if (bool1) { // bool1이 **true**면 실행 } else { // bool1이 **false**면 실행 }if (bool1) { // bool1이 **true**면 실행 } else if (bool2) { // bool1이 **false**이고, bool2가 **true**이면 실행 } else if (bool3) { // bool1과 bool2가 **false**이고, bool3가 **true**이면 실행 } else { // bool1, bool2, bool3가 모두 **false**이면 실행 }3) 반복문
반복문 구성
1 :
int i = 0→i라는 변수가 0으로 시작합니다. (한 번만 실행됩니다)2 :
i < 5→i의 값이 5보다 작은지 조건을 확인합니다. (false → 반복문 종료 / true → 3번)3 :
중괄호 안쪽 영역→ 반복해 실행하는 코드들이 들어있습니다.4 :
i++→i값을 1만큼 증가 시키고 2번으로 흐름이 다시 넘어갑니다.
4) 함수(function)
함수의 호출 & 실행 순서
아래 코드 스니펫을 복사해서 DartPad에서 실행해보세요!
[코드스니펫] Dart 함수
void main() { print("1. 시작"); say(); print("4. 종료!"); } void say() { print("2. 안녕"); print("3. Hello"); }함수의 생김새
say라고 적혀있는 부분이 함수의 이름입니다.- 중괄호(
{ }) 안쪽 영역이 함수가 가진 실행 코드들 입니다.
함수 호출 방법
함수의 표현 방법
5) 클래스(Class)
클래스 생김새
class 클래스이름 { }
클래스의 구성 요소
class Bread { // 생성자 함수 (클래스명과 똑같음. 클래스의 객체가 생성될 때 호출되는 함수) Bread(String core) { content = core; // 전달 받은 core를 content에 넣어줍니다. } // Bread 클래스가 가진 content 속성 (클래스 내의 변수) String? content; // Bread 클래스가 가진 getDescription 메소드 (클래스 내의 함수) String getDescription() { return "맛있는 $content빵입니다."; // 맛있는 팥빵입니다. } }
인스턴스(Instance)
상속(extends)
Dart의 모든 것은 Class
08. 숙제 - Movie Reviews 만들기
- 최종 완성 모습
[Simulator Screen Recording - iPhone 13 - 2022-08-29 at 06.19.22.mp4](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a674a8d1-f48c-4b42-86fd-58d07abbf343/Simulator_Screen_Recording_-_iPhone_13_-_2022-08-29_at_06.19.22.mp4)
## 사용한 위젯
Scaffold
AppBar
Text
IconButton
Column
Padding
TextField
Icon
Divider
Expanded
ListView.builder
Card
Stack
Image.network
Container
Text1) 실습 준비
1) Flutter 프로젝트 생성하기
View→Command Palette버튼을 클릭해주세요.명령어를 검색하는 팝업창이 뜨면,
flutter라고 입력한 뒤Flutter: New Project를 선택해주세요.Application을 선택해주세요.프로젝트를 시작할 폴더를 선택하는 과정입니다. 미리 생성해 둔
flutter폴더를 선택한 뒤Select a folder to create the project in버튼을 눌러 주세요.프로젝트 이름을
movie_reviews로 입력해주세요.
프로젝트가 생성되면 아래
main.dart코드스니펫을 복사해서 기존 코드를 모두 지운 뒤,main.dart파일에 붙여 넣고 저장해주세요.[코드스니펫] main.dart
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), // 홈페이지 보여주기 ); } } class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // 음식 사진 데이터 List<Map<String, dynamic>> dataList = [ { "category": "탑건: 매버릭", "imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg", }, { "category": "마녀2", "imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg", }, { "category": "범죄도시2", "imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg", }, { "category": "헤어질 결심", "imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg", }, { "category": "브로커", "imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg", }, { "category": "문폴", "imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg", }, ]; // 화면에 보이는 영역 return Scaffold(); } }
다음으로 학습 단계에서 불필요한 내용을 화면에 표시하지 않도록 설정해 주겠습니다.
analysis_options.yaml파일을 열고, 아래 코드스니펫을 복사해서 24번째 라인 뒤에 붙여 넣고 저장해 주세요.[코드스니펫] analysis_options.yaml
prefer_const_constructors: false prefer_const_literals_to_create_immutables: false
2) 에뮬레이터 실행하기
VSCode 우측 하단에
Chrome (web-javascript)를 클릭해주세요.
Start Pixel 2 API 29 mobile emulator를 선택해주세요.
잠시 기다리면 에뮬레이터가 실행됩니다.
VSCode 우측 상단에 아래 화살표를 눌러
Run Without Debugging을 눌러주세요.
에뮬레이터에 아래와 같이 흰 화면이 나오면 정상적으로 실행이 완료된 것입니다!
2) AppBar 만들기
## 사용한 위젯
Scaffold
AppBar
IconButton
Text
Icon- 3) Body 만들기
## 사용한 위젯
Column
Padding
TextField
Icon
Divider
Expanded
ListView.builder
Card
Stack
Image.network
Container
Text숙제 답안 (
main.dart)import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), // 홈페이지 보여주기 ); } } class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // 영화 제목, 사진 데이터 List<Map<String, dynamic>> dataList = [ { "category": "탑건: 매버릭", "imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg", }, { "category": "마녀2", "imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg", }, { "category": "범죄도시2", "imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg", }, { "category": "헤어질 결심", "imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg", }, { "category": "브로커", "imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg", }, { "category": "문폴", "imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg", }, ]; // 화면에 보이는 영역 return Scaffold( appBar: AppBar( elevation: 0, backgroundColor: Colors.white, centerTitle: false, iconTheme: IconThemeData(color: Colors.black), title: Text( "Movie Reviews", style: TextStyle( color: Colors.black, fontSize: 28, fontWeight: FontWeight.bold, ), ), actions: [ IconButton( onPressed: () {}, icon: Icon(Icons.person_outline), ) ], ), body: Column( children: [ Padding( padding: const EdgeInsets.all(8.0), child: TextField( decoration: InputDecoration( hintText: "영화 제목을 검색해주세요.", border: OutlineInputBorder( borderSide: BorderSide(color: Colors.black), ), suffixIcon: IconButton( icon: Icon(Icons.search), onPressed: () {}, ), ), ), ), Divider(height: 1), Expanded( child: ListView.builder( itemCount: dataList.length, itemBuilder: (context, index) { String category = dataList[index]['category']; String imgUrl = dataList[index]['imgUrl']; return Card( child: Stack( alignment: Alignment.center, children: [ Image.network( imgUrl, width: double.infinity, height: 200, fit: BoxFit.cover, ), Container( width: double.infinity, height: 200, color: Colors.black.withOpacity(0.5), ), Text( category, style: TextStyle( color: Colors.white, fontSize: 36, ), ), ], ), ); }, ), ), ], ), ); } }
전체 목록 바로가기
다음 강의 바로가기
Copyright ⓒ TeamSparta All rights reserved.