Flutter 설치 및 시작하기(macOS, IntelliJ)

반응형

Flutter SDK 설치

플러터 앱을 만들기 위해서는 먼저 Flutter SDK를 설치해야 한다.

Flutter SDK에는 플러터 컴파일러, 프로젝트 생성기, 디바이스 관리자, 문제 진단 툴 등이 포함되어 있다.

Flutter 홈페이지에 각자 사용하는 OS를 선택하자.

여기서는 macOS를 기준으로 설명하겠다.

Flutter SDK 최신 stable 버전을 다운로드 받고 파일의 압축을 풀어준다.

 

.bashrc 경로를 추가해준다.

export PATH="$PATH:/Users/Your_User/Your_Dev_Folder/flutter/bin"

경로가 잘 설정되었고 flutter가 설치되었는지 확인해보자.

# 경로 확인
$ echo $PATH 

# flutter 설치 확인
$ which flutter
$ flutter --version

# flutter SDK 안에 dart도 포함되어 있다.
$ dart --version

 

 

IDE 설치

Visual Studio Code, android studio, IntellijJ 등 같은 IDE에서 플러터를 지원한다.

안드로이드 스튜디오와 인텔리제이는 젯브레인에서 만든 툴이다.

비주얼스튜디오 코드는 마이크로소프트에서 만든 툴이다.

 

나는 자바를 주로 사용해서 익숙한 IntelliJ를 선택했다.

여러분도 익숙한 IDE를 설치해서 하면 된다.

 

 

 

 

 

 

IDE Plugin 설치

IDE를 선택했으면 이제 아래의 Plugin를 설치해야 한다.

  • dart
  • flutter

 

IntelliJ에서 Preferences > Plugins 클릭한 후 flutter 플러그인을 검색하고 설치한다.

 

dart 플러그인도 설치한다.

 

 

 

 

 

에뮬레이터 설정

이제 앱을 컴파일할 준비는 끝이 났다. 앱을 실행시키려면 앱을 실행할 디바이스가 필요하다.

만약 디바이스가 없다면 가상 기기인 에뮬레이터를 사용해서 앱을 실행할 수 있다.

안드로이드 에뮬레이터를 사용하는 하는 방법은 아래 글을 참고하자.

 

안드로이드 에뮬레이터 활성화

 

Intellij 에서 AVD Manager 활성화하기

Flutter를 이용하여 안드로이드 앱을 개발하려고 하는데 아이폰 사용자라 안드로이드폰이 없다. 안드로이드폰은 없고 안드로이드 앱 개발하고 싶은 나 같은 사람을 위한 방법이 존재한다. 바로 In

1minute-before6pm.tistory.com

 

 

Flutter 앱 만들기

이제 "Hello World" 를 출력하는 앱을 만들어보자.

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'),
        ),
      ),
    );
  }
}

 

 

안드로이드 에뮬레이터를 실행하고 앱을 실행해보자.

 

 

앱을 실행한 후 코드를 수정하고 다시 실행하고 싶을 수 있다.

핫리로드 버튼을 클릭하면 변경한 내용이 즉시 컴파일해서 로드된다.

 

 

참고