Windows & VS Code 환경에서 Flutter 개발 환경 구축하기

zioni·2025년 12월 23일

Flutter

목록 보기
1/1
post-thumbnail

Windows에서 Flutter 개발환경 구축(VS Code 기준)

1. 준비물

✅ 권장 환경

  • Windows 10/11 64-bit
  • 저장공간 여유(최소 수 GB 이상 권장)

✅ 설치 경로 원칙

  • 공백/한글/특수문자/OneDrive 동기화 폴더는 피하는 걸 강력 추천 예) C:\src\flutter / C:\dev\flutter

✅ 사용 터미널

  • Windows PowerShell

2. Git 설치

Flutter 설치/업데이트에 Git이 필요

https://docs.flutter.dev/get-started/quick

설치

  • Git for Windows 설치

https://git-scm.com/install/windows

  • 설치 후 PowerShell 새로 열고 확인:
git --version


3. VS Code 설치 + Extensions 설치

3-1. VS Code 설치

  • Microsoft 공식 설치 경로로 설치

https://docs.flutter.dev/tools/vs-code

3-2. Flutter 확장 설치

  • VS Code 실행 → Extensions → Flutter 설치



4. Flutter SDK 설치

4-1. VS Code에서 Flutter SDK 설치

  1. VS Code 실행
  2. Ctrl + Shift + PFlutter: New Project
  3. Flutter SDK 설치 안내가 뜨면 Install/Download SDK 흐름으로 진행

https://docs.flutter.dev/install/with-vs-code


🚨 나의 경우 Flutter SDK 설치 안내가 안뜸

4-1-1) VS Code 터미널에서 Flutter가 있는지 즉시 확인

  • VS Code에서 Terminal > New Terminal (PowerShell) 열고 아래 실행:

    where flutter
    flutter --version
    

where flutter가 아무것도 안 나옴 / flutter 인식 불가

→ Flutter SDK가 아직 없거나 PATH가 안 잡힘

4-1-2) Flutter SDK를 수동으로 설치

https://docs.flutter.dev/install/manual

4-1-2-a) 폴더 만들기

  • Flutter Windows SDK(zip) 받아서 C:\src\에 풀면 C:\src\flutter 폴더 생기게 함
  • C:\src\ 만들고 그 안에 Flutter를 설치
    - 최종: C:\src\flutter

4-1-2-b) Flutter SDK 다운로드 & 압축 해제

4-1-2-c) PATH 추가

환경 변수 Path에 아래를 추가:

  • C:\src\flutter\bin

  • VS Code/PowerShell을 전부 닫고 다시 열기
    - PATH 적용을 위해 필요

    https://docs.flutter.dev/install/add-to-path

    4-1-2-d) 다시 확인

    where.exe flutter
    flutter --version
    dart --version

  1. Ctrl + Shift + PFlutter: New Project


4-2. 설치 확인

  • PowerShell에서:
flutter --version
dart --version


5. Flutter 기본 점검

flutter doctor -v


6. Android Studio 설치 + Android SDK 세팅 (Android 빌드/실행용)

https://docs.flutter.dev/platform-integration/android/setup

6-1. Android Studio 설치

  • Android Studio 설치 후 실행

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

6-2. SDK Manager에서 필수 구성요소 설치

  • Android Studio에서 SDK Manager로 이동한 뒤:

(1) SDK Platforms 탭

  • 원하는 Android API 버전을 설치

(2) More Actions → SDK Tools 탭

아래 항목이 선택되어 있어야 함:

  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • Android Emulator
  • Android SDK Platform-Tools

Not installed / Update available면 체크하고 Apply → OK → Finish

6-3. Android 라이선스 동의

  • PowerShell에서:
flutter doctor --android-licenses

모두 동의하면 All SDK package licenses accepted.


7. 에뮬레이터(AVD) 생성 & 가속(가상화) 설정

7-1. Windows에서 VM 가속

  • Android 공식 문서: Windows에서는 Windows Hypervisor Platform(WHPX) 사용을 권장

https://developer.android.com/studio/run/emulator-acceleration?utm_source=chatgpt.com&hl=ko

  • Microsoft도 Hyper-V/Hypervisor 기반 요건을 안내

https://learn.microsoft.com/en-us/windows/android/emulator?utm_source=chatgpt.com

7-2. AVD(가상 디바이스) 만들기

https://docs.flutter.dev/platform-integration/android/setup

  1. Android Studio → More Actions > Device Manager
  2. + Create Virtual Device
  3. Phone 선택 → 기기 선택
  4. System Image 다운로드(가능하면 x86_64 계열이 빠름)
  1. Finish 후 실행

