[ Flutter ] 플러터 Pop!_OS 에서 VS Code 를 사용하여 Flutter 웹 개발 환경 구축
사전 준비:
Pop!_OS [최신 확인]
$ sudo apt update
$ sudo apt upgrade
1. Visual Studio Code (VS Code) 설치
Pop!_Shop [실행]
visual studio code [검색]
설치 [클릭]
2. Flutter SDK 다운로드 및 확인
Flutter SDK 압축 파일 [확인]
3. 설치 폴더 생성 및 압축 해제
$ mkdir ~/development [폴더 생성]
$ cd ~/development [폴더 이동]
$ tar xf ~/다운로드/flutter_linux_3.29.3-stable.tar.xz -C ~/development [압축 해제]
4. Flutter Path 환경 변수 설정 및 확인
$ gedit ~/.bashrc [텍스트 편집기로 열기]
export PATH="$PATH:$HOME/development/flutter/bin" [맨 아래 추가]
파일 저장 후 닫기
$ source ~/.bashrc [변경된 PATH 적용]
$ echo $PATH [PATH 목록 확인]
$ which flutter [Flutter 확인]
5. Flutter 의존성 설치 확인
$ flutter doctor
Android toolchain : 안드로이드 앱 개발을 위한
Chrome: 웹 개발을 위한 Chrome 브라우저
Linux toolchain: Linux 데스크톱 앱 개발을 위한웹 개발 Chrome 브라우저가 [X]로 표시 된다면
$ sudo apt update
$ sudo apt install google-chrome-stable [chrome 설치]
$ flutter config --enable-web [웹 준비 확인]
6. VS Code 에 Flutter 설치
VS Code [실행]
왼쪽 사이드바 확장(Extensions) 아이콘 (네모난 블록 모양) [클릭]
검색창 "Flutter" [입력]
Dart Code 팀 공식 Flutter "Install" [클릭]
Flutter 설치시 Dart 자동 설치
7. 프로젝트 생성 및 실행
VS Code 활성화 상태 Ctrl+Shift+P [입력]
명령 팔레트(Command Palette) "Flutter: New Project" [검색 및 선택]
템플릿 "Application" || "Empty Application" [선택]
프로젝트 폴더 [선택] (EX: ~/development)
프로젝트 이름 [입력] (EX: flutter_application_1)
이름은 소문자와 언더스코어(_)만 사용
VS Code 우측 하단 "No Device" [클릭]
드롭다운 메뉴 "Chrome (web)" [선택]
F5 키 또는 Run > Start Debugging [실행]
댓글
댓글 쓰기