inblog logo
|
jay0628
    환경세팅

    [환경세팅] 13. Flutter & Android Studio 설치

    김주희's avatar
    김주희
    May 19, 2025
    [환경세팅] 13. Flutter & Android Studio 설치
    Contents
    1. Flutter & Android Studio 설치2. Android Studio 설치3. Flutter 프로젝트 생성🩺 기능 설명
    Flutter - Build apps for any screen
    Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.
    Flutter - Build apps for any screen
    https://flutter.dev/
    Flutter - Build apps for any screen
    Start building Flutter Android apps on Windows
    Configure your system to develop Flutter mobile apps on Windows.
    Start building Flutter Android apps on Windows
    https://docs.flutter.dev/get-started/install/windows/mobile
    Start building Flutter Android apps on Windows

    1. Flutter & Android Studio 설치

    1. Flutter와 Android studio 다운

    flutter.dev 에서 자신의 OS에 맞는 버전을 다운받는다.
    notion image
    notion image
    notion image
    notion image
     

    2. flutter.zip 압축해제

    flutter.zip 파일을 압축해제하면 flutter라는 폴더가 생기는데 flutter 폴더를 workspace\tools 폴더 바로 아래로 이동시킨다.
    notion image
     
    flutter 폴더 안의 bin이라는 바이너리 폴더 안에 들어가면 dart와 flutter 파일이 존재한다. 각각 dart와 flutter 개발할때 쓰는 것으로 dart는 language이고 이 언어를 통해 flutter라는 도구로 앱을 개발할 수 있다.
    notion image
    notion image
     

    3. 환경변수 설정하기

    bin 폴더 내부의 dart와 flutter 파일을 어느 폴더에서나 바로 접근하여 실행할 수 있도록 하기 위해 C:\workspace\tools\flutter\bin을 환경변수에 추가한다.
    notion image
    notion image
     

    4. 환경변수 확인하기

    cmd창에서 flutter —version, dart —version을 입력했을때 C:\workspace\tools\flutter\bin 위치가 아니더라도 버전이 잘 확인이 된다면 설치 및 환경변수 설정이 잘 되었음을 알 수 있다.
    notion image
    notion image
     

    2. Android Studio 설치

    1. Setup 설정

    Android Virtual Device를 설치하도록 체크하고 Next 한다. 설치하지 않을 경우 나중에 추가로 설정해줘야 하는데 번거로워지니까 체크하고 넘어가자!
    notion image
    notion image
     

    2. Install Type

    Custom으로 할 경우 내가 직접 세팅해야하는데 초보는 Standard를 사용하자
    notion image
     

    3. Plugin 설치

    안드로이드 스튜디오는 자바를 통한 안드로이드 개발 툴이므로 flutter와 dart를 툴이 인식하기 위해서는 플러그인 설치가 필요하다. flutter만 설치하면 dart는 자동으로 설치되니 flutter만 설치하면 된다. 플러그인이 제대로 적용될 수 있도록 restart IDE를 해주자.
    notion image
     

    3. Flutter 프로젝트 생성

    1. New Flutter Project

    새로운 플러터 프로젝트를 생성해보자.
    notion image
     
    Flutter SDK Path를 C:\workspave\tools\flutter로 잡아준다.
    notion image
     
    프로젝트 이름은 demo, 프로젝트location은 C:\workspace\flutter_lec\demo 로 설정한다. 이때 C:\workspace\flutter_lec으로 설정하면 flutter_lec안에 파일들이 생성되므로 demo라는 폴더 안에 생성될 수 있도록 주의하자! Platforms는 지금 이해할 필요가 없기 때문에 Android, iOS, Web만 체크해두고 일단 넘어간다.
    notion image
     

    2. 프로젝트 생성 완료

    notion image
     

    3. 추가 설정

    프로젝트 생성으로 끝이 난 게 아니라 추가로 설정해줘야 하는 것들이 있다.

    1. flutter doctor 명령어로 확인

    터미널을 열어서 flutter doctor 명령어를 입력한다. flutter doctor는 Flutter 개발 환경이 올바르게 설정되었는지 확인해주는 진단 도구 명령어이다.

    🩺 기능 설명

    이 명령어를 실행하면, Flutter는 시스템을 검사하고 다음 항목들을 점검합니다:
    항목
    설명
    Flutter SDK
    Flutter 자체가 설치되어 있는지, 버전은 무엇인지
    Android toolchain
    Android SDK, NDK, adb, 에뮬레이터 등이 제대로 설정되었는지
    Xcode (Mac에서만)
    iOS 앱 개발을 위한 Xcode 및 관련 툴이 설치되었는지
    Chrome
    Flutter Web 개발을 위한 브라우저 설정 확인
    Android Studio / VS Code
    IDE(통합 개발 환경)가 설치되어 있고 Flutter plugin이 활성화되어 있는지
    Connected device
    실제 스마트폰이나 에뮬레이터가 연결되어 있는지
    - [v] flutter - [v] window - [v] android toolchain - [v] chrome - [ ] visual studio - 윈도우 데스크탑 앱 만들때 필요 - [v] android studio - [ ] intellij - 지금 굳이 필요X - [ ] VS code - 지금 굳이 필요X - [v] Connected device → 가짜 android - [v] network resource
    notion image
    notion image
    notion image
    notion image
     
    전부 y하기
     
    android sdk command0line tools 설치
    햄버거 - tools
    sdk tool 탭에 android sdk command0line tools 체크하고 apply
    notion image
    notion image
     
     
    저장만 하면 바로 reload됨
    emulator
    tools - 디바이스 매니저 running device
    pixel 3a → 화면의 사이즈가 다른데 얘가 제일 기본사이즈
    emulator 세모를 눌러야 실행 가능
     
     
     
    notion image
    notion image
    notion image
    notion image
     
     
    notion image
    notion image
     
     
    느려도 기다리자~!
    notion image
    notion image
    notion image
    notion image
    Share article

    jay0628

    RSS·Powered by Inblog