01. flutter 2버전 설치 및 환경 설정

flutter 설치 

가장 우선 flutter를 사용하기 위해 flutter 설치를 진행한다. 

 

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

Install

해당 홈페이지로 가서 자신에게 맞는 os에 따라 설치를 진행한다. 

 

본인의 os는 window이기 때문에 window버전을 설치진행 하였다. 

설치가 완료되면 zip파일의 압출을 풀어둔다. 

 

환경 변수 설정 

압축을 풀었다면 flutter 파일의 위치를 설정한다. 본인은 c드라이브에 C:\flutter로 파일을 위치시켜 두었다. 

이제 시스템 환경변수를 설정해야 한다. 

 

일단 검색 도구로 아래와 시스템 환경 변수 편집으로 들어간다.

환경 변수 버튼을 클릭하여 환경 변수 메뉴로 들어간 후 

다음과 같이 path에 편집 버튼을 눌러 flutter가 설치된 파일 경로에서 bin 파일을 추가 하여 path를 설정해 둔다.

설정이 완료되면 cmd로 들어가 flutter --version 명령이 동작하는지 확인한다. (cmd는 왼쪽 아래 검색에서 cmd로 치면 동작 시킬 수 있다.) 

 

안드로이드 flutter pulgin 추가 

일단 android가 설치 되었다는 가정하에 진행하도록 하겠다. 안드로이드로 들어간다.

안드로이드에 들어가서 file -> setting 메뉴로 들어간다. 

setting 화면에서 plugins 로 들어가고 여기서 flutter plugin을 설치 후 restart 진행한다. 

 

 vscode로 flutter 진행하기 

이제 vscode를 세팅해보자 vscode에서 flutter extension을 설치해주자 

설치가 완료 되면 빈 폴더 하나를 만들어 동작이 되는지 한번 확인해 보자 본인은 바탕화면에 flutter라는 파일을 만들어 두었다. 

이제 터미널을 통해 신규 flutter 프로젝트를 만들어 보자. 

$ flutter create app
$ cd app
$ dart migrate --apply-changes

그리고 나서 app/lib/main.dart 로 들어가 내용을 다 삭제한 후 아래와 같이 입력하자.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

그리고 F5를 눌러 정상적으로 debug 되는지 확인해 보자 

다음과 같은 화면이 나왔다면 정상적으로 flutter 설치 및 세팅이 완료가 된 것이다. 

아 한 가지 놓칠뻔 했다. 여기서 이제 android로 정상적으로 잘 되는지 확인해 봐야 한다. 

crtl + shift + p 를 누른 후 

flutter : Launch Emulator를 누르고 

현재 안드로이드 스튜디오에서 사용가능한 에뮬레이터를 동작시켜 보자 그러면

위와 같은 화면이 나타나게 되고 이 상태에서 F5를 눌러 디버깅을 시작하면 다음과 같이 안드로이드 에뮬레이터에 정상적으로 실행되는 것을 확인할 수 있다. 이로서 우리는 모든 환경설정을 마치게 되었다. 이제 다음시간 부터 차근 차근 flutter를 파보도록 하자