본문으로 이동

플러터:실행

학교의 모든 지식. SMwiki

틀:플러터 Dart:개요 플러터에 대한 지식 분류

  1. 플러터:개요
    1. 플러터:VSCode
    2. 플러터:안드로이드 스튜디오
  2. 플러터:실행
  3. 플러터:개념 잡기
    1. 플러터:화면 하나 만들기
    2. 플러터:변하는 화면(StatefulWidget)
    3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
    4. 플러터:화면 전환(Drawer)
    5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
    6. 플러터:그래프 그리기(fl chart)
    7. 플러터:데이터 저장(간단한 데이터)
    8. 플러터:인증(Firebase 인증)
    9. 플러터:인증(OAuth2)
  4. 권한 사용
    1. 플러터:마이크 입력
  5. 위젯
    1. 플러터:아이콘
    2. 플러터:레이아웃 계열 위젯
    3. 플러터:네비게이션 계열 위젯
    4. 플러터:버튼
    5. 플러터:상태관리
  6. 플러터:DB연결
    1. 플러터:Firebase
    2. 플러터:MySQL
  7. 디자인
    1. 플러터:테마
    2. 플러터:앱바
  8. 플러터:배포
  9. 플러터:참고자료
  10. 플러터:위젯
    1. 플러터:공간배치용 위젯
  11. 플러터:라이브러리
    1. 플러터:logger

개요

[편집 | 원본 편집]

개발 중 화면을 파악하기 위하여.

과정 설명 비고
개발환경 준비 안드로이드, ios 등 해당 개발환경에 대해 배포하기 위한 사전작업이 되어 있는지 확인.

각 개발환경에 대한 준비 여부를 진단한다.

flutter doctor
확인(선택사항)
  • 프로그램을 실행할 수 있는 디바이스를 확인할 수 있다.(위에 포함되는 과정)
  • USB로 연결하든, 가상기기로 연결하든 연결된 디바이스 확인.
 flutter devices
실행 window, 연결된 장 등 해당 환경에서의 앱을 실행해본다. flutter run -d 디바이스명

vscode의 경우, 우측 하단에서 디바이스를 설정하고(에뮬레이터를 켜고) flutter run 만으로 가능.

에뮬레이터 사용하기

[편집 | 원본 편집]

프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.

과정 설명 비고
안드로이드 스튜디오 설치 휴대폰 뮬레이터를 실행하기 위해 필요한 프로그램이다.(iOS개발은 윈도우 컴에선 못함.)
  • 설치파일만 1.1GB 정도.
  • 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.(용량 꾀 많음, 오래걸림)
 https://developer.android.com/studio/install
에뮬레이터 사용 설정 안드로이드 SDK를 지정해주어야 한다.
  • 안드로이드 스튜디오에서 SDK Manager > Android SDK Location 경로를 복사해 환경변수로 설정해야 한다. 파워쉘을 관리자권한으로 실행하여 아래를 진행하자.
  • flutter config --android-sdk "D:\code\Android\SDK"
  • 다시 SDK Manager, Android SDK>SDK Tools>Android SDK command-line Tools(latest)를 Apply 눌러 설치.
라이센스 동의 flutter doctor를 실행하면 [!] Android toolchain - develop for Android devices (Android SDK version 35.0.1) 과 같은 메시지가 뜬다.

라이센스 동의 관련은 flutter doctor --android-licenses 를 입력해 y를 계속 입력하면 된다.이후 vscode를 재시작해주면 코드 실행으로 사용 가능.

기기 추가
  • Projects에서 Virtual Device Manager에서 기기를 추가하거나 삭제할 수 있다. 잘 따라가면 문제 없음.
  • Projects가 없는 경우 메인페이지에서 more options 등에서 device manager에 접근할 수 있다.
  • 기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다.
  • 구석 부분을 드래그하여 화면 크기를 조절할 수 있는데.. 요령이 필요하다;

발생할 수 있는 문제

[편집 | 원본 편집]
과정 설명
...... to "build\flutter_assets\shaders/ink_sparkle.frag" failed with exit code -1073741819. 보통 프로젝트나 플러터의 경로에 한글이 포함되어 있을 때 발생하는 에러이다.
윈도우. CMD에서 다음의 명령으로 가상 드라이브 생성.

subst X: "D:\OneDrive - 원주중학교\for coding computer"

이렇게 경로를 바꿔주는 경우, VSCode의 경우에 좌측의 세팅에서 "Dart: Flutter SDK Path" 설정을 찾아 설정파일을 변경해주어야 한다.

이렇게 하면 flutter doctor에서 경로가 바뀌었음을 지적하는데, 이는 flutter clean으로 build 파일을 제거했다가 다시 구성하면 해결된다.

Flutter failed to delete a directory at "build\flutter_assets". The flutter tool cannot access the file or directory. 2025년 기준 이런 메시지가 뜨는 건 여러 이유가 있겠지만... 나의 경우엔 원드라이브 내부의 경로를 사용했을 때이다.

구글드라이브나 원드라이브나 동기화 폴더 안에 두면 사용중으로 묶여버리는데... 이거 이유를 한참만에 발견했다;;; 동기화 환경에선 쓸 수 없다는 게 굉장히...치명적이고 불편하다.

