이미지 출처 : 모두의연구소
flutter를 사용해야 할 일이 생길 수 있을 것 같아서 설치 방법 정리하기!
참고로 나는 Window 환경에서 설치를 진행한다.
Mac은 또 다른 방법으로 설치해야 하는 것 같으니 이건 다른 글을 확인하시오
확인 해 보니 Flutter를 사용하기 위해서 기본적으로 설치되어야 하는 부분은
- flutter
- Android Studio
- Visual Studio
- Chrome
이 정도인것 같다.
( Dart? 이것도 추후에 설치해야할듯 )
👨🏻💻 Flutter 설치하기
일단 flutter 설치 경로로 먼저 이동 해 준다
나는 window에서 세팅을 할거라서 Window install로!!!
빨간색으로 표시한 버튼을 눌러주면 설치가 시작된다.
이제 다운받은 zip 파일을 열고 압축을 풀어주면 되는데,
압축한 폴더는 본인이 원하는 경로에 넣어주면 된다.
다만, 나중에 경로를 적어야 할 일이 있으니 경로 기억해두기!
나는 C드라이브 안에 바로 넣어줌
👨🏻💻 Android Studio 설치하기
다음으로 android studio를 설치 해 줘야 한다
ANDROID STUDIO 설치 경로로 접속해서 다운로드 받아주기!!
다음과 같은 화면이 나오면 다운로드 버튼 클릭
setup 파일이 설치되면 클릭 후 실행
Android Virtual Device를 제외하고 설치 해 줬는데
이것도 설치해도 관계 없는 것 같당
이 외에 다른 설정은 건드린 것 없이 다 next를 눌러줬읍니다
finish 버튼을 눌러주면 안드로이드 스튜디오가 자동으로 실행된다
그냥 다 next 눌러주고,
다음과 같은 화면이 나오면 하나씩 클릭해서 Accept 해줬다
참고로 작은 팝업창은 Do not import Setting 그대로 두고
Help improve Android Studio는 Don't Send로 체크해줌
안드로이드 스튜디오 설치 과정을 더 자세히 참고하고 싶다면 아래 링크를 확인하는게 더 나을듯
[Android Studio] 안드로이드 스튜디오 설치 방법
출처: https://codingmomong.tistory.com/637 [주니어 개발자 모몽'-':티스토리]
다운받아지는중.. 컴포넌트가 설치되고있다
완료되면 Finish 눌러주기
이제 다음과 같은 기본 화면이 나온다
이제부터 몇가지 세팅이 필요함!
일단 기본 화면 왼편에 있는 Plugins를 눌러준뒤 flutter 라는 키워드로 검색 해 주면
다음과 같이 Flutter를 다운받을 수 있는 화면이 나온다!
설치해주기!
설치하고 Android Studio를 재시작해줬다
고럼 이렇게 로고가 붙은 아이콘으로 바뀜 ㅎㅎ
다음으로 하단에 있는 More Actions를 클릭 해 준다
그럼SDK Manager 라고 보일텐데, 그거 클릭해주면 된다
(화면 캡쳐가 막혀있어서 ㅜㅜ)
그럼 다음과 같은 화면이 나오는데,
SDK Tools를 눌러준 뒤, Command-line Tools를 체크한뒤에 Apply를 눌러준다
설치 완료되면 Finish
👨🏻💻 환경변수 추가하기
이제 환경 변수를 추가 해줘야 하는데,
Window 기준 검색창에 환경 변수검색 -> 시스템 환경 변수 편집을 클릭 해 주면 된다
그럼 다음과 같은 창이 나오는데, 여기서 환경 변수 클릭
그럼 다음과 같은 화면이 나온다.
여기서 변수가 Path인 값을 클릭 한 뒤에 편집 버튼을 눌러준다
새로 만들기 버튼을 누르면 경로를 추가 할 수 있는데
여기에 아까 Flutter 압축 파일을 푼 경로를 넣어주면 된다.
참고로, Flutter 내부에 있는 bin 폴더의 경로를 넣어줘야하니 참고
그리고 확인 버튼을 눌러주면 환경 변수 추가는 끝!
👨🏻💻 Flutter doctor로 정상설치 여부 확인하기
Flutter Doctor는 플러터 설치 및 설정이 정상적으로 되었는지 환경을 검사해주는 도구 라고 한다.
이걸로 설치가 정상적으로 이루어졌는지 확인이 필요함!
검사를 위해서 다음과 같은 단계를 거쳐주면 된다.
일단 윈도우 검색창에 cmd 입력 후 터미널 창을 열어준다.
여기에
flutter doctor
라고 입력 한 뒤 엔터를 쳐 준다.
난 처음에 이런 문구가 나왔는데,
Ctrl+C로 닫아준다음 다시 명령창에 flutter doctor를 입력 해 주니까 정상적으로 나왔다.
짠.
초록색으로 체크된거는 정상적으로 완료된거고,
빨간색이나 느낌표로 표시된 부분은 확인이 필요하다!!!
Visual Studio는 밑에서 설치 방법을 알려줄테니 설치하면 되고,
Some Android licenses not accepted ~이하 부분은 다음 단계대로 진행 해 주면 된다.
일단 명령창에
flutter doctor --android-licenses
라고 입력 해 준다.
그리고 동의여부를 체크하기위해 y 또는 N을 입력하라고 나올텐데,
다 y로 입력하고 엔터 쳐 주면 동의가 완료된다.
👨🏻💻 Visual Studio 설치하기
flutter doctor로 확인인했을때,
visual studio - develop windows apps ~
다음과 같은 문구가 나왔을때만 설치 해 주면 된다.
Visual Studio 설치 경로에 접속해서 설치하면됨!
여기서 무료 다운로드를 눌러준다
다운로드 된 파일을 클릭하고 설치 진행..
다음과 같은 화면이 나오면 C++를 사용한 데스크톱 개발을 체크 해 주고 설치해준다.
고럼 설치 완룡
시간이 좀 걸린다
한번 더 cmd 창에 명령어를 날리면 이제 정상적으로 설치 된걸 확인 할 수 있다.
사실 경고나 오류가 있는 경우 어떻게 처리하면 되는지 다 알려주기 때문에 따로 어려운건 없다
👨🏻💻 Flutter 실행시키기
다시 Android Studio로 돌아와서 New Flutter Project를 눌러준다.
다음과 같은 화면이 나오면 왼쪽에 있는 Flutter 클릭 후
SDK path에 Flutter 파일 압축 푼 경로를 넣어준다!
그 다음 Next 클릭
프로젝트 이름과 경로를 정해준다
나머지는 잘 모르겠어서 일단 그대로 두고 Create 클릭..
고럼 파일이 생긴다~
유튜브에서 본거랑 경로가 좀 다르긴하다 ㅜㅜ
(유튜브는 lib 폴더에 main.dart가 있었음..)
-> 왼쪽 상단에 Android로 되어있는 부분을 Project로 변경 해 주면 파일명 제대로 보임 ㅎㅎ.
일단 저 main.dart 파일을 이용해서 화면을 제어 하는 것 같다~~~
자세한건 실무에서 파일을 어떻게 사용하는지 확인이 좀 더 필요할듯..
일단 오늘은 환경세팅까지만!!!
앞으로 아침에 일찍와서 조금씩 플러터 공부를 해봐야겠다 ㅎㅎ
👀 참고자료
