Flutter 첫 앱 만들기 (초보도 10분 만에 실행하는 완벽 가이드)

Flutter 개발환경이 아직이라면 먼저 확인하세요

→ Flutter 개발환경 세팅 방법 보기

 

Flutter 첫 앱 만들기를 처음 시도하는 분들을 위해 UI 생성부터 실행까지 단계별로 정리했습니다. 이 글 하나로 Flutter 입문자가 첫 앱을 직접 실행할 수 있습니다.

Flutter 첫 앱, 어디서부터 시작해야 할까?

개발환경 세팅까지 끝냈다면 이제 진짜 앱을 만들어볼 차례입니다.
하지만 처음에는 “뭘 어떻게 만들어야 하지?”라는 생각이 들 수 있습니다.

이 글에서는 초보 기준으로 Flutter 첫 앱을 만드는 과정을 단계별로 정리했습니다.

1. 프로젝트 생성

터미널에서 아래 명령어를 입력

flutter create my_first_app
cd my_first_app

프로젝트가 생성되면 기본 구조가 자동으로 만들어집니다.

2. 기본 구조 이해하기

가장 중요한 파일:

lib/main.dart

이 파일이 앱의 시작점입니다.

3. 첫 UI 만들어보기

아래는 가장 기본적인 Flutter 앱 코드입니다. 이 코드를 통해 앱의 구조를 이해할 수 있습니다.

main.dart를 열고 아래 코드를 확인.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Center(
          child: Text('Hello Flutter!'),
        ),
      ),
    );
  }
}
실행하면 “Hello Flutter!”가 화면에 표시됩니다.

여기까지 했다면 이미 50% 성공입니다!
이제 앱 실행만 하면 실제 화면을 확인할 수 있습니다.



4. 앱 실행하기
터미널에서 실행 : flutter run

초보가 자주 막히는 부분

1. 실행이 안 될 때

• 에뮬레이터 실행 여부 확인
• flutter doctor 체크

2. 코드 수정해도 반영 안됨

👉 단축키:

• Hot Reload: r
• Hot Restart: R

★핵심 정리

• main.dart가 시작점
• UI는 위젯으로 구성
• 실행은 flutter run

이 3가지만 이해하면 첫 단계 성공입니다!!!!

🎯다음 단계

개발환경이 아직이라면
→ Flutter 개발환경 세팅 방법 먼저 보기

기본 개념이 부족하다면
→ IT 용어 정리 글 보기

오류가 발생했다면
→ Flutter 오류 해결 모음 보기

처음에는 단순한 "Hello Flutter" 화면이지만, 이 경험이 개발을 계속하게 만드는 중요한 시작점이 됩니다.

저도 처음에는 설치부터 실행까지 많은 시행착오를 겪었지만, 직접 실행해보는 과정에서 가장 빠르게 성장할 수 있었습니다.

Flutter첫앱, Flutter입문, FlutterUI, 앱개발초보, Flutter튜토리얼, Dart기초, Flutter실습