실제 기기를 활용한 실행

[편집 | 원본 편집]

안드로이드

[편집 | 원본 편집]

실제 휴대폰이 에뮬레이터보다 빠르고 안정적임.

과정 설명 비고
디버깅 모드 활성화 핸드폰 설정
  • 개발자 옵션 활성화: 설정 → 휴대전화 정보 → 소프트웨어 정보, 빌드 번호를 7번 연속 탭, "개발자가 되었습니다!" 메시지 확인
  • USB 디버깅 활성화: 설정 → 개발자 옵션, * USB 디버깅 켜기
  • USB 디버깅이 Auto Blocker 때문에 막힌 경우: 삼성의 보안기능이다. 설정 > 보안 및 개인 정보 보호 (Security and Privacy) 여기서 Auto Blocker를 끈다.
  • USB를 통한 설치 켜기 (있는 경우)

USB 케이블로 연결:

  • 핸드폰을 컴퓨터에 USB로 연결, 핸드폰 화면에 "USB 디버깅 허용" 팝업 → 허용 탭
 파일전송이 가능한 USB로 연결해야 함.
Google USB Driver 설치 안드로이드스튜디오 > Tools > SDK Manager > Languages&Frameworks > Android SDK > SDK Tools > Google USB Driver
자바 JDK 설치
  • 확인: flutter doctor -v 에서 Android toolchain 아래 Java binary at: 경로 확인. 있으면 문제 없음.
  • flutter --version 에서 버전명을 알아낸 후 GPT에게 적절한 자바 JDK 버전을 물어 설치한다.
OS 설명
Windows 설치방법은 아래 2가지. 1번 방법을 권장한다. 물론 버전은 적절히 바꿔서.
  1. winget install EclipseAdoptium.Temurin.17.JDK
  2. https://adoptium.net/ 에서 다운받는데, 무작정 최신 버전을 받는 게 아니라, 플러터 버전에 맞는 버전을 설치해야 함.

설치 하고 재부팅 하면 경로도 자동으로 잡힘.

  • 설치 확인: java --version
연결 및 확인
  • 휴대폰 연결.(와이파이로 무선 디버깅이 되는 기기도 있음) 권한 요청이 뜨면 허가.
  • flutter devices 실행하면 휴대폰의 모델명이 나타나야 함.
실행 flutter run에서 디바이스 선택.
  • 처음 실행할 땐 상당히 느리다. 앱을 빌드해서 실행.(휴대폰에 앱 설치됨)
  • 연결을 끊어도 앱이 설치되어 있어, 앱을 계속 쓸 수 있음.
  • 핫 리로드 됨. 디버그모드는 핫 리로드를 위한 메타데이터 때문에 오히려 실제 빌드보다 더 느리다. 빌드 캐시를 지우는 게 두려워질 정도로;; 간단한 마이크 테스트용 올려봤는데, 그래들 task만 160초, 빌드.. 디버그 팩 설치하는 데만도 한참 걸린다;;
  • VSCode라면 하단바에서 선택 가능. 이후 F5 따위로 실행 가능.

iOS

[편집 | 원본 편집]

실행 이후 개발

[편집 | 원본 편집]

핫 리로드

[편집 | 원본 편집]

파일을 저장하면 실행 화면에 실시간으로 저장 내용이 반영된다.

애석하게도, 원드라이브 등 프로젝트가 특수한 디렉토리 안에 있으면 파일이 잠겨서 핫 리로드가 안된다.(옛날엔 한글 디렉토리에 있으면 실행조차 안되었는데, 어느 순간 해결되었다.)

문제 발생

[편집 | 원본 편집]

여러 에뮬레이터로 개발을 하는 상황에서 Gradle 캐시 잠금 문제가 발생한다. 원인으로는 다음과 같은 것들이 생각된다.

Gradle 캐시 잠금 문제

[편집 | 원본 편집]
원인 설명 비고
한글 경로가 포함됨. (사용자명이 한글인 경우. 어쩔 수가 없는;;): 파워쉘에서 setx GRADLE_USER_HOME "D:\FlutterGradleCache" 형식으로 경로를 바꾸어준다.
회사망이라 SSL 인증서 문제로 제대로 된 Gradle 다운로드가 안됨.
플러터와 Gradle 버전이 안맞음. 이건... 코파일럿도 잘 안알려주는 문제였다; 버전에 대한 질문을 해보길. 보통 코파일럿 등은 코드만 살펴주지, 이런 문제는 상정 외...
보안 프로그램 보안 프로그램이 스캔하면서 잠가버리면 답 없....

프로젝트가 원드라이브 안에 있어도 이유를 모르겠지만 감궈버림...

학교에서 개발할 때......정말 안된다.

V3인지 뭔지 계속 잠겨서......... 빠르게 포기하고 노트북으로 넘어가는 편이 좋다. 학교 노트북에도 기본적으로 보안프로그램이 설치되어 있어 안되었었는데, V3 지우니 되었음.

원본 주소 "https://smwiki.info/index.php?title=플러터:실행&oldid=10874"