[환경설정] 12. 플러터 설치 & 안드로이드 스튜디오 설치

1. 플러터

1. 다운로드

Start building Flutter Android apps on Windows

Configure your system to develop Flutter mobile apps on Windows.

https://docs.flutter.dev/get-started/install/windows/mobile

2. 압축 풀기

3. 내 tools 폴더로 flutter 폴더 이동

4. bin 폴더 환경변수에 등록

5. 환경변수 등록 확인

flutter --version

2. 안드로이드 스튜디오

1. 다운로드

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

2. 설치

• 가상 장치를 설치할 것인가(휴대폰)

• 엄청 오래 걸림

3. 플러터 프로젝트 설정

1. 플러터 플러그인 설치

2. 플러터 프로젝트 생성

• 경로는 플러터 폴더

• 현재 만들고자 하는 플랫폼 안드로이드, ios, 웹 3가지다

3. 프로젝트 검사

flutter doctor

• Flutter → 플러터 설치하면 해결

• Windows version → 윈도우 설치 되어있으니 해결

• Android toolchain → 아래의 내용 하면 해결
• Android SDK에 cmdline-tools(명령줄 도구)가 설치되지 않았습니다
• Android SDK를 명령어로 제어할 수 있게 해주는 도구 모음
• 여기에는 sdkmanager, avdmanager, adb 같은 도구가 포함
• Flutter는 Android 빌드 도구를 자동으로 설치하거나 업데이트하기 위해 sdkmanager 같은 도구를 사용
• 에뮬레이터 설정 (avdmanager)
• 빌드 및 설치 작업 (adb, zipalign, apksigner 등)
• 이 도구들이 없으면 Flutter가 Android용 앱을 빌드하거나 실행할 수 없다
• Android SDK 라이선스에 동의하지 않아서 Flutter가 개발 준비가 안 됐다는 뜻
• Google은 사용자에게 SDK 사용에 대한 법적 동의를 받아야 하는 정책을 가지고 있다
• Flutter는 이 정책을 따르기 때문에, 개발자가 직접 명령어를 통해 동의해야만 Android 도구들을 사용할 수 있게 된다

• Chrome → 크롬 브라우저 설치하면 해결

• Visual Studio → vscode 설치하면 해결. 필요없음

• Android Studio → 안드로이드 스튜디오 설치하면 해결

• IntelliJ IDEA → 인텔리j 설치하면 해결. 필요없음

• Connected device → 가상장치 설치했으면 해결

• Network resources → 인터넷 연결되어있으면 해결

cmdline-tools 설치

• cmdline-tools 설치

• cmdline-tools 설치 후 다시 검사

라이센스 동의 등록

flutter doctor --android-licenses

• 나오는 내용 전부 y 로 예 넣어줌

• 안드로이드 툴체인 완료

4. 기타 설정들

테마 설정

폰트 설정

4. 새 프로젝트 세팅

자동 정렬

wrap 설정

디바이스 설정

• 버츄얼 디바이스 설치 → 픽셀3a(가장 기본사이즈)

디바이스 실행

• 오래 걸림

• 완료

hot reload 체험

• 저장 하면 바로 적용 됨

콤마 포멧

• 다음 자신의 flutter 설치 경로에서

• C:\workspace\tools\flutter_3.32\packages\flutter_tools\templates\app
• 전 flutter_3.32 로 만들었지만 다른 분들은 flutter 로 되어 있을 겁니다

• analysis_options.yaml을 에디터 툴로 열어주세요

formatter:
  trailing_commas: preserve

커스텀 코드 스니펫 설정

• 커스텀 코드 스니펫을 Dart 에 넣던 Flutter 에 넣던 상관 없습니다

• Top-Level 체크 할 필요 없습니다

• 상세하게 설정하기 싫다면 그냥 Everywhere 체크 하고 사용하시면 됩니다

상세 설정

• 작동 원리는 잘 모르겠는데 Dart 만 체크 되어있을 때 Top-level이 체크 풀려있더라도 저 Flutter riverpod 가 같이 체크 되어 있으면 그냥 되더라구요

• 아니면 그냥 Everywhere 을 체크해서 Dart 포함 다른 모든 스니펫도 같이 체크하면 풀리지 않습니다

• Dart 와 다른 어떤 게 같이 체크 되어 있으면 사용 가능한 것 같습니다

시작 자동 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {

  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: $NAME$(),
    );
  }
}

class $NAME$ extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Placeholder(),
    );
  }
}

주석 자동 코드

주석코드 자동완성 → ment

/// Created By $NAME$, $DATE$
/// 
/// email : $EMAIL$
/// 
/// tip : $TIP$

date("yyyy.MM.dd")

input()

import 'package:flutter/material.dart';

class $NAME$ extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return $WIDGET$;
  }
}

  Widget $NAME$() {
    return SizedBox();
  }