Framework · 2017년 공개

Flutter

Flutter는 Google이 만든 오픈 소스 UI 프레임워크로, Dart 언어로 쓴 하나의 코드로 모바일·웹·데스크톱 앱을 만듭니다.

Flutter는 Google이 개발한 오픈 소스 UI 프레임워크로, 2017년에 처음 공개되었습니다. 하나의 코드베이스로 Android, iOS, 웹, Windows, macOS, Linux 앱을 만들 수 있습니다. 앱은 Google의 Dart 언어로 작성하는데, Dart는 Java·TypeScript와 비슷한 문법의 객체 지향 언어로 널 안전성과 async·await를 지원하며 Flutter SDK에 함께 들어 있습니다.

Flutter는 운영체제의 기본 UI 부품을 쓰지 않고 자체 렌더링 엔진으로 화면을 직접 그리기 때문에, 플랫폼마다 같은 모습과 동작을 보장하고 사용자 정의 디자인과 애니메이션을 자유롭게 구현할 수 있습니다. 릴리스 빌드에서는 Dart 코드가 기계어로 미리 컴파일되어 빠르게 실행되고, 개발 중에는 핫 리로드로 바뀐 코드를 상태를 유지한 채 곧바로 확인할 수 있습니다. 그래서 여러 플랫폼에 동시에 출시해야 하는 모바일 앱에서 특히 많이 쓰입니다.

처음 시작한다면 Flutter SDK를 설치하고 flutter doctor로 개발 환경을 점검한 뒤, flutter create로 만든 카운터 앱을 고쳐 보며 위젯 개념을 익히는 것을 권합니다. 공식 문서의 codelab과 Dart 언어 안내서를 함께 보면 위젯 조합, 상태 관리, 레이아웃을 차근차근 배울 수 있습니다. 패키지는 pub.dev에서 찾아 flutter pub add로 추가합니다.

특징

하나의 코드로 여러 플랫폼

같은 Dart 코드로 Android, iOS, 웹, Windows, macOS, Linux 앱을 빌드하며, 필요할 때만 플랫폼별 코드를 더합니다.

모든 것이 위젯

글자, 여백, 레이아웃, 화면 전체까지 위젯으로 표현하고, 작은 위젯을 조합해 복잡한 화면을 만듭니다.

핫 리로드

앱 상태를 유지한 채 바뀐 코드를 곧바로 반영해, 화면을 고치고 결과를 확인하는 과정이 매우 빠릅니다.

자체 렌더링과 네이티브 성능

자체 엔진으로 모든 픽셀을 그리고, 릴리스 빌드는 기계어로 미리 컴파일되어 부드럽게 동작합니다.

이런 곳에 씁니다

Android·iOS 크로스플랫폼 모바일 앱
디자인이 독특한 브랜드 앱과 사내 업무 앱
Windows·macOS·Linux 데스크톱 앱
모바일과 함께 배포하는 웹 앱

설치하기

1
Flutter SDK 설치
VS Code에 Flutter 확장을 설치해 SDK를 자동으로 받거나, docs.flutter.dev에서 운영체제별 SDK를 내려받아 압축을 풀고 bin 폴더를 PATH에 추가합니다. Dart SDK는 Flutter SDK에 함께 들어 있습니다.
2
개발 환경 점검
flutter doctor로 Android Studio, Xcode, Chrome, Visual Studio 등 대상 플랫폼별 도구가 갖춰졌는지 확인합니다. 만들려는 플랫폼의 도구만 있으면 됩니다.
```
flutter doctor
```
3
첫 프로젝트 만들기
flutter create로 새 프로젝트를 만들고 연결된 기기나 에뮬레이터, 브라우저에서 실행합니다. 실행 중에 코드를 저장하면 핫 리로드로 바로 반영됩니다.
```
flutter create hello_app && cd hello_app && flutter run
```

첫 프로그램

첫 앱

모든 Flutter 앱은 lib/main.dart의 main 함수에서 시작하며, runApp에 넘긴 위젯이 화면 전체가 됩니다. MaterialApp은 Material 디자인 앱의 뼈대, Scaffold는 한 화면의 기본 틀이고, Center와 Text로 가운데에 글자를 표시합니다. flutter create가 만든 카운터 앱의 main.dart를 이 코드로 바꾸고 flutter run으로 실행해 보세요.

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Hello, world!')),
      ),
    ),
  );
}

flutter create hello_app && cd hello_app && flutter run

자주 쓰는 도구

Flutter CLI: flutter 명령으로 프로젝트 생성, 실행, 테스트, 빌드, 패키지 관리, 환경 점검을 모두 처리합니다.
DevTools: 위젯 트리 검사, 레이아웃 탐색, 성능·메모리 분석, 네트워크 확인을 제공하는 디버깅 도구 모음입니다.
VS Code: Flutter·Dart 확장을 설치하면 자동 완성, 기기 선택, 디버깅, 저장 시 핫 리로드를 쓸 수 있습니다. Android Studio용 플러그인도 있습니다.
pub.dev: Dart와 Flutter의 공식 패키지 저장소로, http, provider, go_router 같은 패키지를 찾아 프로젝트에 추가합니다.

단계별 안내서

설치부터 Flutter 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.

공식 문서 · 참고 자료

쓰는 언어

DartDart는 Google이 만든 클라이언트 최적화 언어로, Flutter 앱 개발의 기반이며 서버 · 명령줄 도구 · 웹까지 하나의 언어로 다룰 수 있습니다.

토론

토론 시작하기

Flutter 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.

아직 토론이 없습니다. 첫 이야기를 시작해 보세요.

특징