[환경세팅] 10. Flutter 설치 및 기본 세팅

1️⃣ 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.

https://flutter.dev/

• 환경 변수 설정

• 환경 변수 적용되었는지 확인

2️⃣ Android studio

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

https://developer.android.com/studio?hl=ko

• exe파일 실행

• 처음 설치 시 나오는 화면

3️⃣ Flutter와 Android studio 연결

1. Android Studio에 Flutter 설치

2. 프로젝트 생성

• 프로젝트 생성 시에 꼭 SDK가 내가 설치한 플러터 폴더 경로로 지정 해야함.

• 프로젝트 생성 위치에 \ 를 붙여서 폴더 안에 폴더를 생성 할 수 있게 해줘야함. 그러지 않으면 나중에 새로운 프로젝트를 생성 할 때에 어려움

3. 개발이 가능한 환경인지 체크

4. Android Toolchain 설정

• 이후에도 체크 표시가 아닌 느낌표[!] 로 나올 시 에는 flutter doctor --android-licenses 명령어를 입력 후 나오는 항목을 모두 Y → 엔터 해주면 된다.

• 필수 사항은 모두 체크 표시!

5. 에뮬레이터 설치

• 디바이스 매니저가 안 보일 시

• 에뮬레이터가 설치가 안되어 있을 시

6. 에뮬레이터 실행

• 에뮬레이터 실행화면

• 에뮬레이터 실행 후 나의 소스코드를 업로드 하기

• 실행 화면

• 화면 수정

4️⃣ ,(콤마) 로 자동 정렬

💡

Flutter 3.29.3 버전은 지원하지 않음.

---

이 방법을 사용한 버전은 Flutter 3.32.0 버전

1. analysis_options.yaml 수정

아래의 코드를 해당 파일에 추가 입력

formatter:
  trailing_commas: preserve

2. Code Style/Dart

Dart에 최대 라인 길이 늘려주기.

3. 테스트

flex: 1 뒤에 ,가 없는 경우에는 한줄로 나옴 ,가 있는 경우에는 한 줄 띄워씀.

Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover), flex: 1),
SizedBox(height: 2),
Expanded(
  child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover),
  flex: 1,

5️⃣ , (콤마) 자동 정렬 모든 프로젝트 적용

💡

위에 방법을 사용할 경우에는 새 프로젝트를 만들 때마다 analysis_options.yaml 파일에 들어가 코드를 계속해서 넣어야 한다. 그럼으로 새 프로젝트를 만들 때도 적용되게 해보겠다.

formatter:
  trailing_commas: preserve

1. analysis_options.yaml의 파일 경로를 찾아 파일에 코드 삽입

내 경로 C:\workspace\tools\flutter\packages\flutter_tools\templates\app

해당 Flutter를 다운 받은 파일에 \packages\flutter_tools\templates\app 폴더에 들어간다. 아래의 사진과 같이 해당 폴더에 코드를 삽입한다.