ARCHIVES

태그

신고하기

상단 메뉴 페이지

기본 콘텐츠로 건너뛰기

Flutter. 1강. 처음 설치 해서 화면을 띄워보자.


안녕하세요 치우 입니다.

혼자 프로젝트를 진행하는 경우 아무래도 기획이나 디자인 압박은 없으나 
작은 규모의 프로젝트는 유지보수 측면에서 단일소스로 하는것이 유리하다.

1. 플루터: https://flutter-ko.dev/, 구글이 만들었다, 한글 페이지다.
2. 다트(프로그래밍 언어) : https://dart.dev/, 이것도 구글이 만들었다.
3. 다트패드: https://dartpad.dev/, 다트 언어를 연습할 수 있다.

----- 사전준비

    플루터를 하는 이유가 iOS, Android 를 같이 하려고 하는것이라서,
    거의 필수적으로 맥북으로 하는 것이 좋다.
    이제 "flutter_macos_1.22.0-stable.zip" 파일을 다운 받았으면
    적당한 곳에 압축을 푼다.
    위치: /Users/jhchoo/flutter


3. 안드로이드 스튜디오 설치: https://developer.android.com/studio

4. 이제 무엇으로 플루터를 개발 할 것인가? : 현재 고민중. VsCode 가 끌린다.
    아래는 대표 주자.
    - Android Studio: 구글에서 만든 IDE, 무료. Android 때문에 접근성이 가장 좋다.
    - IntelliJ IDEA: JetBrains가 만든 전문 개발자용 Java IDE, 모바일 개발 한정해서 무료.
    - Visual Studio Code: MS의 개발 툴, 최초로 크로스 플랫폼 에디터. 무료 가볍다.

5. 일단 샘플 테스트 이므로 Android Studio 로 진행한다.

----- 
Andoird Studio, Xcode 설치가 끝났으면 본격적으로 시작 해보자.

1. 안드로이드 스튜디오 실행 화면에서 Configure -> Plugins 시작


2. Flutter 에드온을 추가 합니다.
    재시작 하면 메인 메뉴에 "Start a new Flutter project " 메뉴가 생겼습니다.

3."Start a new Flutter project" 메뉴를 클릭하면
새로운 프로젝트를 만들 수 있다.
이때, 첫번째 앱 만들기를 해보자.

4. "Flutter SDK path" 란에 아까 압축을 풀었던 경로를 적어준다.
나머지 앱 이름, 프로젝트 저장소, 설명은 적당히 넣어 준다.

5. 이제 프로젝트가 만들어 졌다.
플랫폼 언어는 Kotlin 과 Swift 추천 이다.

6. 개발 준비 화면

이 단계를 플루터 공식 사이트 에서는 한줄에 하고 있다.
콘솔로도 해보니 똑같이 만들어진다.
$ flutter create my_app

플루터 공식 사이트에서는 Path 설정과 doctor 실행이 잘 나와 있다.


2021.04 M1 설정 추가...
현재의 쉘 타입을 확인해본다.
$ echo $SHELL

zsh가 기본 쉘로 나온다.

/bin/zsh 


$ vi .zshrc

여기에 환경 설정을 만든다.
export FLUTTER_HOME=/Users/jhchoo/flutter/binexport PATH=${PATH}:$FLUTTER_HOME


10번으로 이동



8. 영구적으로 사용하기 위해 우리는 맥북 Path 설정을 한다.
터미널을 켜자마자 아래의 명령어를 쳐보면
.bash_profile 파일이 확인 가능 합니다. 없으면 만들면 됩니다.
$ ls -al


9. vi 편집기를 엽니다.
Path를 추가 하고 :wq 저장 합니다.
$ vi .bash_profile
export FLUTTER_HOME=/Users/jhchoo/flutter/binexport PATH=${PATH}:$FLUTTER_HOME


생성한 프로파일을 적용 합니다.
$ source .bash_profile


10. 터미널 재시작 후, 버전을 확인 해봅시다.
$ flutter --version

11. 이제 doctor를 실행해서 개발 IDE와 flutter 를 연결 합니다.
아래 스샷은 연결 했을 경우 [v] 되어 나옵니다.
필자는 VS Code 까지 연결 했습니다.
$ flutter doctor

12. 처음하는경우 "Android toolchain" 이 [-] 되어 있을테니
라이센스를 획득 합니다.
$ flutter doctor --android-licenses

라이선스 설치 도중에 물어보는거 전부 'y' 해주면 완료.
doctor 를 실행하여 상태 확인.
$ flutter doctor

13. 이제 안드로이드 스튜디오를 사용해서 빌드를 해보자.
안드로이드 시뮬레이터는 용량도 많고 느리기도 하니;
가급적 아이폰 시뮬레이터나 실제 폰을 사용 하도록 하자.
(실제 폰에 넣을경우 패키지명 변경이 필요하다.)

14. 완료.



댓글