Windows에서 Flutter를 사용한 데스크탑 애플리케이션 개발환경 구축

Windows에서 Flutter를 사용하여 데스크탑 애플리케이션을 개발하기 위한 준비 과정을 다루고 있습니다. 

2022. 7. 23   최초 작성

1. 다음 링크의 Stable Channel (Windows) 항목에서 최신 버전의 Flutter를 다운로드합니다.

글 작성 시점에서 최신버전은 3.0.5입니다. 

 

https://docs.flutter.dev/development/tools/sdk/releases 

 

2. 다운로드 받은 압축파일을 압축해제하여 원하는 곳에 복사해둡니다. 여기에선 c:\flutter에 복사해두고 진행합니다. 

flutter를 복사해둔 전체 경로 상에 공백이나 특수 문자가 있으면 안되며, C:\Program Files\처럼 권한이 필요한 곳은 피해야 합니다. 

 

3. flutter의 명령을 명령 프롬프트에서도 사용가능하도록 하려면 변수 PATH에 flutter가 복사된 경로를 추가해야 합니다. 

시작 버튼을 클릭한 후, env를 입력하면 보이는 "시스템 환경 변수 편집"을 선택합니다. 

 

환경 변수 버튼을 클릭합니다.

 

시스템 변수 항목에 보이는 path를 선택한 후, 편집 버튼을 클릭합니다.  

 

아래쪽에 있는 공백 줄을 더블 클릭 후, flutter의 bin 경로를 다음처럼 입력합니다.  

 

c:\flutter\bin

 

확인 버튼을 클릭하여 설정을 저장합니다. 

 

 

주의할점은 명령 프롬프트 창을 새로 열어야 추가된 flutter의 bin 경로가 path에 반영됩니다. 

4. 아래 포스트를 참고하여 Visual Studio Code를 설치합니다.

 

Visual Studio Code 설치하는 방법( Windows / Ubuntu )

https://webnautes.tistory.com/1841 

아래 포스트를 참고하여 Visual Studio Community 2022를 설치합니다.

 

C/C++, Win32 API, MFC 개발을 위해 Visual Studio Community 2022 설치하는 방법

https://webnautes.tistory.com/2058

5. 명령 프롬프트에서 다음 명령으로 flutter를 사용할 준비가 되었는지 체크합니다.

 

flutter doctor

 

 

Visual Studio 항목 옆에 develop for Windows라고 출력되어야 합니다.

6. Visual Studio Code의 왼쪽 바에 보이는 아이콘에서 확장을 클릭합니다. 

 

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

 

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

 

Application을 선택합니다. 

 

프로젝트를 생성할 곳으로 이동하고 나서 “Select a folder to create the project in” 버튼을 클릭합니다.

 

원하는 프로젝트 이름을 입력하고 엔터를 누릅니다.  폴더이름과 프로젝트 이름을 동일하게 했습니다. 

 

잠시 기다리면 Flutter 프로젝트가 생성됩니다.  탐색기에 windows 폴더가 보입니다. 

 

8. F5를 눌러 실행해봅니다. 다음처럼 디버그 모드에서 실행이 됩니다.

 

메뉴에서 보기 > 터미널을 선택합니다. 다음 명령으로 실행할 수도 있습니다. 실행 결과는 앞에서 한 것과 동일합니다. 

 

flutter run

D:\test\hello_flutter>flutter run

Multiple devices found:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19044.1826]

Chrome (web)      • chrome  • web-javascript • Google Chrome 103.0.5060.134

Edge (web)        • edge    • web-javascript • Microsoft Edge 103.0.1264.62

[1]: Windows (windows)

[2]: Chrome (chrome)

[3]: Edge (edge)

Please choose one (To quit, press "q/Q"): 1   Windows에서 실행하려면 1을 입력하고 엔터를 눌러야 합니다. 잠시후 앞에서 보였던 프로그램이 실행됩니다. 

Launching lib\main.dart on Windows in debug mode...

Building Windows application...                                         

Syncing files to device Windows...                                 174ms

 

Flutter run key commands.

r Hot reload.

R Hot restart.

h List all available interactive commands.

d Detach (terminate "flutter run" but leave application running).

c Clear the screen

q Quit (terminate the application on the device).

 

 Running with sound null safety 

 

An Observatory debugger and profiler on Windows is available at: http://127.0.0.1:4177/g6VQPre1qO4=/

The Flutter DevTools debugger and profiler on Windows is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:4177/g6VQPre1qO4=/

Lost connection to device.

9. 다음 명령으로 릴리즈 실행 파일을 생성합니다. 

 

flutter build windows

 

다음 위치에 생성되며 이 경로에 있는 모든 파일이 있어야 프로그램이 실행됩니다.

프로젝트 폴더에 있는  \build\windows\runner\Release 경로 입니다. 

 

 

참고

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

 

https://docs.flutter.dev/development/platform-integration/desktop