반응형


윈도우 10에서 Flutter 프로그래밍을 위한 개발환경을 만들고 안드로이드 폰에 앱을 설치해서 실행시켜 보았습니다. 



참고

https://flutter-ko.dev/docs/get-started/install/windows 




안녕하세요. 웹나우테스입니다. 


미루던 Flutter에 대한 공부를 시작했습니다. 

하나의 코드로 모바일(Android / ios), 웹, 데스크톱 용 프로그램을 한번에 만들 수 있나 봅니다. 

사실 Android와 ios를 위한 앱을 한번에 만들 수 있다해서 공부해보려고 했던 것입니다. 



다음 링크에 있는 문서를 기반으로 살을 붙여서 포스트를 작성할 예정입니다. 

https://flutter-ko.dev/docs  



이번 시간에는  안드로이드 스튜디오와 비주얼 스튜디오 코드에 Flutter 개발 환경을 구축해보고 

안드로이드 폰에 Flutter 앱을 설치하여 실행시켜 봅니다. 



1. 아래 링크에 접속하여 64-bit Git for Windows Setup를 클릭하여 git를 다운로드합니다. 

https://git-scm.com/download/win 



옵션을 변경하지 않고 git를 설치합니다. 




2. 아래 링크에서 Flutter SDK를 다운로드합니다.

https://flutter-ko.dev/docs/get-started/install/windows 


압축을 풀어서 C:\flutter에 복사합니다. 



윈도우키 + R을 누르고 sysdm.cpl를 입력하여 시스템 속성을 실행합니다. 

고급 탭을 선택하고 환경변수 버튼을 클릭합니다. 

시스템 변수 항목에 있는 path에 다음 경로를 추가합니다.

C:\flutter\bin




3. 아래 링크에서 Android Studio를 다운로드 받아 설치합니다.

https://developer.android.com/studio 


이 부분에 대한 자세한 설명이 필요하면 아래 포스트를 참고하세요.


Windows에서 Android 개발 환경 준비하기(Android Studio 설치)

https://webnautes.tistory.com/1126



참고로 Flutter는 Android 플랫폼에 종속적인 부분이 있기 때문에 안드로이드 스튜디오를 설치해야 합니다.




4. 다음 명령으로 flutter를 사용할 준비가 되었는지 체크합니다.


3가지 문제점이 보입니다. 

  • 일부 라이센스에 동의하지 않았다는 메시지가 보입니다. 

  • 안드로이드 스튜디오와 비주얼 스튜디오 코드에서 Flutter를 사용할 준비가 필요하다는 메시지가 보입니다.

  • 안드로이드폰이 연결되어 있지 않다는 메시지가 보입니다. 


C:\Users\webnautes>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.720], locale

    ko-KR)


[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)

    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[!] Android Studio (version 3.5)

    X Flutter plugin not installed; this adds Flutter specific functionality.

    X Dart plugin not installed; this adds Dart specific functionality.

[!] VS Code, 64-bit edition (version 1.43.0)

    X Flutter extension not installed; install from

      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[!] Connected device

    ! No devices available


! Doctor found issues in 4 categories.




5. 첫번째 문제를 해결하기 위해 다음 명령을 실행합니다. 

flutter doctor --android-licenses



다음처럼 보이면 y를 입력하고 엔터를 누릅니다. 

C:\Users\webnautes>flutter doctor --android-licenses

Warning: File C:\Users\webnautes\.android\repositories.cfg could not be loaded.

5 of 7 SDK package licenses not accepted. 100% Computing updates...

Review licenses that have not been accepted (y/N)? y



라이센스를 보여준 후, 다음 줄이 보입니다. y를 누르고 엔터를 누릅니다.

Accept? (y/N): y



라이센스가 더이상 보이지 않을때 까지 반복합니다. 

완료되면 다음 메시지가 보입니다. 


All SDK package licenses accepted




6. flutter doctor 명령으로 다시 확인해봅니다. 라이센스는 해결되었지만 아직 3가지 문제를 해결해야 합니다. 


C:\Users\webnautes>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.720], locale

    ko-KR)


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)

[!] Android Studio (version 3.5)

    X Flutter plugin not installed; this adds Flutter specific functionality.

    X Dart plugin not installed; this adds Dart specific functionality.

[!] VS Code, 64-bit edition (version 1.43.0)

    X Flutter extension not installed; install from

      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[!] Connected device

    ! No devices available


! Doctor found issues in 3 categories.




7. 안드로이드폰을 연결하여  잘되었는지는 다음처럼 확인할 수 있습니다. 


C:\Users\webnautes>flutter devices

1 connected device:


LM G820N • LMG820Nc3c7d9a6 • android-arm64 • Android 10 (API 29)




8. Android Studio와 Visual Studio Code에서 Flutter 프로그래밍을 하기 위한 준비를 할 차례입니다.



Android Studio의 메뉴에서 File > Settings를 선택합니다. 

Flutter를 검색하여 install을 클릭합니다. 




추가 플러그인으로 Dart를 설치해야 한다고 물어봅니다. Yes를 선택합니다. 



Restart IDE를 클릭합니다. 





Visual Studio Code에서도 Flutter 프로그래밍을 하려면 진행합니다. 

왼쪽에 보이는 아이콘에서 확장을 클릭합니다. 





검색창에 flutter를 입력하여 검색된 Flutter 항목의 Install을 클릭합니다. Dart도 함께 설치됩니다.  





9. 명령 프롬프트에서 flutter doctor 명령으로 확인해봅니다. 

