[ Flutter ] 플러터 Pop!_OS 에서 VS Code 를 사용하여 Flutter 웹 개발 환경 구축

[ 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 공식 설치 페이지 [실행]
    Web [선택]

    flutter_linus_3.29.3-stable.tar.xz [클릭]

    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 [실행]

==========

[ Flutter ] 플러터 Pop!_OS 에서 VS Code 를 사용하여 Flutter 웹 개발 환경 구축