본문 바로가기
프로그래밍

Windows에서 Flutter 개발하기

by makepluscode 2024. 12. 12.
반응형

Flutter는 Google이 2017년에 발표한 오픈소스 크로스 플랫폼 프레임워크로, 단일 코드베이스로 iOS, Android, Web, Desktop 앱을 모두 개발할 수 있다는 큰 장점이 있습니다. 특히 Material Design과 Cupertino 위젯을 기본으로 제공하여 아름다운 UI를 빠르게 구현할 수 있으며, Hot Reload 기능으로 실시간 코드 변경사항을 즉시 확인할 수 있어 개발 생산성이 매우 높습니다.

Windows에서 Flutter 개발하기

최근에는 많은 기업들이 Flutter를 도입하고 있으며, 전 세계적으로 개발자 커뮤니티도 빠르게 성장하고 있습니다. 이 포스팅에서 Windows 환경에서 Flutter 개발을 시작하기 위한 환경 설정 방법을 알아보겠습니다.

Flutter 개발환경 만들기

VS Code는 가볍고 강력한 기능을 제공하는 무료 코드 에디터로, Flutter 개발을 위한 최적의 도구입니다. Flutter 개발을 위해서는 VS Code에 Flutter와 Dart 확장 프로그램을 설치하고 필요한 설정을 해주어야 하는데, 이 글에서는 이러한 환경 설정 방법을 하나씩 자세히 살펴보도록 하겠습니다.

1. Visual Studio Code 설치

VS Code 다운로드 및 설치

VS Code 다운로드 및 설치

  1. VS Code 공식 웹사이트에 접속합니다.
  2. 파란색 'Download for Windows' 버튼을 클릭하여 설치 파일을 다운로드합니다.
  3. 다운로드된 설치 파일을 실행합니다.
  4. 설치 과정에서 다음 옵션들을 체크하는 것을 추천합니다.
    • "PATH에 추가" 옵션
    • "파일 컨텍스트 메뉴에 추가" 옵션
    • "디렉토리 컨텍스트 메뉴에 추가" 옵션

Flutter 관련 VS Code 확장 프로그램 설치

Flutter 관련 VS Code 확장 프로그램 설치

  1. VS Code를 실행합니다.
  2. 왼쪽 사이드바에서 확장(Extensions) 아이콘을 클릭합니다.
  3. 검색창에 "Flutter"를 입력합니다.
  4. Flutter (공식 Flutter 확장), Dart  확장 프로그램들을 설치합니다:

2. Visual Studio Community 설치

Flutter에서 Windows 앱을 개발하려면 Visual Studio Community 2022를 visualstudio.microsoft.com 사이트에서 다운로드해야 합니다. Visual Studio는 무료 버전인 Community 에디션으로도 충분하며, Flutter Windows 앱 빌드에 필요한 C++ 컴파일러와 Windows SDK가 포함되어 있습니다. Windows 앱 개발에 Visual Studio Code가 아닌 Visual Studio가 필요한 이유는 네이티브 Windows 애플리케이션 빌드에 필요한 도구 체인이 Visual Studio를 통해서만 제공되기 때문입니다.

Visual Studio Installer에서 Flutter Windows 앱 개발을 위한 C++ 워크로드를 설치하는 방법은 먼저 이곳에서 Community 2022를 다운로드하고, 설치 프로그램이 실행되면 '워크로드' 탭에서 'C++를 사용한 데스크톱 개발'을 선택한 뒤, 우측의 설치 세부 정보에서 'MSVC v143', 'Windows용 C++ CMake 도구' 등 필수 구성 요소들이 모두 체크되어 있는지 확인하고 설치를 진행하면 됩니다. 설치가 완료되면 VS Code로 돌아가 터미널에서 'flutter doctor' 명령어를 실행하여 Visual Studio 관련 경고가 사라졌는지 확인할 수 있으며, 이제 Flutter Windows 앱 개발을 위한 기본 환경 구성이 완료됩니다.

https://visualstudio.microsoft.com/

 

Visual Studio: IDE and Code Editor for Software Developers and Teams

Visual Studio dev tools & services make app development easy for any developer, on any platform & language. Develop with our code editor or IDE anywhere for free.

visualstudio.microsoft.com

Flutter Windows 앱 개발을 위한 Visual Studio 설치 방법은 다음과 같습니다.
1. visualstudio.microsoft.com 웹사이트 접속
2. 상단 메뉴에서 'Visual Studio' 클릭 후 'Community 2022' 다운로드 버튼 클릭
3. 다운로드된 'VisualStudioSetup.exe' 실행
4. Visual Studio Installer가 실행되면 '워크로드' 탭 선택
5. 'C++를 사용한 데스크톱 개발' 워크로드 체크박스 선택
6. 우측의 '설치 세부 정보'에서 다음 항목들이 체크되어 있는지 확인:
7. 우측 하단의 '설치' 버튼 클릭
8. 컴퓨터 재부팅

3. 새로운 프로젝트 생성 및 실행

VS Code에서 새로운 Flutter 프로젝트를 생성하기 위해서는 먼저 키보드에서 Control + Shift + P (macOS는 Command + Shift + P)를 눌러 명령 팔레트를 열어야 합니다. 명령 팔레트가 열리면 'Flutter: New Project'를 입력하거나 선택하면 새로운 Flutter 프로젝트 생성 마법사가 실행되며, 이를 통해 프로젝트의 이름과 저장 위치 등을 설정하여 새로운 Flutter 프로젝트를 시작할 수 있습니다.

새로운 플로터 프로젝트 생성

Flutter 프로젝트 생성 시 'Flutter: New Project' 명령어를 실행하면 'Application', 'Plugin', 'Package' 등의 프로젝트 유형이 표시되는데, 여기서 'Application'을 선택하고 프로젝트 이름을 'hello'로 입력한 후 저장할 위치를 선택하면 기본 예제 코드가 포함된 프로젝트가 생성됩니다.

새로운 플로터 프로젝트 생성

생성된 프로젝트는 VS Code에서 F5 키를 눌러 실행할 수 있으며, 실행이 완료되면 Flutter 로고와 중앙에 숫자가 표시된 기본 카운터 앱이 Windows 데스크톱 앱으로 실행되는 것을 확인할 수 있습니다.

새로운 플로터 윈도우 프로젝트

이렇게 Windows에서 Flutter 개발을 시작하기 위한 기본적인 환경 설정을 완료했습니다. Visual Studio와 VS Code를 설치하고, 필요한 C++ 개발 도구를 추가한 후, 첫 번째 Flutter Windows 애플리케이션을 성공적으로 실행해보았습니다. 다음 포스팅에서는 이 개발 환경을 활용하여 실제로 동작하는 간단한 Flutter 애플리케이션을 만들어보도록 하겠습니다.

반응형

'프로그래밍' 카테고리의 다른 글

Flutter 애드센스 수익조회  (2) 2024.12.14
Flutter에서 Google 로그인  (0) 2024.12.12