Flutter를 개발하기 위해서는 뭐든지 마찬가지지만 초기에 해당 프로그램을 깔고 환경 변수 설정을 하고 등등의 일을 해야 한다.
개발을 하면서 손이 안가는 이유는 프로그래밍이 어렵다기 보다는 이러한 셋팅과 했더라도 추후 업데이트시 또 변경해줘야 하는 부분이 발생하고 메뉴얼대로 했는데 환경적 요인으로 안되는 경우등이 정말 귀찮고 좌절을 맛보게 한다.
나는 개발툴은 visual code를 사용할 예정이다. 안드로이드는 그 특유의 무거움과 느림을 많이 겪었기 때문에 손이 잘 안가게 된다.
전체 항목을 알아보자.
- Flutter 환경 설정
- visual studio code 설정
- 기본 문법 및 구조 익힘
- 개발 할 앱 Layout 설계 및 간략 기획서 수립
- 개발
- QNA
- 완료
- 안드로이드 마켓에 배포를 위한 이미지등 작업 및 배포
- 끝.
개선이 많이 되었다곤 하나 이미 선입견이 생기기도 했고 클릭시 비교적 빨리 열리는 visual studio code가 편하다.
물론 나중에 알겠지만 flutter로 개발하기 위해서는 android studio가 있어야 한다.
하나씩 해보자.중간 중간에 뒤로 돌아와서 스튜디오를 다시 열어서 설정을 해야 하는 경우도 있으나 한번에 이러한 사항을 다 적으면 헷갈리기 때문에 기본적으로 필요한 부분을 설치를 하고 문제가 발생하는 부분은 아래에서 해결을 하도록 하자.
1.Flutter sdk 설치
찾아가는 메뉴는 첫 Flutter 홈페이지의 doc부분을 눌러보면 Install Flutter를 찾을 수 있다. 홈페이지는 가끔 바뀌기도 하니 메뉴가 달라질 수 있다.
https://docs.flutter.dev/get-started/install
windows 아이콘을 눌러서 받는다. 현재 기준으로 flutter_windows_2.8.1-stable.zip이다.
다운받은 곳을 보면 SDK releases라는 링크가 있다. 최신 버전이 아니라 이전 버전을 받아야 할 경우는 여기를 눌러 목록에서 찾으면 된다.
https://docs.flutter.dev/development/tools/sdk/releases
받은 뒤에는 압축을 푼다. 그리고 이제 쭉 써야 하기 때문에 있는 위치가 중요하다. 나는 보통 개발툴 같은 경우는 피씨 초기화 시마다 셋팅을 하기 귀찮아서 d드라이브로 옮겨놓는다.
나중에 경로가 기억이 안나면 콘솔에 where flutter dart로 입력 해보면 경로가 나온다.
2.안드로이드 스튜디오 설치
똑같은 과정이다 안드로이드 개발을 위한 스튜디오를 다운 받아서설치
https://developer.android.com/studio/install?hl=ko
설치를 하고 난뒤에 실행을 해준다. 바로가기가 만일 없다면 설치 폴더 /bin/studio64.exe 경로를 찾아주면 된다.
실행 후 Plugins 를 눌러서 Marketplace에서 flutter로 검색 후 설치를 한다.
3.환경 변수 등록
시작 -> 입력창에 환경 변수로 검색을 하면 시스템 환경변수 편집 메뉴가 보인다. 눌러보자. 그럴리 없겠지만 뜨지 않는다면 바탕화면 내컴퓨터 오른클릭 -> 속성을 하면 나오는 시스템 창의 고급 시스템 설정을 눌리자.
이는 윈도우마다 틀리기 때문에 그냥 검색으로 찾는게 속 편하다.
환경 변수 편집창에 flutter설치된 폴더/bin 폴더의 경로를 넣어주자.
필요하면 flutter doctor를 쳐서 문제가 없는지 확인하자. 지금은 단순 설치 과정이므로 사이드 이펙트는 배제하도록 한다.
4.크롬 브라우저 설치
P.S
doctor를 치면 나오는 내용 중
1.Android toolchain 중 Android license status unknown이라고 메세지가 뜬다.
X Android license status unknown.
Run 'flutter doctor --android-licenses' to accept the SDK licenses.라는 문구가 볼 수 있다.
뜨면 안드로이드 스튜디오 -> SDK Manager -> SDK Tools 탭에서 Android SDK Command-line Tools를 체크 후 설치 해 준다.
여러 항목이 있을 수 있는데 마지막 Android SDK Command-line Tools(latest)를 체크하면 된다.
대략 100메가 남짓 되며 받고 설치 마무리 된다.
완료 후 콘솔창에 flutter doctor --android-licenses 입력
y/N를 입력하는 몇가지 질의가 있는데 대충 y를 눌러 넘긴다.
다하면 다시 flutter doctor나 flutter doctor -v를 쳐보자.
이제 경고가 뜨지 않는다.
나는 개발툴을 visual studio code를 이용 할것이기 때문에 플러그인으로 도움이 되는 몇가지
flutter를 검색 후 Awesome Flutter Snippets
등을 설치 해주자
참고로 프로젝트 생성은 flutter create projectname 하면 된다. 그리고 code . 을 치면 툴이 열린다.
물론 code .은 경로가 잡혔을 때 열리는 것이고 아니면 툴을 실행 후 플젝 폴더를 선택해서 열면 된다.
기본적인 부분은 다 되었다.
다음은 실제 기본적인걸 하나 코딩 해보고 에뮬레이터나 브라우저 연동등을 알아보자.