[Flutter] 개발환경 구축하기 (윈도우)

1. Windows에서 설치

https://flutter-ko.dev/get-started/install/windows

Choose your first type of app

 

- 윈도우 버전 다운로드 후 특정 폴더에 압축을 풀어준다.

ex) C:\dev\flutter

 

- 환경 변수를 설정해준다.

제어판 > 시스템 환경 변수 설정 > Path 설정

ex) C:\dev\flutter\bin

 

2. 안드로이드 스튜디오 설치하기

https://developer.android.com/studio

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

 

- 모두 동의 후 설치하고, 좌측 Plugins 메뉴 클릭 후 flutter 검색하고 설치해준다. Dart도 함께 설치할지 물어보면 수락해준다.

 

3. 플러터 닥터로 문제 확인하기

- 명령 프롬프트(cmd) 창에서 flutter doctor를 실행한다.

flutter doctor

 

명령을 실행했을 때 flutter와 Android toolchain은 녹색 체크 표시가 되어야 한다. (visual studio는 괜찮다.)

 

- cmdline-tools component is missing 문제 해결하기

Customize > All setings... > 검색창에 Android SDK > SDK Tools > Android SDK Command-line Tools 설치

이때, Android SDK Location이 잘 되어 있는지 확인한다. (경로에 한글 및 괄호 등이 들어가면 오류가 생길 수 있으니 주의하자.)

 

- Unable to locate Android SDK 문제 해결하기

명령 프롬프트(cmd) 창에 아래와 같은 명령어를 입력한다.

flutter config --android-sdk <path>

 

path는 Android SDK Location이다. ex) flutter config --android-sdk "C:\Users\Android\Sdk”

 

- Android license status unknown 문제 해결하기

명령 프롬프트(cmd) 창에 아래와 같은 명령어를 입력한다.

flutter doctor --android-licenses

 

이제 명령 프롬프트(cmd) 창에서 flutter doctor를 실행하면 다음과 같이 모두 초록불이 뜨면 성공!

 

4. 프로젝트 생성 후 실행 테스트

- Projects > new flutter project 클릭

 

- main.dart 소스 수정하기

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.red,
              width: 100,
              height: 100,
              padding: const EdgeInsets.all(8.0),
              margin: const EdgeInsets.all(8.0),
            ),
            Container(
              color: Colors.green,
              width: 100,
              height: 100,
              padding: const EdgeInsets.all(8.0),
              margin: const EdgeInsets.all(8.0),
            ),
            Container(
              color: Colors.blue,
              width: 100,
              height: 100,
              padding: const EdgeInsets.all(8.0),
              margin: const EdgeInsets.all(8.0),
            ),
          ],
        ),
      ),
    ),
  );
}

 

성공!

애뮬레이터를 실행할 때 Pixel 2 API 31을 사용했다. Device Manager에서 설정 가능하다. Device가 실행이 안된다면 상단의 기기 선택에서 chrome(web)으로 선택하면 크롬창에 나타날 것이다.

 

---

참고 : https://cafe.naver.com/aiclubcafe/673