7-3. Flutter가 디바이스를 인식하는지 확인

flutter devices


8) Windows 데스크톱 빌드까지 할 거면: Visual Studio 2022 설치(선택 사항)

https://docs.flutter.dev/platform-integration/windows/setup

8-1. Visual Studio 설치

  • Visual Studio 2022 설치 후 최신 업데이트 권장

8-2. Workloads 선택

  • 설치 관리자에서 Desktop development with C++ 워크로드를 선택
  • 설치 후 다시:
flutter doctor -v

9) 설치 완료 검증용 예시 앱 코드 (main.dart)

적용 방법

  1. 새 프로젝트 생성:
    • VS Code → Ctrl + Shift + P
    • Flutter: New Project
    • Application 선택
  2. lib/main.dart를 아래 코드로 전체 교체
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class SetupVerifiedApp extends StatefulWidget {
  const SetupVerifiedApp({super.key});

  
  State<SetupVerifiedApp> createState() => _SetupVerifiedAppState();
}

class _SetupVerifiedAppState extends State<SetupVerifiedApp> {
  ThemeMode _themeMode = ThemeMode.system;

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Setup Verified',
      debugShowCheckedModeBanner: false,
      themeMode: _themeMode,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
      ),
      home: HomeScreen(
        themeMode: _themeMode,
        onChangeThemeMode: (mode) => setState(() => _themeMode = mode),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({
    super.key,
    required this.themeMode,
    required this.onChangeThemeMode,
  });

  final ThemeMode themeMode;
  final ValueChanged<ThemeMode> onChangeThemeMode;

  
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _count = 0;
  DateTime _now = DateTime.now();

  void _tick() => setState(() => _now = DateTime.now());

  
  Widget build(BuildContext context) {
    final platform = defaultTargetPlatform.toString();
    final brightness = Theme.of(context).brightness.toString();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Setup Verified ✅'),
        actions: [
          PopupMenuButton<ThemeMode>(
            tooltip: 'Theme',
            initialValue: widget.themeMode,
            onSelected: widget.onChangeThemeMode,
            itemBuilder: (context) => const [
              PopupMenuItem(value: ThemeMode.system, child: Text('System')),
              PopupMenuItem(value: ThemeMode.light, child: Text('Light')),
              PopupMenuItem(value: ThemeMode.dark, child: Text('Dark')),
            ],
            child: const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Icon(Icons.palette_outlined),
            ),
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _InfoCard(
            title: '환경 정보',
            children: [
              _InfoRow(label: 'Platform', value: platform),
              _InfoRow(label: 'Build Mode', value: kDebugMode ? 'debug' : 'release/profile'),
              _InfoRow(label: 'Brightness', value: brightness),
            ],
          ),
          const SizedBox(height: 12),
          _InfoCard(
            title: '실행 확인(상태 변경)',
            children: [
              _InfoRow(label: 'Counter', value: '$_count'),
              const SizedBox(height: 8),
              FilledButton.icon(
                onPressed: () => setState(() => _count++),
                icon: const Icon(Icons.add),
                label: const Text('카운터 +1'),
              ),
            ],
          ),
          const SizedBox(height: 12),
          _InfoCard(
            title: '실시간/리빌드 확인',
            children: [
              _InfoRow(label: 'Now', value: _now.toString()),
              const SizedBox(height: 8),
              OutlinedButton.icon(
                onPressed: _tick,
                icon: const Icon(Icons.refresh),
                label: const Text('시간 새로고침'),
              ),
              const SizedBox(height: 8),
              const Text(
                '팁) VS Code에서 실행 중에 코드를 조금 수정하고 저장하면 Hot Reload로 바로 반영돼야 해요.',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _InfoCard extends StatelessWidget {
  const _InfoCard({required this.title, required this.children});

  final String title;
  final List<Widget> children;

  
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: Theme.of(context).textTheme.titleMedium),
            const SizedBox(height: 12),
            ...children,
          ],
        ),
      ),
    );
  }
}

class _InfoRow extends StatelessWidget {
  const _InfoRow({required this.label, required this.value});

  final String label;
  final String value;

  
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 110,
          child: Text(
            label,
            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  fontWeight: FontWeight.w600,
                ),
          ),
        ),
        Expanded(child: Text(value)),
      ],
    );
  }
}
  1. 에뮬레이터 켜기
  • Android Studio → Device Manager → ▶(Play) 눌러서 실행
  1. 디바이스 인식 확인(vs code에서)
flutter devices
  1. Android로 바로 실행
flutter run -d emulator-5554 #5554 부분은 에뮬레이터 위에 뜨는 번호로 작성

profile
감자애오

0개의 댓글