입문

Flutter 설치와 환경 점검

Flutter SDK를 설치하고 flutter doctor로 개발 환경을 확인합니다.

핵심 개념

Flutter 설치와 환경 점검 주요 항목

설치의 목표

Flutter SDK는 프로젝트 생성, 실행, 빌드, 업그레이드를 담당하는 도구 모음입니다.

언제 쓰나: Android, iOS, Web, Desktop 중 어떤 플랫폼을 목표로 하느냐에 따라 추가 도구가 달라집니다.

Flutter에서: 처음에는 하나의 플랫폼에서 앱을 실행하는 것에 집중하고, 이후 필요한 플랫폼을 확장하는 편이 좋습니다.

flutter doctor
flutter devices

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter doctor
[✓] Flutter
[✓] Android toolchain
[✓] Chrome
[✓] Connected device')
      ],
    )
    ],
  ),
)

flutter doctor

flutter doctor는 SDK, 에디터, 플랫폼 도구, 라이선스 상태를 점검합니다.

언제 쓰나: 초록 체크가 아니어도 당장 목표 플랫폼과 관련 없는 항목이라면 나중에 처리해도 됩니다.

Flutter에서: 문제가 생기면 오류 메시지를 그대로 검색하기보다 먼저 doctor가 제안하는 해결 순서를 따릅니다.

flutter doctor
flutter devices

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter doctor
[✓] Flutter
[✓] Android toolchain
[✓] Chrome
[✓] Connected device')
      ],
    )
    ],
  ),
)

확장 개념

빠른 체험과 로컬 설치

로컬 환경을 준비하기 전에는 DartPad에서 단일 파일 Flutter 예제를 실행해 볼 수 있습니다.
실제 앱 개발을 시작하려면 Flutter SDK와 에디터, 목표 플랫폼 도구를 로컬에 설치해야 합니다.
이미 설치했다면 새 설치보다 SDK 업그레이드와 채널 상태 확인이 먼저입니다.

확장 개념

업데이트와 문제 해결

Flutter SDK는 stable 또는 beta 채널을 기준으로 최신 상태를 유지하는 편이 좋습니다.
이전 버전이 필요하면 SDK archive에서 특정 릴리스를 내려받아 사용할 수 있습니다.
명령줄에서 Flutter를 쓰려면 PATH 설정이 되어 있어야 하며, 문제가 생기면 flutter doctor 결과부터 확인합니다.

코드

예제

flutter doctor
flutter --version
flutter devices

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter doctor
[✓] Flutter
[✓] Android toolchain
[✓] Chrome
[✓] Connected device')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

Flutter SDK 설치PATH 설정flutter doctor 실행첫 실행 대상 선택

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Dart languageDart 문법 자체가 궁금할 때 함께 봅니다.