[Flutter 완벽 정리] Flutter SDK 설치 방법, android toolchain 오류 해결하기, Android studio, VS code, Dart, 어플 만들기, hello world 출력하기

Flutter를 설치하고 VS Code로 실행하는 방법을 알아보겠습니다.

1. Flutter SDK 다운로드

https://docs.flutter.dev/get-started/install/windows/desktop?tab=download

위 링크로 접속하고

Zip 파일을 다운받아 압축을 푼다.

그리고 윈도우 환경 변수에 flutter SDK 위치를 추가해 플러터 명령 실행을 위한 환경을 만들어준다.

시스템 환경 변수 편집 -> 고급 -> 환경 변수

Path에 Flutter SDK 디렉토리 위치를 추가한다. (path 선택 후 편집 클릭)

빈 칸을 더블클릭 한 후 압축을 푼 Flutter 파일의 경로를 붙여넣기 한다.

2. Android Studio 설치

https://developer.android.com/studio?gad_source=1&gclid=Cj0KCQjwu8uyBhC6ARIsAKwBGpTG3oA9Y0XYrZdwbPG3EER5s-su1Iz0Ww2Ckgyh-aOQF4SBtiOlqDAaAp21EALw_wcB&gclsrc=aw.ds&hl=ko

위 링크에서 android studio를 설치하고 plugins 창의 Flutter를 설치한다.

3. cmd에서 flutter doctor 입력

위 사진처럼 Android toolchain 부분이 오류가 뜰 경우, Customize의 All settings 클릭

그리고 SDK Tools의 Android SDK Command-line Tools를 선택 후 Apply -> 설치 -> OK

이 과정이 끝난 후 다시 cmd 창에 flutter doctor 입력하면 라이선스 오류가 발생한다.

이후 cmd 창에 ‘flutter doctor –android-licenses’ 문장을 입력하면 y / N 선택지가 3개 나오는데, 모두 y로 입력한다.

이 과정이 끝나면 성공적으로 모두 체크 표시가 되어 있는 것을 볼 수 있다.

4. VS Code 실행

https://code.visualstudio.com/download

위 링크에서 VS code를 설치하고 실행한 다음,

보기 -> 명령 팔레트 -> flutter -> Flutter: New Project -> Apllication 실행

프로젝트를 저장할 경로 선택 (작업할 폴더 선택)

프로젝트 이름 지정

기본 제공 코드가 뜨면 성공. 우측하단 Dart & Flutter 설치가 뜨면 Yes 클릭.

5. VS Code dart 언어 설정하기

다시 한번 명령 팔레트 실행 후 Dart: Use Recommended Settings 입력

우측 하단에 적용 완료 메시지가 뜨면 성공

6. VS Code에서 가상 머신 실행하기

이번엔 명령 팔레트에 Flutter: Launch Emulator 입력

자신이 설정한 SDK API 선택

조금 기다리면 에뮬레이터가 실행된다.

7. Dart 코드로 Hello world 작성

lib 폴더 내에 있는 main.dart 코드를 모두 지우고 아래 코드를 입력

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my_project', // 앱의 아이콘 이름
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wonjin Flutter Project'), // 앱 상단바 설정
        ),
        body: Center(
          child: Text('Hello World'), // 출력할 내용
        ),
      ),
    );
  }
}

8. hello world 출력

실행 -> 디버깅 없이 실행

실행하면 아래와 같은 창이 나온다.

wonjin data lab