No issues found! 메시지가 마지막에 보인다면 Flutter 프로그래밍을 하기 위한 모든 준비가 완료된 것입니다. 


C:\Users\webnautes>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.720], locale ko-KR)


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)

[√] Android Studio (version 3.5)

[√] VS Code, 64-bit edition (version 1.43.0)

[√] Connected device (1 available)


• No issues found!




10. 안드로이드 폰에서 앱을 실행시켜 봅니다. 아이폰은 없어서 테스트를 해볼 수 없네요. 




10-1. 안드로이드 스튜디오의 메뉴에서 File > New > New Flutter Project를 선택합니다. 


Flutter Application를 선택하고 Next를 클릭합니다. 





Project name을 입력한 후, Flutter SDK path에 앞에서 설치한 flutter 위치를 입력하고 Next를 클릭합니다. 





Package name을 수정한 후, Finish 버튼을 클릭합니다. 

Flutter 프로젝트가 생성되길 잠시 기다립니다. 





툴바에 현재 연결된 디바이스 이름이 보입니다. 

디바이스 이름 오른쪽에 보이는  초록색 삼각형을 클릭하여 앱을 실행시켜 봅니다. 





Android Studio의 아래쪽에 Console 창이 보이면서 아래 메시지가 출력됩니다. 

Gradle 작업이 시작되는데 오래걸립니다. 


Launching lib\main.dart on LM G820N in debug mode...

Running Gradle task 'assembleDebug'...




꽤 오래 기다린후,  apk 파일이 생성되었다는 메시지가 보인 후, 잠시후 폰에 설치가 되었다는 메시지가 보였습니다.  




앱이 실행된후, 오른쪽 아래에 보이는 파란색 버튼을 클릭하면 화면 중앙에 보이는 숫자가 증가합니다. 






더 사용해봐야 정확히 알겠지만 Flutter의 장점 중 하나가 코드 수정후 결과를 바로 볼 수 있는 것 같습니다.  

코드로부터 apk 파일을 다시 생성하지 않고 바로 결과를 반영시켜 주네요.

시간이 오래 걸리지 않았습니다. 



앱을 설치한 후,  앱을 종료하지 않은 상태에서 수행해야 합니다. 

앱을 종료했다가 폰에서 앱을 다시 실행시킨 후 진행하면 앱에 반영이 되지 않습니다. 



코드에서 다음 부분을 수정합니다. 


수정전

'You have pushed the button this many times:',



수정후

'버튼을 몇번 눌렀는지 보여줍니다:',




툴바에서 노란색 번개 아이콘을 클릭합니다.




잠시 기다리면 앱에 반영된 것을 볼 수 있습니다. 






10-2. 비주얼 스튜디오 코드에서 Ctrl + Shift + P를 누른 후, 창에 flutter를 입력하여 검색되는 항목에서 Flutter: New Project를 선택합니다. 





원하는 프로젝트 이름을 입력하고 엔터를 누릅니다. 





왼쪽 위에 보이는 새 폴더를 클릭하여 원하는 폴더를 생성한 후, 마우스 왼쪽 버튼으로 선택하고나서 Select a folder to create the project in 버튼을 클릭합니다.





잠시 기다리면 Flutter 프로젝트가 생성됩니다. 





오른쪽 아래에 현재 연결된 디바이스 정보가 보입니다. 클릭하면 다른 폰을 선택하거나 에뮬레이터 디바이스를 생성할 수 있는 메뉴가 보입니다. 





F5를 누르면 안드로이드 스튜디오과 동일하게  Gradle 작업이 시작됩니다. 

하지만 안드로이드 스튜디오에 비해 빨리 apk 파일을 생성하여 폰에서 설치하여 실행해줍니다. 




앱을 설치한 후,  앱을 종료하지 않은 상태에서 수행해야 합니다. 

앱을 종료했다가 폰에서 앱을 다시 실행시킨 후 진행하면 앱에 반영이 되지 않습니다. 



코드에서 다음 부분을 수정합니다. 


수정전

'You have pushed the button this many times:',



수정후

'버튼을 몇번 눌렀는지 보여줍니다:',




Ctrl + S를 눌러 저장하면  앱에 바로 반영이 됩니다. 





최초 작성. 2020. 4. 12




관련 포스트


Flutter 강좌 02 - 첫번째 앱 작성하기

https://webnautes.tistory.com/1411




반응형

포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.

여러분의 응원으로 좋은 컨텐츠가 만들어집니다.
지금 본 내용이 도움이 되었다면 유튜브 구독 부탁드립니다. 감사합니다 ~~

유튜브 구독하기


제가 쓴 책도 한번 검토해보세요 ^^

  1. 이서우 2020.08.30 21:39

    안녕하세요! 플러터 공부를 시작하려고 플러터 설치 중에 있는데 해당 포스트가 정말 큰 도움이 되었습니다.
    저는 이 포스트를 따라하며 모든 설치를 완료했습니다. 하지만 여전히 flutter doctor를 실행하였을 때 plugin not installed라는 메세지가 뜨는데 혹시 해결방법이 있을까요?

    • Favicon of https://webnautes.tistory.com BlogIcon webnautes 2020.08.30 21:42 신고

      작성시점과 달라진 점이 있을수 있습니다
      아래 공식문서를 확인해보세요

      https://flutter-ko.dev/docs/get-started/install/windows

      출력메시지를 잘보시면 어떤게 없어서 에러가 난건지 알 수 있습니다

+ Recent posts