입문

첫 Flutter 앱 만들기

프로젝트를 만들고 기본 앱이 어떻게 실행되는지 확인합니다.

핵심 개념

첫 Flutter 앱 만들기 주요 항목

프로젝트 생성

flutter create는 기본 폴더 구조와 플랫폼별 설정을 함께 생성합니다.

언제 쓰나: lib/main.dart는 앱 진입점이며, 처음 Flutter 코드를 읽는 출발점입니다.

Flutter에서: 처음 생성된 카운터 앱은 StatefulWidget, setState, MaterialApp을 한 번에 보여주는 작은 예제입니다.

flutter create hello_flutter
cd hello_flutter
flutter run

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 create hello_flutter
Creating project...
Wrote 128 files.
All done.')
      ],
    )
    ],
  ),
)

실행과 수정

flutter run으로 연결된 기기나 에뮬레이터에서 앱을 실행합니다.

언제 쓰나: hot reload는 코드 변경을 빠르게 반영해 UI 실험 속도를 높여 줍니다.

Flutter에서: 처음에는 파일을 많이 나누기보다 main.dart 안에서 구조를 이해하는 것이 좋습니다.

flutter create hello_flutter
cd hello_flutter
flutter run

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 create hello_flutter
Creating project...
Wrote 128 files.
All done.')
      ],
    )
    ],
  ),
)

확장 개념

프로젝트 구조

lib/main.dart는 Flutter 앱의 진입점이며 runApp으로 루트 위젯을 실행합니다.
android, ios, web, macos, windows, linux 폴더는 플랫폼별 실행과 배포 설정을 담습니다.
pubspec.yaml은 패키지 의존성, 앱 에셋, 폰트 같은 프로젝트 구성을 관리합니다.

확장 개념

Hot reload와 Hot restart

hot reload는 실행 중인 앱에 코드 변경을 빠르게 반영해 UI 수정 속도를 높입니다.
상태 초기화가 필요하거나 앱 시작 흐름을 다시 확인해야 할 때는 hot restart를 사용합니다.
네이티브 설정이나 의존성 변경처럼 빌드 구성이 바뀌는 경우에는 앱을 다시 실행해야 합니다.

코드

예제

flutter create hello_flutter
cd hello_flutter
flutter run

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 create hello_flutter
Creating project...
Wrote 128 files.
All done.')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

flutter create 실행main.dart 읽기hot reload 경험기본 카운터 앱 구조 이해

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