[환경 세팅] 14. Flutter 설치

May 22, 2025

Contents

1. Flutter 다운로드 2. 안드로이드 앱 개발 할 거니까 안드로이드 선택 3. 최신 버전 설치 4. 안드로이드 스튜디오도 같이 다운로드하기 5. 플러터 다운로드 받은 폴더 압축 풀기 (7zip으로 풀면 좋음)6. 워크 스페이스로 파일 위치 옮기기 7. bin 폴더로 들어가면 flutter 파일과 dart라는 파일이 생김 8. 안드로이드 스튜디오 설치 9. 플러터랑 안드로이드 스튜디오 연결하기 10. 프로젝트 생성 11. 플러터 추가 설정 12. 에뮬레이터 설치 📢 다시 최신 버전 설치하기

1. Flutter 다운로드

2. 안드로이드 앱 개발 할 거니까 안드로이드 선택

3. 최신 버전 설치

4. 안드로이드 스튜디오도 같이 다운로드하기

5. 플러터 다운로드 받은 폴더 압축 풀기 (7zip으로 풀면 좋음)

6. 워크 스페이스로 파일 위치 옮기기

7. bin 폴더로 들어가면 flutter 파일과 dart라는 파일이 생김

💡

bin이라는 폴더가 환경 변수 패스 설정이 되어 있어야 함

환경 변수 설정

8. 안드로이드 스튜디오 설치

설치하기

9. 플러터랑 안드로이드 스튜디오 연결하기

✅ 설치하고 재시작

10. 프로젝트 생성

New Project

tool에 플러터 잡아주기

flutter_lec : 폴더 이름, 프로젝트 이름 : demo

생성 완료

11. 플러터 추가 설정

Terminal 열기

flutter doctor : 플러터 실행하기 전에 제대로 잡혀있는지 확인 하는 것

체크 확인하기


1. Flutter - 반드시!!
2. Windows Version - 반드시!!
3. Android toolchain → 꼭 설치 되있어야 함
    1. flutter doctor —android
    2. SDK Tools - Android SDK Command-line Tools 설치
        1. 햄버거 버튼 → tool → SDK → Android SDK 체크하고 ok해서 설치하기
4. Chrome - 반드시!!
5. Visual Studio → 이건 지금 꼭 체크 안 되있어도 됨
6. Android Studio
7. Inteli J IDEA → 이건 지금 꼭 체크 안 되있어도 됨
8. VS Code
9. Comected device → 얜 체크 되있어야 함
10. Network resource

VS Code는 지금 필요 없음!

✅ Android toolchain 설정하기 (SDK Tools부터 먼저 설정하기)

SDK Tools 설정

Android toolchain 설정


flutter doctor --android-licenses

다시 검사 했을 때 체크 확인

Flutter 버전 확인하기

자동 정렬 설정하기

글자 크기 및 폰트 설정하기 (+ wheel 설정)

12. 에뮬레이터 설치

✅

에뮬레이터 설치하기 (설치 되어있을 수도 있다 그러면 안 해도 됨)

device manager → create → pixel 3a → next → finish

오른쪽 아이콘이 안 보일 경우 → 햄버거 버튼 → Tools → device manager

에뮬레이터가 실행되어야지 가상 화면이 나타남 (Pixel 3a (mobile))

Device Manager 활성화

create virtual Device

Pixel 3a 선택

Pixel 3a 실행하기

가상화면 확인

에뮬레이터가 실행 되어야지 가상화면 나타남!!

실행 하기

📢 다시 최신 버전 설치하기

1. 다운로드 하기

2. 압축 풀기

원래 있던 파일 삭제 후 다시 flutter 파일 넣기

3. Git Bash Here 에서 명령어 입력

4. 안드로이드 스튜디오 재설정

포맷 코드 추가


formatter:
  trailing_commas: preserve

코드 폭 수정하기

5. 결과

💡

,로 정렬을 정할 수 있다

6. 비교


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 이 리턴 값으로 그림을 그린다
    return MaterialApp(
      // 안드로이드 디자인, CupertinoApp은 IOS 디자인
      // home: 은 앱 실행 시 가장 먼저 보여줄 위젯을 설정하는 프로퍼티
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.all(25),
                child: Row(
                  mainAxisAlignment:
                      MainAxisAlignment
                          .spaceBetween,
                  children: [
                    Text(
                      "Women",
                      style: TextStyle(
                        fontWeight:
                            FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    Text(
                      "Kids",
                      style: TextStyle(
                        fontWeight:
                            FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    Text(
                      "Shoes",
                      style: TextStyle(
                        fontWeight:
                            FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    Text(
                      "Bag",
                      style: TextStyle(
                        fontWeight:
                            FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Image.asset(
                  "assets/bag.jpeg",
                  fit: BoxFit.cover,
                ), // 이름있는 생성자, 나중에 네트워크로 넣으려면 Image.netWork 해야함
                flex: 1,
              ),
              SizedBox(height: 2),
              Expanded(
                child: Image.asset(
                  "assets/cloth.jpeg",
                  fit: BoxFit.cover,
                ),
                flex: 1,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

수정 전 코드


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 이 리턴 값으로 그림을 그린다
    return MaterialApp(
      // 안드로이드 디자인, CupertinoApp은 IOS 디자인
      // home: 은 앱 실행 시 가장 먼저 보여줄 위젯을 설정하는 프로퍼티
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.all(25),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("Women", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                    Text("Kids", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                    Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                    Text("Bag", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                  ],
                ),
              ),
              Expanded(
                child: Image.asset(
                  "assets/bag.jpeg",
                  fit: BoxFit.cover,
                ), // 이름있는 생성자, 나중에 네트워크로 넣으려면 Image.netWork 해야함
                flex: 1,
              ),
              SizedBox(height: 2),
              Expanded(
                child: Image.asset(
                  "assets/cloth.jpeg",
                  fit: BoxFit.cover,
                ),
                flex: 1,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

수정 후 코드

See more posts