[Flutter] Flutter 환경 구축 가이드

하영(Emma)·2025년 4월 23일

Flutter

목록 보기
2/6
post-thumbnail

1. Flutter와 Dart란?

Flutter란?

Flutter

  • Google에서 Mobile/Web/Desktop을 단일 코드 베이스로 개발할 수 있도록 만든 크로스 플랫폼(Cross Platform) 프레임워크이다.
  • UI를 빠르게 만들 수 있는 위젯 기반 구조Hot Reload 기능 덕분에 개발 생산성이 높다.

Dart란?

Dart

  • Dart는 Google에서 개발한 언어로, C 계열의 문법 구조를 기반으로 하고 있다.
  • Java, C#, JavaScript의 장점을 흡수하여 객체지향, 비동기 프로그래밍, 함수형 프로그래밍이 모두 가능하다.
  • Flutter의 UI 구성 요소를 제어하는 주 언어로 사용된다.

Flutter의 특징

  • 하나의 언어(Dart)로 UI와 비즈니스 로직을 함께 작성 가능하다.
  • 앱을 한 번 개발하면 Android, iOS, Web, Desktop 모두 대응 가능하다.
  • Hot Reload를 통해 코드 수정 즉시 결과 반영한다.
  • 풍부한 위젯, 커뮤니티 지원 및 패키지 생태계이다.
  • Native에 가깝게 동작하는 등 높은 성능을 가진다.

2. Flutter 사용을 위한 환경설정

Flutter 개발환경

Android Studio and Flutter SDK

Flutter를 개발하기 위해서는 아래 두 가지가 필요하다:

  • IDE(Integrated Development Environment): 통합 개발 환경으로, Android Studio를 권장한다.
    Android Studio는 코드 작성, 디버깅, 에뮬레이터 실행 등 다양한 기능을 제공하며, 플러그인을 통해 Flutter와 Dart를 완벽하게 지원한다.
  • SDK(Software Development Kit): Flutter 앱을 빌드하고 실행하는 데 필요한 라이브러리 및 도구 모음인 Flutter SDK를 사용한다.
    Flutter SDK는 Flutter 명령어(flutter doctor, flutter run 등)와 프로젝트 빌드, 의존성 관리 등을 담당한다.

Android Studio 설치

Android Studio 다운로드
Android Studio
위 링크에서 설치 파일을 다운로드해 설치하면 된다. 설치 후에는 Flutter와 Dart 플러그인을 추가로 설치해줘야 한다.


Flutter SDK 설치

Flutter SDK 다운로드
아래 이미지를 참고하여 자신의 OS에 맞게 SDK를 다운로드하고 환경변수 설정하면 된다.

설치1
설치2
설치3


3. 프로젝트 구조

프로젝트 생성

프로젝트 생성 시 유의사항!

  • 첫 글자에 숫자를 사용할 수 없다.
  • 소문자와 언더스코어(_)만 사용할 수 있다.
  • flutter의 예약어는 사용할 수 없다.

프로젝트 구조

Flutter 프로젝트를 생성하면 다양한 폴더와 파일들이 자동으로 구성되며, 주요한 구조는 다음과 같다:

  • lib/: Dart 코드가 들어가는 메인 폴더. main.dart 파일이 가장 중요하다.
  • android/, ios/: 플랫폼 별 네이티브 코드가 위치하는 폴더
  • test/: 테스트 코드를 작성하는 폴더
  • pubspec.yaml: 앱에서 사용할 패키지 및 설정 정보를 담는 파일

이 구조를 잘 이해하면 Flutter 프로젝트의 전체 흐름을 파악하는 데 도움이 된다.


DartPad를 활용한 실습

설치 없이 바로 Dart 문법을 실습할 수 있는 웹 도구인 DartPad를 사용할 수 있다.

DartPad 1
DartPad 2
간단한 위젯 구조를 연습하거나 Dart 문법에 익숙해지는 데에 좋다.


가상 디바이스 실행

프로젝트 생성 후 우측 상단 Device Manager를 클릭해 기본 제공되는 에뮬레이터를 실행할 수 있다.

에뮬1
잠시 기다리면 아래처럼 가상 핸드폰이 실행된다.

에뮬2


단축키 Eclipse로 변경하기

익숙한 키맵을 사용하고 싶다면 아래 경로로 들어가서 단축키를 변경할 수 있다:

File > Settings > Keymap > Eclipse 선택

Keymap1
Keymap2
Keymap3


profile
Data Scientist, interested in CV, NLP

0개의 댓글